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#

You need to configure a client secret when using Sign in with Apple for Web. This is a specially crafted JWT signed with a secret key downloaded from Apple's Developer Center.

note

Use this tool to generate a new Apple client secret. No keys leave your browser!

Account IDrequired

Found in the upper-right corner of Apple Developer Center.

Service IDrequired

Found under Certificates, Identifiers & Profiles in Apple Developer Center.

Key ID(optional)

If the file you select does not preserve the original name from Apple Developer Center, please enter the key ID.

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.
Thanks to Janak Amarasena who did all the heavy lifting in How to configure Sign In with Apple.

Edit this page on GitHub