One of the new things Apple released at WWDC19 with iOS13 update was the Sign in with Apple feature which enables users to sign in to apps and websites easily by using their Apple ID.
It helps users to avoid filling out forms and remembering passwords. Instead, users just need to tap “Sign in with Apple,” and use either Face ID or Touch ID.
Furthermore, Apple has made this feature mandatory for the next version release of all apps which use a third-party or social login service – with immediate implications for a large number of developers.
This article explains how to enable Sign In With Apple in your app, and also includes examples of code which explain how to use the feature on the client-side and server-side.
Table of Contents
Troubles with conventional signup methods
We are all familiar with conventional signup methods like email with password authentication.
These usually add a somewhat complicated flow to your app, because you need users to remember their passwords, while also having the option to change their password in the app and to retrieve the account by restoring a forgotten password.
Another familiar signup method is using a magic link in a signup email, this is passwordless. Users just press the link you have sent them in their email and iOS takes over and opens the app with a link containing JWT to verify the user.
However, there can still be issues with a small percentage of devices where the iOS does not open the app and only opens the webpage. Even trying to force the app to open by pressing the link for a long time and trying to select the app does not work, meaning that there is obviously a problem with iOS.
Benefits of Sign in with apple
Having a third party signup seems like a good idea to finally sort out this cumbersome flow of signing up users into an app.
Sign in with Apple requires your Apple ID to be protected with two-factor authentication.
Apple also guarantees to never track or profile you when you sign in with Apple, and you also have the option to hide your exact email from the app you sign into.
Sign in with Apple works on all your Apple devices as well as the web and apps on Android or Windows.
You must register a Bundle ID when setting up Sign in with Apple (i.e. you can’t use it for web app login and have no associated iOS application).
Technically, you can create a dummy app to obtain a bundle ID – but that’s a bit dodgy though.
Since it’s linked to a specific Apple Developer account, losing your Developer account will disable this functionality – especially a problem if the user decided to hide email address and use proxy (see recent issues with Epic Games)
GUI options and guidelines
Apple guidelines for displaying Sign in with Apple:
The button should be no smaller than other sign-in buttons.
You should not make users scroll to see the button.
By not following these guidelines, you risk being rejected in the review process on the new version release.
Developers have the option to use a predefined system-provided button, or create a custom button.
By using the system-provided APIs to create a Sign in with Apple button, you get out-of-the-box advantages like:
guaranteed use of an Apple-approved title, font, and color
maintenance of ideal proportions as you changeits style
translation of the title into the language specified by the device
configuration of the corner radius value
system-provided alternative text label that lets VoiceOver describe the button
You can also select one of these 3 button titles:
Sign in with Apple
Sign up with Apple
Continue with Apple
And 3 options of button style:
white with outline
If you are not satisfied with the options available on the system-provided button, you can create a custom Sign in with Apple button for iOS, macOS, or the web. In this case, you still need to follow rules and guidelines defined by Apple.
In order for your app to use Sign In with Apple ID, you need to enable the Sign In with Apple ID Capability.
Apple’s developer site
On Apple’s developer site you need to enable Sign In with Apple for your app on the Certificates, Identifiers & Profiles page. You will need to update all your provisioning profiles and certificates.
Also, under Certificates, Identifiers and Profiles go to the Keys menu and add a new key – give it a name and select“Sign In With Apple”.
When using Apple’s developer site to enable this capability, you must also manually add Sign in with Apple Entitlement to your app with the correct associated value.
Additionally, if you need to communicate with users using emails, you will need to configure the Apple private email relay service and register your domain and email on the email sources page.
Without this, all the users who choose to use Apple private relay email will not get your mails. You can check for more instructions here.
You can also enable Sign In with Apple ID Capability locally from Xcode:
Open your Xcode project workspace.
In the project navigator, you need to select ‘Project’ and then select ‘Target’.
In the project editor on the right side, select Signing & Capabilities
Add Capability by clicking the ‘+’ button above and you can find Sign In with Apple Capability by searching the library.
When you configure capabilities for a target this way, Xcode manages related entitlements and adds them to a property list file with the .entitlements extension, so you don’t need to add this manually, as in the Apple developer site steps.
In your code, you need to import the AuthenticationServices framework. AuthenticationServices gives you access to ASAuthorizationAppleIDButton, and this lets you choose one of the built-in button styles and types that were discussed in the GUI options and guidelines section.
After tapping the button, create a request using the ASAuthorizationAppleIDProvider, and then use an instance of ASAuthorizationController to execute the request and listen for results using delegate functions. After successful authorization, you will get the result as ASAuthorizationAppleIDCredentialobject.
On your react component, you just need to return AppleButton in JSX of your components render function:
You can use the identityToken that you get from a client app inside ASAuthorizationAppleIDCredential and verify the user on the server side. To verify the identity token, you can follow the instructions on Apple’s Verifying a User documentation page.
I created the getAppleIdentityPublicKey function as a helper function to get a public key using the keyId we can decode from the identityToken server received from a mobile app. The result of the validateIdentityToken function will be jwtClaims which contain the users’ email address.
Based on the result of this function, you verify the users email, and complete their signup to your app.
You can also avoid doing the last step of verifying with refresh token once a day from Apple’s diagram.
You can do this by sending your own access token, which is generated on your server, to the client app after you verify authorization code – just like you would do when authenticating users’ emails and passwords.
We can assume that we will see this feature in a lot of apps now because Apple has made it mandatory for every app that uses third-party login services.
The good thing is that it is very easy to implement by using the AuthenticationServices framework on iOS, or the modules that wrap around it to expose it to some cross-platform technologies.
It is straightforward if you need just the basic UI element which is predefined by the system, but becomes a little more complicated when you need to use your custom UI buttons, but at least the option is there for everyone that needs it.
I hope this article was informative – if you have any questions, or want to work with an experienced iOS team, feel free to contact us at email@example.com