Sign in with Apple

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:

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

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.

For a PKCE flow, for example in Server-Side Auth, you need an extra step to handle the code exchange. When calling signInWithOAuth, provide a redirectTo URL which points to a callback route. This redirect URL should be added to your redirect allow list.

1
await supabase.auth.signInWithOAuth({
2
  provider,
3
  options: {
4
    redirectTo: `http://example.com/auth/callback`,
5
  },
6
})

1
import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
2
import type { Provider } from '@supabase/supabase-js'
3
4
// A route handler that receives the incoming Request
5
async function handler(request: Request) {
6
  const headers = new Headers()
7
  const provider = 'provider' as Provider
8
9
  const supabase = createServerClient('https://your-project-id.supabase.co', 'sb_publishable_...', {
10
    cookies: {
11
      getAll() {
12
        return parseCookieHeader(request.headers.get('Cookie') ?? '') as {
13
          name: string
14
          value: string
15
        }[]
16
      },
17
      setAll(cookiesToSet, cacheHeaders) {
18
        cookiesToSet.forEach(({ name, value, options }) =>
19
          headers.append('Set-Cookie', serializeCookieHeader(name, value, options))
20
        )
21
        Object.entries(cacheHeaders).forEach(([key, value]) => headers.set(key, value))
22
      },
23
    },
24
  })
25
26
  const { data, error } = await supabase.auth.signInWithOAuth({
27
    provider,
28
    options: {
29
      redirectTo: 'http://example.com/auth/callback',
30
    },
31
  })
32
33
  if (error) {
34
    throw error
35
  }
36
37
  // Redirect with `headers` so the browser stores the code verifier cookie.
38
  // Frameworks usually wrap this, for example `redirect(data.url, { headers })` in Remix.
39
  headers.set('Location', data.url)
40
  return new Response(null, { status: 303, headers })
41
}

At the callback endpoint, handle the code exchange to save the user session.

1
import { NextResponse } from 'next/server'
2
3
// The client you created from the Server-Side Auth instructions
4
import { createClient } from '@/utils/supabase/server'
5
6
export async function GET(request: Request) {
7
  const { searchParams, origin } = new URL(request.url)
8
  const code = searchParams.get('code')
9
  // if "next" is in param, use it as the redirect URL
10
  let next = searchParams.get('next') ?? '/'
11
  if (!next.startsWith('/')) {
12
    // if "next" is not a relative URL, use the default
13
    next = '/'
14
  }
15
16
  if (code) {
17
    const supabase = await createClient()
18
    const { error } = await supabase.auth.exchangeCodeForSession(code)
19
    if (!error) {
20
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
21
      const isLocalEnv = process.env.NODE_ENV === 'development'
22
      if (isLocalEnv) {
23
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
24
        return NextResponse.redirect(`${origin}${next}`)
25
      } else if (forwardedHost) {
26
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
27
      } else {
28
        return NextResponse.redirect(`${origin}${next}`)
29
      }
30
    }
31
  }
32
33
  // return the user to an error page with instructions
34
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
35
}

1
import { redirect } from '@sveltejs/kit'
2
3
export const GET = async (event) => {
4
  const {
5
    url,
6
    locals: { supabase },
7
  } = event
8
  const code = url.searchParams.get('code')
9
  const next = url.searchParams.get('next') ?? '/'
10
11
  if (code) {
12
    const { error } = await supabase.auth.exchangeCodeForSession(code)
13
    if (!error) {
14
      redirect(303, `/${next.slice(1)}`)
15
    }
16
  }
17
18
  // return the user to an error page with instructions
19
  redirect(303, '/auth/auth-code-error')
20
}

1
import { createServerClient, parseCookieHeader } from '@supabase/ssr'
2
import { type APIRoute } from 'astro'
3
4
export const GET: APIRoute = async ({ request, cookies, redirect }) => {
5
  const requestUrl = new URL(request.url)
6
  const code = requestUrl.searchParams.get('code')
7
  const next = requestUrl.searchParams.get('next') || '/'
8
9
  if (code) {
10
    const supabase = createServerClient(
11
      import.meta.env.PUBLIC_SUPABASE_URL,
12
      import.meta.env.PUBLIC_SUPABASE_PUBLISHABLE_KEY,
13
      {
14
        cookies: {
15
          getAll() {
16
            return parseCookieHeader(Astro.request.headers.get('Cookie') ?? '')
17
          },
18
          setAll(cookiesToSet, _headers) {
19
            cookiesToSet.forEach(({ name, value, options }) =>
20
              Astro.cookies.set(name, value, options)
21
            )
22
          },
23
        },
24
      }
25
    )
26
27
    const { error } = await supabase.auth.exchangeCodeForSession(code)
28
29
    if (!error) {
30
      return redirect(next)
31
    }
32
  }
33
34
  // return the user to an error page with instructions
35
  return redirect('/auth/auth-code-error')
36
}

1
import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
2
import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
3
4
export async function loader({ request }: LoaderFunctionArgs) {
5
  const requestUrl = new URL(request.url)
6
  const code = requestUrl.searchParams.get('code')
7
  const next = requestUrl.searchParams.get('next') || '/'
8
  const responseHeaders = new Headers()
9
10
  if (code) {
11
    const supabase = createServerClient(
12
      process.env.SUPABASE_URL!,
13
      process.env.SUPABASE_PUBLISHABLE_KEY!,
14
      {
15
        cookies: {
16
          getAll() {
17
            return parseCookieHeader(request.headers.get('Cookie') ?? '')
18
          },
19
          setAll(cookiesToSet, cacheHeaders) {
20
            cookiesToSet.forEach(({ name, value, options }) =>
21
              responseHeaders.append('Set-Cookie', serializeCookieHeader(name, value, options))
22
            )
23
            Object.entries(cacheHeaders).forEach(([key, value]) => responseHeaders.set(key, value))
24
          },
25
        },
26
      }
27
    )
28
29
    const { error } = await supabase.auth.exchangeCodeForSession(code)
30
31
    if (!error) {
32
      return redirect(next, { headers: responseHeaders })
33
    }
34
  }
35
36
  // return the user to an error page with instructions
37
  return redirect('/auth/auth-code-error', { headers: responseHeaders })
38
}

1
...
2
app.get("/auth/callback", async function (req, res) {
3
  const code = req.query.code
4
  const next = req.query.next ?? "/"
5
6
  if (code) {
7
    const supabase = createServerClient(
8
      process.env.SUPABASE_URL,
9
      process.env.SUPABASE_PUBLISHABLE_KEY, {
10
    cookies: {
11
      getAll() {
12
        return parseCookieHeader(req.headers.cookie ?? '')
13
      },
14
      setAll(cookiesToSet, headers) {
15
        cookiesToSet.forEach(({ name, value, options }) =>
16
          res.appendHeader('Set-Cookie', serializeCookieHeader(name, value, options))
17
        )
18
        Object.entries(headers).forEach(([key, value]) =>
19
          res.setHeader(key, value)
20
        )
21
      },
22
    },
23
  })
24
    await supabase.auth.exchangeCodeForSession(code)
25
  }
26
27
  res.redirect(303, `/${next.slice(1)}`)
28
})

Configuration

You will require the following information:

1. 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 accessible in the upper right-side menu on the Apple Developer Console.
2. Register email sources for Sign in with Apple for Email Communication which can be found in the Services section of the Apple Developer Console. This enables Apple to send relay emails through your domain when users choose to hide their email addresses.
3. 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.)
4. 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.
5. 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.
6. 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 lose access to it, or make it public accidentally, revoke it from the Apple Developer Console and create a new one immediately.
7. Finally, add the information you configured above to the Apple provider configuration in the Supabase dashboard. If your project also uses native Sign in with Apple (for example on iOS, Expo, or Flutter), list this Services ID as the first entry in the Client IDs field. Supabase uses the first client ID in the list for the web signInWithOAuth flow, while the native signInWithIdToken flow accepts any client ID in the list as a valid token audience, regardless of order. If a native App ID comes before the Services ID, native sign-in keeps working but web sign-in is rejected by Apple.

You can also configure the Apple auth provider using the Management API:

1
# Get your access token from https://supabase.com/dashboard/account/tokens
2
export SUPABASE_ACCESS_TOKEN="your-access-token"
3
export PROJECT_REF="your-project-ref"
4
5
# Configure Apple auth provider
6
curl -X PATCH "https://api.supabase.com/v1/projects/$PROJECT_REF/config/auth" \
7
  -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
8
  -H "Content-Type: application/json" \
9
  -d '{
10
    "external_apple_enabled": true,
11
    "external_apple_client_id": "your-services-id",
12
    "external_apple_secret": "your-generated-secret-key"
13
  }'

Using sign in with Apple JS

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:

1
async function signIn() {
2
  try {
3
    // Generate a nonce for security
4
    const nonce = crypto.randomUUID() // or use your preferred nonce generation method
5
6
    const data = await AppleID.auth.signIn()
7
8
    const { data: authData, error } = await supabase.auth.signInWithIdToken({
9
      provider: 'apple',
10
      token: data.id_token,
11
      nonce: nonce,
12
    })
13
14
    if (error) {
15
      throw error
16
    }
17
18
    // Apple only provides the user's name on the first sign-in
19
    // The user object contains name information from Apple's response
20
    if (data.user && data.user.name) {
21
      const fullName = [
22
        data.user.name.firstName,
23
        data.user.name.middleName,
24
        data.user.name.lastName
25
      ].filter(Boolean).join(' ')
26
27
      // Save the name to user metadata for future use
28
      await supabase.auth.updateUser({
29
        data: {
30
          full_name: fullName,
31
          given_name: data.user.name.firstName,
32
          family_name: data.user.name.lastName,
33
        }
34
      })
35
    }
36
  } catch (error) {
37
    console.error('Apple sign in failed:', error)
38
    // Handle sign-in errors appropriately
39
  }
40
}

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

1
// Generate and store nonce for verification
2
const nonce = crypto.randomUUID()
3
4
// Initialize Apple ID with nonce
5
AppleID.auth.init({
6
  clientId: 'your-services-id',
7
  scope: 'name email',
8
  redirectURI: 'https://your-domain.com/auth/callback',
9
  usePopup: true,
10
  nonce: nonce,
11
})
12
13
// Listen for authorization success
14
document.addEventListener('AppleIDSignInOnSuccess', async (event) => {
15
  try {
16
    const { data: authData, error } = await supabase.auth.signInWithIdToken({
17
      provider: 'apple',
18
      token: event.detail.authorization.id_token,
19
      nonce: nonce,
20
    })
21
22
    if (error) {
23
      throw error
24
    }
25
26
    // Apple only provides the user's name on the first sign-in
27
    if (event.detail.user && event.detail.user.name) {
28
      const fullName = [
29
        event.detail.user.name.firstName,
30
        event.detail.user.name.middleName,
31
        event.detail.user.name.lastName
32
      ].filter(Boolean).join(' ')
33
34
      // Save the name to user metadata for future use
35
      await supabase.auth.updateUser({
36
        data: {
37
          full_name: fullName,
38
          given_name: event.detail.user.name.firstName,
39
          family_name: event.detail.user.name.lastName,
40
        }
41
      })
42
    }
43
  } catch (error) {
44
    console.error('Apple sign in failed:', error)
45
  }
46
})

Make sure you request the scope name email when initializing the library, as shown in the example above.

Configuration

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

1. 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.)
2. 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.
3. 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.
4. Register the Services ID you created to your project's Apple provider configuration in the Supabase dashboard under Client IDs.

Using native sign in with Apple in Expo

When working with Expo, you can use the Expo AppleAuthentication library to obtain an ID token that you can pass to supabase-js signInWithIdToken method.

Follow the Expo docs for installation and configuration instructions. See the supabase-js reference for instructions on initializing the supabase-js client in React Native.

1
import { Platform } from 'react-native'
2
import * as AppleAuthentication from 'expo-apple-authentication'
3
import { supabase } from 'app/utils/supabase'
4
5
export function Auth() {
6
  if (Platform.OS === 'ios')
7
    return (
8
      <AppleAuthentication.AppleAuthenticationButton
9
        buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
10
        buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
11
        cornerRadius={5}
12
        style={{ width: 200, height: 64 }}
13
        onPress={async () => {
14
          try {
15
            const credential = await AppleAuthentication.signInAsync({
16
              requestedScopes: [
17
                AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
18
                AppleAuthentication.AppleAuthenticationScope.EMAIL,
19
              ],
20
            })
21
            // Sign in via Supabase Auth.
22
            if (credential.identityToken) {
23
              const {
24
                error,
25
                data: { user },
26
              } = await supabase.auth.signInWithIdToken({
27
                provider: 'apple',
28
                token: credential.identityToken,
29
              })
30
              console.log(JSON.stringify({ error, user }, null, 2))
31
              if (!error) {
32
                // Apple only provides the user's full name on the first sign-in
33
                // Save it to user metadata if available
34
                if (credential.fullName) {
35
                  const nameParts = []
36
                  if (credential.fullName.givenName) nameParts.push(credential.fullName.givenName)
37
                  if (credential.fullName.middleName) nameParts.push(credential.fullName.middleName)
38
                  if (credential.fullName.familyName) nameParts.push(credential.fullName.familyName)
39
40
                  const fullName = nameParts.join(' ')
41
42
                  await supabase.auth.updateUser({
43
                    data: {
44
                      full_name: fullName,
45
                      given_name: credential.fullName.givenName,
46
                      family_name: credential.fullName.familyName,
47
                    }
48
                  })
49
                }
50
                // User is signed in.
51
              }
52
            } else {
53
              throw new Error('No identityToken.')
54
            }
55
          } catch (e) {
56
            if (e.code === 'ERR_REQUEST_CANCELED') {
57
              // handle that the user canceled the sign-in flow
58
            } else {
59
              // handle other errors
60
            }
61
          }
62
        }}
63
      />
64
    )
65
  return (
66
    <>
67
      {/*
68
        On Android, Sign in with Apple is not natively supported.
69
        You have two options:
70
        1. Use the OAuth flow via signInWithOAuth (see Flutter Android example below)
71
        2. Use a web-based solution like react-native-app-auth
72
73
        For most cases, we recommend using the OAuth flow:
74
      */}
75
      <Button
76
        onPress={async () => {
77
          const { error } = await supabase.auth.signInWithOAuth({
78
            provider: 'apple',
79
            options: {
80
              redirectTo: 'your-app-scheme://auth/callback',
81
              skipBrowserRedirect: false,
82
            },
83
          })
84
          if (error) {
85
            console.error('Sign in error:', error)
86
          }
87
        }}
88
      >
89
        Sign in with Apple
90
      </Button>
91
    </>
92
  )
93
}

When working with bare React Native, you can use invertase/react-native-apple-authentication to obtain the ID token on iOS. For Android, use the OAuth flow as shown above.

Configuration

1. 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.)
2. Register all of the App IDs that will be using your Supabase project in the Apple provider configuration in the Supabase dashboard under Client IDs.

Sign in with Apple on iOS and macOS

You can perform Sign in with Apple using the sign_in_with_apple package on Flutter apps running on iOS or macOS. Follow the instructions in the package README to set up native Sign in with Apple on iOS and macOS.

Once the setup is complete on the Flutter app, add the bundle ID of your app to your Supabase dashboard in Authentication -> Providers -> Apple in order to register your app with Supabase.

1
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
2
import 'package:supabase_flutter/supabase_flutter.dart';
3
import 'package:crypto/crypto.dart';
4
5
/// Performs Apple sign in on iOS or macOS
6
Future<AuthResponse> signInWithApple() async {
7
  final rawNonce = supabase.auth.generateRawNonce();
8
  final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
9
10
  final credential = await SignInWithApple.getAppleIDCredential(
11
    scopes: [
12
      AppleIDAuthorizationScopes.email,
13
      AppleIDAuthorizationScopes.fullName,
14
    ],
15
    nonce: hashedNonce,
16
  );
17
18
  final idToken = credential.identityToken;
19
  if (idToken == null) {
20
    throw const AuthException(
21
        'Could not find ID Token from generated credential.');
22
  }
23
24
  final authResponse = await supabase.auth.signInWithIdToken(
25
    provider: OAuthProvider.apple,
26
    idToken: idToken,
27
    nonce: rawNonce,
28
  );
29
30
  // Apple only provides the user's full name on the first sign-in
31
  // Save it to user metadata if available
32
  if (credential.givenName != null || credential.familyName != null) {
33
    final nameParts = <String>[];
34
    if (credential.givenName != null) nameParts.add(credential.givenName!);
35
    if (credential.familyName != null) nameParts.add(credential.familyName!);
36
37
    final fullName = nameParts.join(' ');
38
39
    await supabase.auth.updateUser(
40
      UserAttributes(
41
        data: {
42
          'full_name': fullName,
43
          'given_name': credential.givenName,
44
          'family_name': credential.familyName,
45
        },
46
      ),
47
    );
48
  }
49
50
  return authResponse;
51
}

Configuration

1. 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.)
2. Register all of the App IDs that will be using your Supabase project in the Apple provider configuration in the Supabase dashboard under Client IDs.

Sign in with Apple on Android, Web, Windows and Linux

For platforms that don't support native Sign in with Apple, you can use the signInWithOAuth() method to perform Sign in with Apple.

This method of signing in is web based, and will open a browser window to perform the sign in. For non-web platforms, the user is brought back to the app via deep linking.

1
await supabase.auth.signInWithOAuth(
2
  OAuthProvider.apple,
3
  redirectTo: kIsWeb ? null : 'my.scheme://my-host', // Optionally set the redirect link to bring back the user via deeplink.
4
  authScreenLaunchMode:
5
      kIsWeb ? LaunchMode.platformDefault : LaunchMode.externalApplication, // Launch the auth screen in a new webview on mobile.
6
);

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 Flutter application with an access and refresh token representing the user's session.

Configuration

You will require the following information:

1. 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 accessible in the upper right-side menu on the Apple Developer Console.
2. Register email sources for Sign in with Apple for Email Communication which can be found in the Services section of the Apple Developer Console.
3. 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.)
4. 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.
5. 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.
6. 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 lose access to it, or make it public accidentally, 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 reminder in your calendar!
7. Finally, add the information you configured above to the Apple provider configuration in the Supabase dashboard. If your app also uses native Sign in with Apple (on iOS or macOS), list this Services ID as the first entry in the Client IDs field. Supabase uses the first client ID in the list for the web signInWithOAuth flow, while the native signInWithIdToken flow accepts any client ID in the list as a valid token audience, regardless of order. If a native App ID comes before the Services ID, native sign-in keeps working but web sign-in is rejected by Apple.

Using native sign in with Apple in Swift

For apps written in Swift, follow the Apple Developer docs for obtaining the ID token and then pass it to the Swift client's signInWithIdToken method.

1
import SwiftUI
2
import AuthenticationServices
3
import Supabase
4
5
struct SignInView: View {
6
    let client = SupabaseClient(supabaseURL: URL(string: "https://your-project-id.supabase.co")!, supabaseKey: "sb_publishable_...")
7
8
    var body: some View {
9
      SignInWithAppleButton { request in
10
        request.requestedScopes = [.email, .fullName]
11
      } onCompletion: { result in
12
        Task {
13
          do {
14
            guard let credential = try result.get().credential as? ASAuthorizationAppleIDCredential
15
            else {
16
              return
17
            }
18
19
            guard let idToken = credential.identityToken
20
              .flatMap({ String(data: $0, encoding: .utf8) })
21
            else {
22
              return
23
            }
24
25
            try await client.auth.signInWithIdToken(
26
              credentials: .init(
27
                provider: .apple,
28
                idToken: idToken
29
              )
30
            )
31
32
            // Apple only provides the user's full name on the first sign-in
33
            // Save it to user metadata if available
34
            if let fullName = credential.fullName {
35
              var nameParts: [String] = []
36
              if let givenName = fullName.givenName {
37
                nameParts.append(givenName)
38
              }
39
              if let middleName = fullName.middleName {
40
                nameParts.append(middleName)
41
              }
42
              if let familyName = fullName.familyName {
43
                nameParts.append(familyName)
44
              }
45
46
              let fullNameString = nameParts.joined(separator: " ")
47
48
              try await client.auth.update(
49
                user: UserAttributes(
50
                  data: [
51
                    "full_name": .string(fullNameString),
52
                    "given_name": .string(fullName.givenName ?? ""),
53
                    "family_name": .string(fullName.familyName ?? "")
54
                  ]
55
                )
56
              )
57
            }
58
59
            // User successfully signed in
60
            print("Sign in with Apple successful!")
61
          } catch {
62
            // Handle sign-in errors
63
            print("Sign in with Apple failed: \(error.localizedDescription)")
64
            // Show error alert to user
65
          }
66
        }
67
      }
68
      .fixedSize()
69
    }
70
}

Configuration

1. 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.)
2. Register all of the App IDs that will be using your Supabase project in the Apple provider configuration in the Supabase dashboard under Client IDs.

Using native sign in with Apple in Kotlin

When using Compose Multiplatform, you can use the compose-auth plugin. On iOS it uses Native Apple Login automatically and on other platforms it uses gotrue.signInWith(Apple).

Initialize the Supabase Client

1
val supabaseClient = createSupabaseClient(
2
	supabaseUrl = "SUPABASE_URL",
3
	supabaseKey = "SUPABASE_KEY"
4
) {
5
	install(GoTrue)
6
	install(ComposeAuth) {
7
		appleNativeLogin()
8
	}
9
}

Use the Compose Auth plugin in your Auth Screen

1
val authState = supabaseClient.composeAuth.rememberSignInWithApple(
2
	onResult = { result ->
3
		when(result) {
4
			NativeSignInResult.ClosedByUser -> {
5
				// User cancelled the sign-in flow
6
				println("User cancelled Apple sign in")
7
			}
8
			is NativeSignInResult.Error -> {
9
				// An error occurred during sign in
10
				println("Apple sign in error: ${result.message}")
11
				// Show error to user
12
			}
13
			is NativeSignInResult.NetworkError -> {
14
				// Network error occurred
15
				println("Network error during Apple sign in: ${result.error}")
16
				// Show network error to user
17
			}
18
			is NativeSignInResult.Success -> {
19
				// User successfully signed in
20
				println("Apple sign in successful!")
21
22
				// Apple only provides the user's full name on the first sign-in (iOS only)
23
				// Save it to user metadata if available
24
				result.data?.let { appleData ->
25
					appleData.fullName?.let { fullName ->
26
						val nameParts = mutableListOf<String>()
27
						fullName.givenName?.let { nameParts.add(it) }
28
						fullName.middleName?.let { nameParts.add(it) }
29
						fullName.familyName?.let { nameParts.add(it) }
30
31
						val fullNameString = nameParts.joinToString(" ")
32
33
						scope.launch {
34
							try {
35
								supabaseClient.auth.updateUser {
36
									data = buildJsonObject {
37
										put("full_name", fullNameString)
38
										fullName.givenName?.let { put("given_name", it) }
39
										fullName.familyName?.let { put("family_name", it) }
40
									}
41
								}
42
							} catch (e: Exception) {
43
								println("Failed to update user metadata: ${e.message}")
44
							}
45
						}
46
					}
47
				}
48
49
				// Navigate to home screen or update UI
50
			}
51
		}
52
	}
53
)
54
55
Button(onClick = { authState.startFlow() }) {
56
	Text("Sign in with Apple")
57
}

Configuration

For iOS (native Sign in with Apple):

1. 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.
2. Register all of the App IDs that will be using your Supabase project in the Apple provider configuration in the Supabase dashboard under Client IDs.

For other platforms (Android, Desktop, Web):

On non-iOS platforms, ComposeAuth automatically falls back to the OAuth flow. You need to configure the OAuth settings as described in the Web OAuth Configuration section above, including:

• Team ID
• Email sources registration
• Services ID
• Signing Key and secret generation

Dependencies:

Add the following to your build.gradle.kts:

1
dependencies {
2
    implementation("io.github.jan-tennert.supabase:gotrue-kt:VERSION")
3
    implementation("io.github.jan-tennert.supabase:compose-auth:VERSION")
4
}