Login with Apple

To enable Apple Auth for your project, you need to set up an Apple OAuth application and add the application credentials to your Supabase Dashboard.

Overview#

Apple OAuth consists of six broad steps:

• Obtaining an App Id with “Sign In with Apple” capabilities.
• Obtaining a Services Id - this will serve as the client_id.
• Obtaining a secret key that will be used to get our client_secret.
• Generating the client_secret using the secret key.
• Add your client id and client secret keys to your Supabase Project.
• Add the login code to your Supabase JS Client App.

Access your Apple Developer account#

• Go to developer.apple.com.
• Click on Account at the top right to log in.

Obtain an App ID#

• Go to Certificates, Identifiers & Profiles.
• Click on Identifiers at the left.
• Click on the + sign in the upper left next to Identifiers.
• Select App IDs and click Continue.
• Select type App and click Continue.
• Fill out your app information:
  • App description.
  • Bundle ID (Apple recommends reverse-domain name style, so if your domain is acme.com and your app is called roadrunner, use: "com.acme.roadrunner").
  • Scroll down and check Sign In With Apple.
  • Click Continue at the top right.
  • Click Register at the top right.

Obtain a Services ID#

This will serve as the client_id when you make API calls to authenticate the user.

• Go to Certificates, Identifiers & Profiles.
• Click on Identifiers at the left.
• Click on the + sign in the upper left next to Identifiers.
• Select Services IDs and click Continue.
• Fill out your information:
  • App description.
  • Bundle ID (you can't use the same Bundle ID from the previous step, but you can just add something to the beginning, such as "app." to make it app.com.acme.roadrunner").
  • SAVE THIS ID -- this ID will become your client_id later.
  • Click Continue at the top right.
  • Click Register at the top right.

Find your callback URL#

The next step requires a callback URL, which looks like this:

https://<project-ref>.supabase.co/auth/v1/callback

• Go to your Supabase Project Dashboard.
• Click on the Settings icon at the bottom of the left sidebar.
• Click on API in the list.
• Under Config / URL you'll find your API URL, you can click Copy to copy it to the clipboard.
• Now just add /auth/v1/callback to the end of that to get your full OAuth Redirect URI.

Configure your Services ID#

• Under Identifiers, click on your newly-created Services ID.
• Check the box next to Sign In With Apple to enable it.
• Click Configure to the right.
• Make sure your newly created Bundle ID is selected under Primary App ID
• Add your domain to the Domains and Subdomains box (do not add https://, just add the domain).
• In the Return URLs box, type the callback URL of your app which you found in the previous step and click Next at the bottom right.
• Click Done at the bottom.
• Click Continue at the top right.
• Click Save at the top right.

Download your secret key#

Now you'll need to download a secret key file from Apple that will be used to generate your client_secret.

• Go to Certificates, Identifiers & Profiles.
• Click on Keys at the left.
• Click on the + sign in the upper left next to Keys.
• Enter a Key Name.
• Check Sign In with Apple.
• Click Configure to the right.
• Select your newly-created Services ID from the dropdown selector.
• Click Save at the top right.
• Click Continue at the top right.
• Click Register at the top right.
• Click Download at the top right.
• Save the downloaded file -- this contains your "secret key" that will be used to generate your client_secret.
• Click Done at the top right.

Generate a client_secret#

The secret key you downloaded is used to create the client_secret string you'll need to authenticate your users.

According to the Apple Docs it needs to be a JWT token encrypted using the Elliptic Curve Digital Signature Algorithm (ECDSA) with the P-256 curve and the SHA-256 hash algorithm.

At this time, the easiest way to generate this JWT token is with Ruby. If you don't have Ruby installed, you can Download Ruby Here.

• Install Ruby (or check to make sure it's installed on your system).
• Install ruby-jwt.
• From the command line, run: sudo gem install jwt.

Create the script below using a text editor: secret_gen.rb

1require "jwt"
2
3key_file = "Path to the private key"
4team_id = "Your Team ID"
5client_id = "The Service ID of the service you created"
6key_id = "The Key ID of the private key"
7
8validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.
9
10private_key = OpenSSL::PKey::EC.new IO.read key_file
11
12token = JWT.encode(
13    {
14        iss: team_id,
15        iat: Time.now.to_i,
16        exp: Time.now.to_i + 86400 * validity_period,
17        aud: "https://appleid.apple.com",
18        sub: client_id
19    },
20    private_key,
21    "ES256",
22    header_fields=
23    {
24        kid: key_id
25    }
26)
27puts token

1. Edit the secret_gen.rb file:

• key_file = "Path to the private key you downloaded from Apple". It should look like this: AuthKey_XXXXXXXXXX.p8.
• team_id = "Your Team ID". This is found at the top right of the Apple Developer site (next to your name).
• client_id = "The Service ID of the service you created". This is the Services ID you created in the above step Obtain a Services ID. If you've lost this ID, you can find it in the Apple Developer Site:
  • Go to Certificates, Identifiers & Profiles.
  • Click Identifiers at the left.
  • At the top right drop-down, select Services IDs.
  • Find your Identifier in the list (i.e. app.com.acme.roadrunner).
• key_id = "The Key ID of the private key". This can be found in the name of your downloaded secret file (For a file named AuthKey_XXXXXXXXXX.p8 your key_id is XXXXXXXXXX). If you've lost this ID, you can find it in the Apple Developer Site:
  • Go to Certificates, Identifiers & Profiles.
  • Click Keys at the left.
  • Click on your newly-created key in the list.
  • Look under Key ID to find your key_id.

2. From the command line, run: ruby secret_gen.rb > client_secret.txt.
3. Your client_secret is now stored in this client_secret.txt file.

Add your OAuth credentials to Supabase#

• Go to your Supabase Dashboard.
• In the left sidebar, click the Authentication icon (near the top).
• Click Settings from the list to go to the Authentication Settings page.
• Enter the final (hosted) URL of your app under Site URL (this is important).
• Under External OAuth Providers turn Apple Enabled to ON.
• Enter your client_id and client_secret saved in the previous steps.
• Click Save.

Add login code to your client app#

When your user signs in, call signInWithOAuth() with apple as the provider:

1async function signInWithApple() {
2  const { data, error } = await supabase.auth.signInWithOAuth({
3    provider: 'apple',
4  })
5}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

1async function signout() {
2  const { error } = await supabase.auth.signOut()
3}

Resources#

• Apple Developer Account.
• Ruby Docs.
• ruby-jwt library.
• Thanks to Janak Amarasena who did all the heavy lifting in How to configure Sign In with Apple.