Login with Apple

Supabase Auth supports using Sign in with Apple on the web and in native apps for iOS, macOS, watchOS or tvOS.

Overview#

To support Sign in with Apple, you need to configure the Apple provider in the Supabase dashboard for your project.

There are three general ways to use Sign in with Apple, depending on the application you're trying to build:

Sign in on the web or in web-based apps
- Using an OAuth flow initiated by Supabase Auth using the Sign in with Apple REST API.
- Using Sign in with Apple JS directly in the browser, usually suitable for websites.
Sign in natively inside iOS, macOS, watchOS or tvOS apps using Apple's Authentication Services

In some cases you're able to use the OAuth flow within web-based native apps such as with React Native, Expo or other similar frameworks. It is best practice to use native Sign in with Apple capabilities on those platforms instead.

Before you can use Sign in with Apple, you need to obtain an Apple Developer account.

Using the OAuth flow for web#

Sign in with Apple's OAuth flow is designed for web or browser based sign in methods. It can be used on web-based apps as well as websites, though some users can benefit by using Sign in with Apple JS directly.

Behind the scenes, Supabase Auth uses the REST APIs provided by Apple.

To initiate sign in, you can use the signInWithOAuth() method from the Supabase JavaScript library:

supabase.auth.signInWithOAuth({
  provider: 'apple',
})

This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session.

Configuration #

You will require the following information:

Your Apple Developer account's Team ID, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console.
Register email sources for Sign in with Apple for Email Communication which can be found in the Services section of the Apple Developer Console.
An App ID which uniquely identifies the app you are building. You can create a new App ID from the Identifiers section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example com.example.app. Make sure you configure Sign in with Apple once you create an App ID in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as bundle IDs.)
A Services ID which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the Identifiers section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example com.example.app.web.
Configure Website URLs for the newly created Services ID. The web domain you should use is the domain your Supabase project is hosted on. This is usually <project-id>.supabase.co while the redirect URL is https://<project-id>.supabase.co/auth/v1/callback.
Create a signing Key in the Keys section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the AuthKey_XXXXXXXXXX.p8 file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar!
Finally, add the information you configured above to the Apple provider configuration in the Supabase dashboard.

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.

Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the operating system's built-in functionalities to prompt the user for consent.

When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth.

If you are building an iOS or macOS app using Flutter, you can use the signInWithApple() method to perform Apple sign in:

import 'package:supabase_flutter/supabase_flutter.dart';
final AuthResponse res = await supabase.auth.signInWithApple();
final User? user = res.user;

In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so:

await supabase.auth.signInWithIdToken({
  provider: 'apple',
  token: '<identity token received from the OS>',
})

Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:

For apps written in Swift, please consult the community maintained library.

Configuration #

Native sign in requires less configuration steps than OAuth flow. You will need to perform these steps:

Have an App ID which uniquely identifies the app you are building. You can create a new App ID from the Identifiers section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example com.example.app. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as bundle IDs.)
Register all of the App IDs that will be using your Supabase project in the Apple provider configuration in the Supabase dashboard under Authorized Client IDs.

Note that if you're building a native app only, you do not need to setup the OAuth flow.

Sign in with Apple JS is an official Apple framework for authenticating Apple users on websites. Although it can be used in web-based apps, those use cases will benefit more with the OAuth flow described above. We recommend using this method on classic websites only.

You can use the signInWithIdToken() method from the Supabase JavaScript library on the website to obtain an access and refresh token once the user has given consent using Sign in with Apple JS:

function signIn() {
  const data = await AppleID.auth.signIn()
  await supabase.auth.signInWithIdToken({
    provider: 'apple',
    token: data.id_token,
    nonce: '<nonce used in AppleID.auth.init>',
  })
}

Alternatively, you can use the AppleIDSignInOnSuccess event with the usePopup option:

// Listen for authorization success.
document.addEventListener('AppleIDSignInOnSuccess', async (event) => {
  await supabase.auth.signInWithIdToken({
    provider: 'apple',
    token: event.data.id_token,
    nonce: '<value used in appleid-signin-nonce meta tag>',
  })
})

Please make sure you request for the scope name email when initializing the library.

Configuration #

To use Sign in with Apple JS you need to configure these options:

Have an App ID which uniquely identifies the app you are building. You can create a new App ID from the Identifiers section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example com.example.app. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as bundle IDs.)
Obtain a Services ID attached to the App ID that uniquely identifies the website. Use this value as the client ID when initializing Sign in with Apple JS. You can create a new Services ID from the Identifiers section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example com.example.app.website.
Configure Website URLs for the newly created Services ID. The web domain you should use is the domain your website is hosted on. The redirect URL must also point to a page on your website that will receive the callback from Apple.
Register the Services ID you created to your project's Apple provider configuration in the Supabase dashboard under Authorized Client IDs.

Note that if you're using Sign in with Apple JS you do not need to configure the OAuth settings.

Edit this page on GitHub

Login with Apple

Overview#

Using the OAuth flow for web#

Configuration #

Using native sign in#

Configuration #

Using Sign in with Apple JS#

Configuration #