Attaching Wi-Fi credentials | laravel-mobile-pass | Spatie SPATIE Laravel Mobile Pass ====================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-mobile-pass](https://spatie.be/docs/laravel-mobile-pass/v1) Apple-wallet Attaching Wi-Fi credentials Version v1 Other versions for crawler [v1](https://spatie.be/docs/laravel-mobile-pass/v1) Attaching Wi-Fi credentials - [ Introduction ](https://spatie.be/docs/laravel-mobile-pass/v1/introduction) - [ Support us ](https://spatie.be/docs/laravel-mobile-pass/v1/support-us) - [ Requirements ](https://spatie.be/docs/laravel-mobile-pass/v1/requirements) - [ Installation & setup ](https://spatie.be/docs/laravel-mobile-pass/v1/installation-setup) - [ Getting credentials from Apple ](https://spatie.be/docs/laravel-mobile-pass/v1/getting-credentials-from-apple) - [ Getting credentials from Google ](https://spatie.be/docs/laravel-mobile-pass/v1/getting-credentials-from-google) - [ Questions and issues ](https://spatie.be/docs/laravel-mobile-pass/v1/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-mobile-pass/v1/changelog) - [ About us ](https://spatie.be/docs/laravel-mobile-pass/v1/about-us) Basic usage ----------- - [ Generating your first pass ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/generating-your-first-pass) - [ Delivering passes to users ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/handing-out-passes) - [ Adding images ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/adding-images) - [ Adding barcodes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/adding-barcodes) - [ Updating a pass ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/updating-a-pass) - [ Retrieving mobile passes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/retrieving-mobile-passes) - [ Expiring passes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/expiring-passes) Available pass types -------------------- - [ Introduction ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/introduction) - [ Boarding pass ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/boarding-pass) - [ Event ticket ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/event-ticket) - [ Coupon ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/coupon) - [ Loyalty card ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/loyalty) - [ Generic ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/generic) Apple Wallet ------------ - [ Field zones ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/field-zones) - [ Apple-specific methods ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/apple-specific-methods) - [ Pass relevance ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/pass-relevance) - [ NFC passes ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/nfc) - [ Attaching Wi-Fi credentials ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/attaching-wifi-credentials) - [ Storing mobile passes ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/storing-mobile-passes) Google Wallet ------------- - [ Pass classes ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/pass-classes) - [ Object methods ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/object-methods) - [ Hosting pass images ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/hosting-images) Advanced usage -------------- - [ Handling errors ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/handling-errors) - [ Customizing actions ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/customizing-actions) - [ Customizing models ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/customizing-models) - [ Reading stored passes ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/reading-stored-passes) - [ Events ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/events) - [ Testing your passes ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/testing-your-passes) Attaching Wi-Fi credentials =========================== ### On this page 1. [ Option 1: the wifiAccess semantic tag ](#content-option-1-the-wifiaccess-semantic-tag) 2. [ Option 2: a Wi-Fi QR code ](#content-option-2-a-wi-fi-qr-code) 3. [ Security considerations ](#content-security-considerations) 4. [ Apple's reference ](#content-apples-reference) 5. [ Try it ](#content-try-it) There are two ways to ship Wi-Fi credentials on an Apple Wallet pass, and they behave very differently. Pick the one that matches how users are supposed to join. - Attach them via the `wifiAccess` semantic tag. A "Join Wi-Fi network" button shows up inside the pass holder's own Wallet app when the pass is contextually relevant. Apple-only, narrower pass-type support. - Encode the credentials in the pass's QR code. Anyone (including the pass holder) scans the barcode with their phone's camera and the OS offers to join. Works cross-platform, no relevance or entitlement needed. Option 1: the wifiAccess semantic tag --------------------------------------------------------------------------------------------------------------------------------------------------------------------- Apple's `wifiAccess` semantic tag drives a dedicated "Join Wi-Fi network" button inside Wallet. Call `addWifiNetwork()` with the SSID and password: ``` use Spatie\LaravelMobilePass\Builders\Apple\EventTicketPassBuilder; EventTicketPassBuilder::make() ->setOrganizationName('Fab Four Promotions') ->setSerialNumber('BTL-SHEA-0042') ->setDescription('The Beatles at Shea Stadium') ->addWifiNetwork('SheaStadium-Guest', 'welcome1965') ->save(); ``` Chain multiple calls to attach more than one network: ``` $builder ->addWifiNetwork('SheaStadium-Guest', 'welcome1965') ->addWifiNetwork('SheaStadium-VIP', 'backstage1965'); ``` ### When the button actually surfaces The button doesn't show up just because the pass has the credentials. Apple only exposes it when the pass is contextually relevant. In practice that means you also want to set [pass relevance](apple-wallet/pass-relevance) so the pass surfaces on the lock screen at the right moment: ``` use Illuminate\Support\Carbon; $builder ->addLocation( latitude: 40.7559, longitude: -73.8456, relevantText: 'Welcome to Shea Stadium', ) ->setRelevantDate(Carbon::parse('1965-08-15 19:00')) ->addWifiNetwork('SheaStadium-Guest', 'welcome1965'); ``` Now the pass comes forward an hour before the show when the user is near the stadium, with the Wi-Fi button visible. Pass types that actually render the button: boarding passes (iOS 12+), event tickets (iOS 13+). Other pass types accept the field but the user won't see a button. ### What networks it supports - WPA2/WPA3 personal (pre-shared key). - WPA-Enterprise (username + password) is not supported. - Hidden SSIDs work but you'll want to confirm the exact SSID string matches what the AP broadcasts. Option 2: a Wi-Fi QR code --------------------------------------------------------------------------------------------------------------------------------- Call `setWifiBarcode()` with the SSID and password. The builder encodes the credentials as a QR code on the pass, in the standard Wi-Fi URI format that iOS's camera app and Android's camera understand. ``` use Spatie\LaravelMobilePass\Builders\Apple\GenericPassBuilder; GenericPassBuilder::make() ->setOrganizationName('Spatie') ->setDescription('Guest Wi-Fi') ->addField('ssid', 'Spatie Guest', label: 'Network') ->addSecondaryField('password', 'welcome', label: 'Password') ->setWifiBarcode('Spatie Guest', 'welcome') ->save(); ``` For an open network, leave the password off: ``` $builder->setWifiBarcode('Spatie Guest'); ``` For a hidden SSID, pass `hidden: true`. You can also override the alt text that renders next to the barcode. By default it shows the SSID. ``` $builder->setWifiBarcode( ssid: 'Spatie Guest', password: 'welcome', hidden: true, altText: 'Scan to join', ); ``` This approach shines when other people scan your pass to join. Pin it in Wallet for your home network, hand the QR to a guest, let coworkers scan the pass displayed on your phone. Security considerations ----------------------------------------------------------------------------------------------------------------------------- Whichever approach you pick, the password lives in the pass in plain text. Anything that exports the pass (mail attachments, screenshots, iCloud backups) exposes it. Use this for networks whose password is meant to be shared, not corporate networks or guest networks that rotate daily. Changing the password later means [updating the pass](basic-usage/updating-a-pass) so the new credentials land on the user's device. Devices that have already joined keep the old password cached until they forget the network. Apple's reference --------------------------------------------------------------------------------------------------------- The underlying field for the first approach is the [`wifiAccess` semantic tag](https://developer.apple.com/documentation/walletpasses/semantictagtype/wifiaccess) in the pass's `semantics` dictionary. Apple's [Semantic Tags reference](https://developer.apple.com/documentation/walletpasses/semantictags) lists every tag the pass format supports. The QR-code approach uses the [Wi-Fi URI format](https://en.wikipedia.org/wiki/QR_code#Joining_a_Wi-Fi_network) that originated with Android and was later adopted by iOS. It's documented by both platforms as a shortcut for joining networks. Try it -------------------------------------------------------------------------- The [live demo](https://mobile-pass-demo.spatie.be/wifi-pass) has a form where you enter an SSID and password and download a generated pass. It uses the QR-code approach so the same pass works for anyone who scans it. Source: [`GenerateExampleWifiPass.php`](https://github.com/spatie/laravel-mobile-pass-demo/blob/main/app/Actions/GenerateExampleWifiPass.php) and [`WifiPassForm.php`](https://github.com/spatie/laravel-mobile-pass-demo/blob/main/app/Livewire/WifiPassForm.php). A good match? ------------- ### What we do best - All things Laravel - Custom frontend components - Building APIs - AI-powered features - Simplifying things - Clean solutions - Integrating services ### Not our cup of tea - WordPress themes - Cutting corners - Free mockups to win a job - "Just execute the briefing" In short: we'd like to be a **substantial part** of your project. [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)