Supabase Apple Connexion - General Configuration

Aperçu

This Guide will Aide you integrate Apple Sign-In with Supabase Authentication. Apple Sign-In provides a secure, privacy-focused authentication method that works across iOS, Android, and Web platforms.

Prerequisites

Before starting, ensure you have:

1. Created a Supabase project

2. Read the Apple Connexion General Configuration Guide to Configuration Apple OAuth credentials

3. Followed the respective platform-specific guides to Configuration Apple OAuth credentials for your target platform:

   • Android Configuration
   • iOS Configuration
   • Web Configuration

   Before starting the Supabase Tutoriel, you need to generate the client IDs for the platforms you plan to use.

   For iOS, the client ID is the same as your Application ID. For Android and Web, the client ID is the same as your service ID. You will use them in step 7 of this Guide.

Enabling Apple OAuth provider in Supabase

1. Go to your Supabase Tableau de bord

2. Click on your project

   

3. Do go to the Authentication menu

   

4. Click on the Providers tab

   

5. Find the Apple provider

   

6. Enable the Apple provider

   

7. Fill in the client ID Configuration:

   If you are using Apple Connexion for iOS, the client ID is the same as your Application ID. If you are using Apple Connexion for Android or Web, the client ID is the same as your service ID. If you are using both, you need to provide both the Application ID and the service ID.

   

8. Click on the Save button

   

   You DO NOT HAVE TO setup Secret key (for OAuth). We will do a custom backend implementation to handle the Apple login.

Voilà, you have now enabled Apple Sign-In with Supabase Authentication 🎉

Using the Authentication Helper

The complete implementation includes a helper function authenticateWithAppleSupabase() that handles the entire Apple Sign-In flow with Supabase. This function:

• Initializes Apple Sign-In with platform-specific Configuration
• Handles the authentication flow (Natif on iOS, OAuth redirect on Android/Web)
• Extracts the identity token from Apple
• Signs in to Supabase with the identity token

Terminé Implementation

The complete implementation is available in the example app’s supabaseAuthUtils.ts file.

Basic Utilisation

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

How It Works

The helper function automatically handles platform-specific differences:

• iOS: Uses Natif Apple Sign-In (no redirect URL needed, uses Bundle ID automatically)
• Android: Uses OAuth redirect flow with backend edge function (requires Service ID)
• Web: Uses OAuth popup flow (requires Service ID and current page URL as redirect)

The function returns an identity token from Apple, which is then used to authenticate with Supabase using supabase.auth.signInWithIdToken().