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 Authentication icon in the left sidebar
Click on Providers under the Configuration section
Click on Apple from the accordion list to expand and you'll find your Redirect URL, you can click Copy to copy it to the clipboard

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 Apple Developer website, under Membership details. This is a 10-character alphanumeric string called "Team ID". Alternatively, this can be seen next to your name in the upper right when viewing your Certificates, Identifiers & Profiles.
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 Project Dashboard
In the left sidebar, click the Authentication icon (near the top)
Click on Providers under the Configuration section
Click on Apple from the accordion list to expand and turn Apple Enabled to ON
Enter your Apple Client ID and Apple Client Secret saved in the previous step
Click Save

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

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

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

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.

Edit this page on GitHub