Supabase Apple Login - Configuración General

Copie una pestaña de configuración con los pasos de instalación y la guía de markdown completa para este plugin.

Resumen

Esta guía te ayudará a integrar Sign-In de Apple con la autenticación de Supabase. Sign-In de Apple 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 que tengas:

Creado un proyecto de Supabase
Leído el Configuración general de Apple Login guía para configurar las credenciales OAuth de Apple
Seguido las guías específicas de la plataforma para configurar las credenciales OAuth de Apple para tu plataforma objetivo:
Antes de comenzar el tutorial de Supabase, debes generar los identificadores de cliente para las plataformas que planeas utilizar.
Para iOS, el identificador de cliente es el mismo que tu ID de aplicación. Para Android y Web, el identificador de cliente es el mismo que tu ID de servicio. Los utilizarás en el paso 7 de esta guía.

Habilitar proveedor de autenticación OAuth de Apple en Supabase

Ir a tu Panel de control de Supabase
Haz clic en tu proyecto
No vaya a la Authentication menú
Haga clic en la Providers pestaña
Encuentre el Apple proveedor
Habilite el Apple proveedor
Rellene la configuración del ID del cliente:

Si está utilizando Apple Login para iOS, el ID del cliente es el mismo que su ID de aplicación. Si está utilizando Apple Login 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.
Haga clic en el Save botón

Tú NO TIENES QUE HACER ESTO setup Secret key (for OAuth)Implementaremos una implementación de backend personalizada para manejar el inicio de sesión de Apple.

¡Listo! Ahora has habilitado el inicio de sesión con Apple con la autenticación de Supabase 🎉

Utilizando la Ayuda de Autenticación

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

Inicia el inicio de sesión de Apple con la 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

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 plataforma:

iOS: Utiliza la autenticación de Apple nativa (no se necesita una URL de redireccionamiento, utiliza automáticamente el ID de paquete)
Android: Utiliza el flujo de redirección de OAuth con una función de borde de servidor (requiere ID de Servicio)
Web: Utiliza el flujo de popup de OAuth (requiere ID de Servicio y la URL de la 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().