Supabase Apple Login on Web

Prerequisites

This guide will help you integrate Apple Sign-In with Supabase Authentication on Web. It is assumed that you have already completed:

• the Apple Login Web setup
• the Supabase Apple Login - General Setup.

Implementation

The complete implementation is available in the example app’s supabaseAuthUtils.ts file. This guide explains the key concepts and how to use it.

Using the Authentication Helper

The authenticateWithAppleSupabase function handles the entire authentication flow:

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

On Web, Apple Sign-In uses an OAuth popup flow:

1. Initialization: The plugin is initialized with your Service ID and the current page URL as the redirect URL
2. OAuth Popup: Opens a popup window with Apple’s OAuth page
3. User Authentication: User authenticates with Apple in the popup
4. Identity Token: Apple returns an identity token (JWT) containing user information
5. Supabase Authentication: The identity token is sent to Supabase using signInWithIdToken()

The helper function automatically detects the web platform and configures everything appropriately.

Important Notes

Service ID Configuration

• Web requires your Apple Service ID (same as Android)
• The Service ID must be configured in Apple Developer Portal with the correct Return URLs
• Make sure your domain is added to the allowed domains in Apple Developer Portal

Redirect URL

• On web, the redirect URL is automatically set to window.location.href (current page URL)
• This must match one of the Return URLs configured in Apple Developer Portal
• Ensure both the URL with and without trailing slash are configured in Apple Developer Portal

Supabase Client ID

In Supabase, configure your Apple provider with:

• Client ID: Your Apple Service ID (e.g., com.example.app.service)

If you’re also using iOS, you’ll need to provide both the App ID and Service ID in Supabase’s Client ID field (comma-separated).

Update the Helper Function

When using the authenticateWithAppleSupabase helper function, you must update the clientId to match your Apple Service ID:

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

Important

Replace 'your.service.id.here' with your actual Apple Service ID (the same value you configured in Apple Developer Portal).

Troubleshooting

If authentication fails:

• Service ID mismatch: Verify your Service ID matches in both Apple Developer Portal and your code
• Return URL not configured: Ensure your current page URL (with and without trailing slash) is configured in Apple Developer Portal
• Popup blocked: Check browser settings - some browsers block popups by default
• Domain not allowed: Verify your domain is added to the allowed domains in Apple Developer Portal
• Supabase configuration: Verify your Service ID is correctly configured in Supabase Apple provider settings
• Review the example app code for reference

Keep going from Supabase Apple Login on Web

If you are using Supabase Apple Login on Web to plan authentication and account flows, connect it with Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication for the implementation detail in Two-factor authentication.