Supabase Apple Login - General Setup

Overview

This guide will help 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 Login General Setup guide to setup Apple OAuth credentials

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

   • Android Setup
   • iOS Setup
   • Web Setup

   Note

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

   For iOS, the client ID is the same as your app 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 Dashboard

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:

   Note

   If you are using Apple login for iOS, the client ID is the same as your app ID. If you are using Apple login 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 app ID and the service ID.

   

8. Click on the Save button

   

   Note

   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 (native on iOS, OAuth redirect on Android/Web)
• Extracts the identity token from Apple
• Signs in to Supabase with the identity token

Complete Implementation

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

Basic Usage

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 native 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().