Supabase Apple Login on Web

Prerequisites

Esta guía Va a help you integrate Apple Sign-In with Supabase Authentication on Web. It is assumed that you have already Completado:

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

Implementation

El Completo implementation is available in El example app’s supabaseAuthUtils.ts file. Esta guía explains El key concepts and Cómo Usar it.

Using El Authentication Helper

El authenticateWithAppleSupabase Función handles El 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: El Plugin is initialized with your Service ID and El current page URL as El redirect URL
2. OAuth Popup: Opens a popup window with Apple’s OAuth page
3. User Authentication: User authenticates with Apple in El popup
4. Identity Token: Apple returns an identity token (JWT) containing user Información
5. Supabase Authentication: El identity token is sent A Supabase using signInWithIdToken()

El helper Función automatically detects El web platform and configures everything appropriately.

Importante Notas

Service ID Configuración

• Web requires your Apple Service ID (same as Android)
• El Service ID Debe be configured in Apple Developer Portal with El correct Return URLs
• Make sure your domain is Agregado A El allowed domains in Apple Developer Portal

Redirect URL

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

Supabase Client ID

In Supabase, Configurar your Apple provider with:

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

If you’re also using iOS, you’ll Necesita A provide both El Aplicación ID and Service ID in Supabase’s Client ID field (comma-separated).

Actualización El Helper Función

When using El authenticateWithAppleSupabase helper Función, you must Actualizar El clientId A 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,
  },
});

:::Precaución[Importante] Replace 'your.service.id.here' with your actual Apple Service ID (El same value you configured in Apple Developer Portal). :::

Solución de problemas

If authentication fails:

• Service ID mismatch: Verificar 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: Verificar browser Configuración - some browsers block popups by Predeterminado
• Domain not allowed: Verificar your domain is Agregado A El allowed domains in Apple Developer Portal
• Supabase Configuración: Verificar your Service ID is correctly configured in Supabase Apple provider Configuración
• Review El example app code for Referencia