Supabase Apple Login en Web

Requisitos

Esta guía te ayudará a integrar Apple Sign-In con Supabase Authentication en la web. Se asume que ya has completado:

• el Configuración de Apple Login para Web
• el Supabase Apple Login - Configuración general.

Implementación

La implementación completa está disponible en la de la app de ejemplo supabaseAuthUtils.ts archivo. Esta guía explica los conceptos clave y cómo usarlo.

Uso del Authentication Helper

El authenticateWithAppleSupabase función gestiona todo el flujo de autenticación:

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 la web, Apple Sign-In usa un flujo de popup OAuth:

1. Inicialización: El plugin se inicializa con tu Service ID y la URL de la página actual como redirect URL
2. Popup OAuth: Abre una ventana emergente con la página OAuth de Apple
3. Autenticación de usuario: El usuario se autentica con Apple en el popup
4. Token de identidad: Apple devuelve un identity token (JWT) con la información del usuario
5. Autenticación de Supabase: El identity token se envía a Supabase mediante signInWithIdToken()

La función helper detecta automáticamente la plataforma web y lo configura todo correctamente.

Notas importantes

Configuración del Service ID

• En web necesitas tu Apple Service ID (igual que en Android)
• El Service ID debe configurarse en el Apple Developer Portal con las Return URLs correctas
• Asegúrate de que tu dominio esté añadido a los dominios permitidos en el Apple Developer Portal

URL de redirección

• En web, la URL de redirección se establece automáticamente en window.location.href (URL de la página actual)
• Debe coincidir con una de las Return URLs configuradas en el Apple Developer Portal
• Asegúrate de configurar tanto la URL con como sin barra final en el Apple Developer Portal

Client ID de Supabase

En Supabase, configura tu proveedor de Apple con:

• ID de cliente: Tu Apple Service ID (ej., com.example.app.service)

Si también usas iOS, deberás incluir tanto el App ID como el Service ID en el campo Client ID de Supabase (separados por comas).

Actualizar la función helper

Al usar el authenticateWithAppleSupabase función helper, tú usar actualiza el clientId para que coincida con tu 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,
  },
});

Importante

Reemplazar 'your.service.id.here' con tu Apple Service ID real (el mismo valor que configuraste en el Apple Developer Portal).

Solución de problemas

Si la autenticación falla:

• Service ID no coincide: Verifica que tu Service ID coincida tanto en el Apple Developer Portal como en tu code
• URL de retorno no configuradaAsegúrate de configurar la URL de tu página actual (con y sin barra final) en el Apple Developer Portal
• Popup bloqueado: Revisa la configuración del navegador; algunos bloquean los popups por defecto
• Dominio no permitido: Verifica que tu dominio esté añadido a los dominios permitidos en el Apple Developer Portal
• Configuración de SupabaseVerifica que tu Service ID esté bien configurado en los ajustes del proveedor de Apple en Supabase
• Revisa la app de ejemplo code como referencia

Continúa desde Supabase Apple Login en Web

Si estás usando Supabase Apple Login en Web 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.