Server-Side Sign in with Apple

Nov 15 2022 · Swift 5.6, macOS 12, iOS 15, Xcode 13.3

Part 2: Add Sign in with Apple to a Website

06. Setting up Sign in with Apple for the Web

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 05. Authenticate Existing Users with Sign in with Apple Next episode: 07. Add the Sign in with Apple Button to a Website

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Transcript: 06. Setting up Sign in with Apple for the Web

In order for Sign in with Apple on the web to work, you need to set up your site in the Apple Developer portal. There’s no Xcode to do it for you!

First, you need to expose your app. Sign in with Apple requires the app to run over HTTPS and Apple needs to be able to send requests to it in order to pass data back. So your app needs to be accessible over the internet. Ngrok is a really useful tool to do this and even better, you can use it for free!

Head to ngrok.com, create an account and download it. Once you’ve downloaded the binary, head to your Ngrok dashboard and find the command to authenticate the command line tool. Once authenticated, in a Terminal window run

ngrok http 8080

This exposes your local 8080 port through a tunnel and gives you a publicly accessible secure endpoint to use! Note you need to keep this running to keep the same URL on the free account.

Now, go to your Apple developer account and click Certificates, IDs & Profiles. Click on Identifiers and create a new identifier. Choose a Service ID and click Continue. Create a suitable description:

Sign in with Apple demo

And create an identifier. This should look like a reverse URL, similar to your bundle ID but it should be separate. For example dev.timc.siwa-demo.web. Click Continue and then Register.

When it’s created, click on the new identifier, enable Sign in with Apple then click Configure. In the primary App ID, choose the App ID for your iOS app. This ensures that SIWA accounts are shared between the web and the iOS app. Under domains, enter the domain from Ngrok without any scheme:

70e1-89-240-205-25.eu.ngrok.io

Then in the return URLs provide the redirect URL you’ll create in a later video, which will be /login/siwa/callback:

https://70e1-89-240-205-25.eu.ngrok.io/login/siwa/callback

Click Next and then Done. With the service configured, click Continue and then Save

You now need to set up some environment variables. Edit the .env file for your Vapor app and add environment variables for WEBSITE_APPLICATION_IDENTIFIER - set this to the identifier you created earlier. Then, create an environment variable for SIWA_REDIRECT_URL - set this to the redirect URL you set when creating the service in the Apple Developer Portal:

WEBSITE_APPLICATION_IDENTIFIER=dev.timc.siwa-demo.web
SIWA_REDIRECT_URL=https://70e1-89-240-205-25.eu.ngrok.io/login/siwa/callback

Finally, open the Vapor app in Xcode. Edit the scheme, and under Options enable the check box for Use custom working directory - this tells Xcode where to look for things like the .env file and Leaf templates when running. Click the folder icon and set the directory to your project directory.