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.