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 theclient_id
. - Obtaining a
secret key
that will be used to get ourclient_secret
. - Generating the
client_secret
using thesecret key
. - Add your
client id
andclient 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.
Obtain an App ID
- Go to
Certificates, Identifiers & Profiles
. - Click on
Identifiers
at the left. - Click on the
+
sign in the upper left next toIdentifiers
. - Select
App IDs
and clickContinue
. - Select type
App
and clickContinue
. - 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 toIdentifiers
. - Select
Services IDs
and clickContinue
. - 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 fullOAuth 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 addhttps://
, just add the domain). - In the
Return URLs
box, type the callback URL of your app which you found in the previous step and clickNext
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 toKeys
. - 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 theServices ID
you created in the above stepObtain 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).
- Go to
key_id
= "The Key ID of the private key". This can be found in the name of your downloaded secret file (For a file namedAuthKey_XXXXXXXXXX.p8
your key_id isXXXXXXXXXX
). 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.
- Go to
- From the command line, run:
ruby secret_gen.rb > client_secret.txt
. - Your
client_secret
is now stored in thisclient_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 theAuthentication Settings
page. - Enter the final (hosted) URL of your app under
Site URL
(this is important). - Under
External OAuth Providers
turnApple Enabled
to ON. - Enter your
client_id
andclient_secret
saved in the previous steps. - Click
Save
.
Add login code to your client app
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.