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.

Steps

Access your Apple Developer account

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

Apple Developer Portal.

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

require "jwt"

key_file = "Path to the private key"
team_id = "Your Team ID"
client_id = "The Service ID of the service you created"
key_id = "The Key ID of the private key"

validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.

private_key = OpenSSL::PKey::EC.new IO.read key_file

token = JWT.encode(
    {
        iss: team_id,
        iat: Time.now.to_i,
        exp: Time.now.to_i + 86400 * validity_period,
        aud: "https://appleid.apple.com",
        sub: client_id
    },
    private_key,
    "ES256",
    header_fields=
    {
        kid: key_id
    }
)
puts token

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.

From the command line, run: ruby secret_gen.rb > client_secret.txt.
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.

The JavaScript client code is documented in the Supabase OAuth Reference.

const { user, session, error } = await supabase.auth.signIn({
  provider: 'apple',
})

Add a function which you can call from a button, link, or UI element.

async function signInWithApple() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'apple',
  })
}

To log out:

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

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.

Overview​

Steps​

Access your Apple Developer account​

Obtain an App ID​

Obtain a Services ID​

Find your callback URL​

Configure your Services ID​

Download your secret key​

Generate a client_secret​

Add your OAuth credentials to Supabase​

Add login code to your client app​

Resources​