​
Sign in with Apple on Expo React Native

​
Overview

Apple OAuth consists of six broad steps:
  1. Obtaining an App Id with “Sign In with Apple” capabilities.
  2. Obtaining a Services Id - this will serve as the client_id.
  3. Obtaining a secret key that will be used to get our client_secret.
  4. Generating the client_secret using the secret key.
  5. Add your client id and client secret keys to your Supabase Project.
  6. Add the login code to your Supabase JS Client App.
1

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

​
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.
3

​
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.
4

​
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
5

​
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.
6

​
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.
7

​
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.
8

  • 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
9

        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
10

  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.
  1. From the command line, run: ruby secret_gen.rb > client_secret.txt.
  2. Your client_secret is now stored in this client_secret.txt file.
11

​
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