Configuración general de Supabase Apple Login

Resumen

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

Requisitos previos

Antes de empezar, asegúrate de:

1. Crear un proyecto de Supabase

2. Leído el Configuración General de Inicio de Sesión de Apple Configuración general de Apple Login OAuth

3. Seguido las guías específicas de la plataforma para configurar las credenciales OAuth de Apple para tu plataforma objetivo:

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

   Nota

   Antes de comenzar el tutorial de Supabase, debes generar los identificadores de cliente para las plataformas que planeas utilizar.

   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. Vaya a su Dashboard de Supabase

2. Haz clic en tu proyecto

   

3. Vaya a la Authentication menú

   

4. Haz clic en la Providers pestaña

   

5. Encuentre el Apple proveedor

   

6. Habilite el Apple proveedor

   

7. Rellene la configuración del ID del cliente:

   Nota

   Si está utilizando el inicio de sesión de Apple para iOS, el ID del cliente es el mismo que su ID de aplicación. Si está utilizando el inicio de sesión de Apple para Android o Web, el ID del cliente es el mismo que su ID de servicio. Si está utilizando ambos, necesita proporcionar ambos el ID de aplicación y el ID de servicio.

   

8. Haga clic en el Save botón

   

   Nota

   Usted No necesita configurar Secret key (for OAuth). Realizaremos una implementación de backend personalizada para manejar la autenticación de Apple.

¡Listo! Ahora ha habilitado la autenticación con Apple Sign-In y Supabase.

Usando la Ayuda de Autenticación

La implementación completa incluye una función auxiliar authenticateWithAppleSupabase() que maneja el flujo completo de autenticación de Apple con Supabase. Esta función:

• Inicia Apple Sign-In con configuración específica de la plataforma
• Maneja el flujo de autenticación (nativo en iOS, redirección de OAuth en Android/Web)
• Extrae el token de identidad de Apple
• Inicia sesión en Supabase con el token de identidad

Implementación completa

La implementación completa está disponible en el ejemplo de aplicación 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 de ayuda maneja automáticamente las diferencias específicas de la plataforma:

• iOS: Uses native Apple Sign-In (no redirect URL needed, uses bundle ID automatically)
• Android: Utiliza el flujo de OAuth con una función de borde de backend (requiere ID de Servicio)
• WebUtiliza el flujo de OAuth popup (requiere ID de servicio y URL de página actual como redirección)

La función devuelve un token de identidad de Apple, que luego se utiliza para autenticar con Supabase utilizando supabase.auth.signInWithIdToken().

Continúa desde Supabase Apple Login - Configuración general

Si estás utilizando Supabase Apple Login - Configuración general para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-privada para el detalle de implementación en @capgo/capacitor-clave-privada @capgo/capacitor-biométrica-nativa para el detalle de implementación en @capgo/capacitor-biométrica-nativa, y Dos factores de autenticación para el detalle de implementación en Dos factores de autenticación.