Apple announced Sign in with Apple back in 2019, which feels like an eternity ago! The Apple social connection allows users to log in to your application using their Apple account.
Okta recently conducted a survey which found providing users with their preferred social login options during sign up can increase conversion rates by 20-40%.
Also, the Apple App Store Developer guidelines require Sign In With Apple (SIWA) be available in applications that only use third-party sign-in options, such as Facebook or Google.
By default, Auth0 syncs user profile attributes with each user login. Syncing user profile data ensures that changes in the connection source are automatically updated in Auth0.
This article is designed to supplement the documentation in the Marketplace, based on real world setup.
Prerequisites
This process requires:
- An Apple Developer Program account. If you are a member of the iOS Developer University Program, sign up for a free trial.
- If you are using an organisation Apple Developer program, your account will need the Account Holder or Admin role.
- Lock.js version 11.16 or later if you use the Classic Universal Login Flow or if you embed Lock.js in your application.
- A notepad/text editor. You will be keeping track of some URLs and ID’s so we will have a ‘scratch pad’ open to record these.
Considerations:
- You should have an idea of what your Application should be called when you’re in the “Sign In with Apple” screens. I.e. “Create an account for ‘Your Application Name’”. Consider what ‘Your Application Name’ will be, as this is visible to your end users.
- Apple does not allow branding changes to the Apple login page display.
Set up an Apps and Identifiers in Apple Developer
To set up an application, navigate to the Apple Developer Dashboard and select Certs, Identifiers, and Profiles then Identifiers.
Click the blue plus icon next to Identifiers.
Select “App IDs” and click Continue.
Next, select the “App” type and Continue.
Specify a description of the app. This should be adequate enough to identify that this App is used for Sign in with Apple in your Okta CIC tenant. In this example, we use “SIW Apple – Auth0 – tenant-name”. Including Staging/Prod might also be useful here too.
Also, set the Bundle ID to something also describing the app you are setting up. We will be doing 2 of these registrations, so we recommend something like “com.cic-tenant-name.apple-social” here. Using the tenant name will help when seeing what Prod/Test configuration you are using.
Enable the “Sign In with Apple” capability in the Capabilities section.
Ignore the Edit button.
Click Continue in the top right hand corner.
This will change to “Register”. Click this now.
You should now have a new Identifier setup as below:
Create a Service ID
In the Identifiers section, click the blue plus icon next to Identifiers.
Select “Service IDs’ from the list, and click Continue.
Register the Services ID with a description and identifier. Here, we use a similar naming convention as before for the Bundle ID. However, the description should contain a friendly name of your service, e.g “Company Name” or “App Name”. The Bundle ID should contain a reference to the fact this is a ‘Service ID’. So we have used “com.cic-tenant-name.apple-social-service”
This Identifier will be needed later, so open a notepad and save the Identifier as “Client ID”.
Why do we use a friendly name in the Service ID Description? On a desktop/Non iOS device, this client ID will be visible in the browser address bar when users are sent to Apple to sign in.
https://appleid.apple.com/auth/authorize?client_id=com.fastlogin.apple-social-service
The Description of the first App you created is also visible on the Apple login page.
So, it is recommended to consider this Description with your Application design team/agency/marketing organization.
Select Continue and then Register.
You will now see your newly created Service ID.
Return to Service Registration by clicking on the Service ID name.
Enable the Sign in with Apple tick box:
Ensure the App ID you created first (e.g. com.cic-tenant-name.apple-social), is selected in the “Primary App ID” field.
Next, we need to collect some details from your Auth0 by Okta tenant.
Collect Domain and Return URLs
Head over to your Auth0 tenant. In the Tenant, head to Settings > Custom Domains. You’ll need to take a note of the primary domain, and any Custom domain that you may have setup.
Save them in a note.
Next, we need to build your Return (a.k.a Callback) URLs. Do this by taking the domains you copied above, and adjusting by adding “https://” to the front, and “/login/callback” to the end.
You should have something like the following:
Head back to your Apple Developer tab.
Under Domains and Subdomains, and Return URLs, add the corresponding details from your note, ensuring that they are comma separated.
If you want to have multiple Auth0 tenants using the same “Sign In With” config, ensure that the same combination of Domains and URLs are copied in from all tenants in the same way, in one long list in each.
Click next, then if all looks good, click Done.
Next, in the “Edit your Services ID Configuration” page you are returned to, click Continue, then click Save.
This section is complete.
Create a Signing Key
In Certificates, Identifiers & Profiles, click Keys. Then the blue plus icon.
For Key Name, we recommend making this as descriptive as you can. We choose “CIC tenantname” – note, you cannot use special characters here, so you may have a tenant name with a ‘-’, you cant use this in the key name.
Tick the box next to “Sign in with Apple” then click Configure.
Next, select the App ID you created first. This should then also present the ‘Grouped App IDs’ underneath.
Click Save. You will be returned to the previous screen.
Click Continue in the top right corner.
You will then be taken to the next screen to finish setup, click Register.
Take a note of the Key ID on this page in your previous notepad, and click Download.
This will download a file in a format “AuthKey_{KeyID}.p8”. Keep this safe for later. Click Done on the “Download your Key” page to finish up.
You should see something like the below.
Next, open this file in a text editor.
You should something like the below:
Leave this file open, we’ll need it later.
Obtain your Apple “Team ID”
In your Apple Developer console, on the top right, click your name, and select View Membership.
You can either copy the Team ID from there, or in the Membership page, scroll about half way down, and you can copy it from the “Membership Details” section.
Save this to your notepad from earlier.
Update your Auth0 Configuration
Now that you have your application information, it’s time to update your Auth0 Social Connection config.
In your Auth0 dashboard, navigate to Authentication > Social, and Create Connection. Find the Apple connection and enable Apple access to Auth0.
Now, update the fields with the information below.
- Client ID: Add the identifier of the Services ID you created in earlier, this should be in your notepad. E.g. “com.cic-tenant-name.apple-social-service”
- Client Secret Signing Key: Paste the entire contents of your .p8 keyfile downloaded from Apple earlier. Paste the entire key, including the BEGIN/END PRIVATE KEY lines.
- Apple Team ID: Add your Apple Team ID saved earlier.
- Key ID: Paste the key ID of your Apple key downloaded earlier, which should be in your notepad.
Test connection
In order to test the connection, we need to head to the Applications tab, and enable it on one app. For testing, we recommend creating a dummy application, and enable it on that new app.
When you’re ready to enable it on your actual application Sign in Page using Universal Login, just toggle the Application on!
Click Try Connection. You should be redirected to an Apple ID sign in page.
Congratulations, you have just integrated Sign in with Apple for your Application!
IAMSE