Supabase Apple Login - Configuración general

Resumen

Esta guía te ayudará a integrar Apple Sign-In con Supabase Authentication. Apple Sign-In ofrece un método de autenticación seguro y centrado en la privacidad que funciona en iOS, Android y Web.

Requisitos

Antes de empezar, asegúrate de tener:

1. Proyecto de Supabase creado

2. Lee la Configuración general de Apple Login Guía para configurar credenciales de Apple OAuth

3. Sigue las guías específicas de cada plataforma para configurar las credenciales de Apple OAuth en tu plataforma objetivo:

   • Configuración de Android
   • iOS Setup
   • Configuración web

   Nota

   Antes de empezar el tutorial de Supabase, debes generar los client IDs para las plataformas que vayas a usar.

   Para iOS, el client ID es el mismo que tu app ID. Para Android y Web, el client ID es el mismo que tu service ID. Los usarás en el paso 7 de esta guía.

Habilitar el proveedor Apple OAuth en Supabase

1. Ve a tu Dashboard de Supabase

2. Haz clic en tu proyecto

   

3. Do go to the Authentication menú

   

4. Haz clic en el Providers pestaña

   

5. Busca el Apple proveedor

   

6. Habilita el Apple proveedor

   

7. Completa la configuración del client ID:

   Nota

   Si usas Apple login para iOS, el client ID es el mismo que tu app ID. Si usas Apple login para Android o Web, el client ID es el mismo que tu service ID. Si usas ambos, debes proporcionar tanto el app ID como el service ID.

   

8. Haz clic en el Save botón

   

   Nota

   Usted NO TIENE QUE configurar Secret key (for OAuth). Realizaremos una implementación personalizada en el backend para gestionar el Apple login.

¡Listo! Ya has habilitado Apple Sign-In con Supabase Authentication 🎉

Uso del Authentication Helper

La implementación completa incluye una función auxiliar authenticateWithAppleSupabase() que gestiona todo el flujo de Apple Sign-In con Supabase. Esta función:

• Inicializa Apple Sign-In con la configuración de la plataforma
• Gestiona el flujo de autenticación (nativo en iOS, redirección OAuth en Android/Web)
• Extrae el identity token de Apple
• Inicia sesión en Supabase con el identity token

Implementación completa

La implementación completa está disponible en la de la app de ejemplo supabaseAuthUtils.ts archivo.

Uso básico

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);
}

Cómo funciona

La función helper gestiona automáticamente las diferencias entre plataformas:

• iOS: Usa el Apple Sign-In nativo (no requiere URL de redirección, usa el bundle ID automáticamente)
• Android: Usa el flujo de redirección OAuth con una edge function en el backend (requiere Service ID)
• Web: Usa el flujo de popup OAuth (requiere Service ID y la URL actual como redirect)

La función devuelve un identity token de Apple, que se usa para autenticarse con Supabase mediante supabase.auth.signInWithIdToken().

Continuar desde Supabase Apple Login - General Setup

Si estás usando Supabase Apple Login - Configuración general para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.