Supabase Apple Login en Web

Requisitos previos

Esta guía te ayudará a integrar el inicio de sesión de Apple con la autenticación de Supabase en Web. Se asume que ya has completado:

• los Configuración de inicio de sesión de Apple en la web
• la Configuración general de inicio de sesión de Apple en Supabase.

Implementación

La implementación completa está disponible en el archivo del ejemplo de aplicación. Este manual explica los conceptos clave y cómo utilizarlo. supabaseAuthUtils.ts Usando la Ayuda de Autenticación

Sección titulada “Usando la Ayuda de Autenticación”

función maneja el flujo de autenticación completo: authenticateWithAppleSupabase función maneja el flujo de autenticación completo:

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

En Web, Apple Sign-In utiliza un flujo de OAuth popup:

1. Inicialización: El plugin se inicia con su ID de Servicio y la URL de la página actual como URL de redirección
2. OAuth Popup: Abre una ventana emergente con la página de OAuth de Apple
3. Autenticación de Usuario: El usuario se autentica con Apple en la ventana emergente
4. Token de Identidad: Apple devuelve un token de identidad (JWT) que contiene información del usuario
5. Autenticación de Supabase: El token de identidad se envía a Supabase utilizando signInWithIdToken()

La función de ayuda detecta automáticamente la plataforma web y configura todo de manera adecuada.

Notas importantes

Configuración del ID de Servicio

• Web requiere su ID de Servicio de Apple (igual que Android)
• El ID de Servicio debe estar configurado en el Portal de Desarrolladores de Apple con las URL de retorno correctas
• Asegúrese de que su dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de Apple

URL de redirección

• En la web, la URL de redirección se establece automáticamente en window.location.href (URL de la página actual)
• Deben coincidir con una de las URL de retorno configuradas en el Portal de Desarrolladores de Apple
• Asegúrese de que tanto la URL con como la sin barra de dirección estén configuradas en el Portal de Desarrolladores de Apple

ID de cliente de Supabase

En Supabase, configure su proveedor de Apple con:

• ID de cliente: Su ID de Servicio de Apple (por ejemplo, com.example.app.service)

Si también está utilizando iOS, necesitará proporcionar tanto el ID de la aplicación como el ID de Servicio en el campo ID de cliente de Supabase (separados por comas).

Actualizar la función de ayuda

Cuando utilices la función de ayuda, debes authenticateWithAppleSupabase actualizar el debe actualizar el clientId para que coincida con tu ID de Servicio de Apple:

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

Importante

Sustituye 'your.service.id.here' por tu ID de Servicio de Apple real (el mismo valor que configuraste en el Portal de Desarrolladores de Apple).

Solución de problemas

Si falla la autenticación:

• Diferencia de ID de Servicio: Verifique que el ID de Servicio coincida en ambos Portal de Desarrolladores de Apple y su code
• URL de retorno no configurada: Asegúrese de que la URL actual de la página (con y sin barra de dirección) esté configurada en el Portal de Desarrolladores de Apple
• Ventana emergente bloqueada: Revisar ajustes del navegador - algunos navegadores bloquean ventanas emergentes por defecto
• Dominio no permitido: Verifique que el dominio esté agregado a los dominios permitidos en el Portal de Desarrolladores de Apple
• Configuración de Supabase: Verifique que el ID de Servicio esté configurado correctamente en los ajustes de proveedor de Apple de Supabase
• Revisar los Ejemplo de aplicación code Para referencia

Sigue adelante desde Supabase Apple Login en Web

Si estás utilizando Supabase Apple Login en Web 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-llave 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 en dos factores para el detalle de implementación en Autenticación en dos factores.