Supabase Apple Login en Android

Requisitos

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

• el Supabase Apple Login - Configuración general.

Importante

Apple Sign-In en Android requiere un servidor backend, ya que Apple no ofrece soporte nativo para Android. Usaremos una Supabase Edge Function como backend.

Paso 1: Desplegar la Edge Function de backend

Primero, debemos desplegar la Supabase Edge Function que gestionará el callback de OAuth de Apple.

1. Navega al directorio de tu proyecto de Supabase

   cd your-project/supabase

2. Crea la Edge Function (if it doesn’t exist)

   supabase functions new apple-signin-callback

3. Copia la edge function code

   La implementación completa de la edge function está disponible en la app de ejemplo.

   Copia los siguientes archivos a tu proyecto:

   • supabase/functions/apple-signin-callback/index.ts - Edge function principal code
   • supabase/functions/apple-signin-callback/deno.json - Import map para dependencias (incluye la jose librería para la firma de JWT)

4. Configura la verificación de JWT

   El endpoint de callback de Apple OAuth debe ser público (sin autenticación) porque Apple redirigirá hacia él. Actualiza tu supabase/config.toml archivo:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   Importante

   Configuración verify_jwt = false hace que este endpoint sea público. Esto es necesario porque el redirect de OAuth de Apple no incluye los headers de autenticación de Supabase. El endpoint valida el propio flujo de OAuth.

5. Desplegar la función

   supabase functions deploy apple-signin-callback

6. Obtener la URL de tu función

   Tras el despliegue, obtendrás una URL como esta:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Si no la encuentras, puedes hacer lo siguiente:

   1. Abrir https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Haz clic en el apple-signin-callback URL de la función para copiarla.

   Guarda esta URL

   Necesitarás esta URL en el siguiente paso al configurar el Apple Developer Portal.

Paso 2: Configurar el Apple Developer Portal

Ahora debemos configurar el Apple Developer Portal con la URL del backend y obtener todos los valores necesarios.

URL de la función

Asegúrate de tener la URL de tu Supabase Edge Function del Paso 1 antes de continuar. La necesitarás para configurar la Return URL en el Apple Developer Portal.

1. Sigue la guía de configuración de Apple Login para Android

   Completa la guía de configuración de Apple Login para Android para:

   • Crear un Service ID
   • Generar una clave privada (archivo .p8)
   • Obtener tu Team ID y Key ID
   • Configurar la Return URL

2. Configurar la Return URL en el Apple Developer Portal

   Al configurar la Return URL en el Apple Developer Portal (paso 6.9 de la guía de Apple), usa la URL de tu Supabase Edge Function:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Importante: usa la URL de Supabase Edge Function

   NO uses la URL de redirección de la guía de configuración de Apple Login para Android. Esa guía usa una URL de servidor backend personalizada. Para la integración con Supabase, debes usar tu URL de Supabase Edge Function en su lugar.

   Coincidencia exacta requerida

   La Return URL debe coincidir exactamente lo que configures aquí. Apple es muy estricto con la coincidencia de la redirect URI.

3. Recopila todos los valores necesarios

   Tras completar la guía de configuración de Apple, deberías tener:

   • APPLE_TEAM_ID: Tu Apple Developer Team ID
   • APPLE_KEY_ID: El Key ID del Apple Developer Portal
   • APPLE_PRIVATE_KEY: Tu archivo de clave privada .p8 (debe estar en base64)
   • ANDROID_SERVICE_ID: Tu Apple Service ID (ej., com.example.app.service)
   • BASE_REDIRECT_URL: Tu URL de deep link (ej., capgo-demo-app://path)

   URL del deep link

   El BASE_REDIRECT_URL es el esquema de deep link configurado en tu AndroidManifest.xml. Aquí es donde el backend redirigirá tras la autenticación.

   El valor de tu deep link depende del android:scheme="capgo-demo-app" code. Si has configurado android:scheme="capgo-demo-app" en tu AndroidManifest.xml, entonces tu deep link será capgo-demo-app://path.

Paso 3: Configurar los Secrets de Supabase

Ahora debemos configurar las variables de entorno (secrets) para la Supabase Edge Function.

1. Codifica tu clave privada

   Primero, codifica tu clave privada de Apple (archivo .p8) a base64:

   base64 -i AuthKey_XXXXX.p8

   Copia todo el resultado (es una sola cadena larga).

2. Configura los secrets usando Supabase CLI

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Reemplaza los placeholders

   Reemplaza todos los valores de los placeholders con tus valores reales del Paso 2.

3. Alternativa: Configura los secrets en el Supabase Dashboard

   Si prefieres usar el dashboard:

   1. Ve al dashboard de tu proyecto en Supabase
   2. Navega a Edge Functions → Configuración → Secrets
   3. Añade cada variable secreta con su valor

Configuración de la app Android

El guía de configuración de Apple Login para Android ya incluye la configuración de tu app Android:

• Añadir el intent filter de deep link a AndroidManifest.xml
• Añadir el onNewIntent handler a MainActivity.java

Asegúrate de haber completado esos pasos antes de continuar. El esquema de deep link que configures ahí será tu BASE_REDIRECT_URL en el Paso 3.

Paso 4: Usar el Authentication Helper

Ahora puedes usar el authentication helper en tu app code.

Implementación

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

Uso del Authentication Helper

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

Actualizar la función helper

Al usar el authenticateWithAppleSupabase función helper, tú usar actualiza los siguientes valores según tu configuración:

1. Actualizar redirectUrl - Configura esto con la URL de tu Supabase Edge Function:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. Actualizar clientId - Configura esto 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 Android
       redirectUrl: redirectUrl,
     },
   });

   Importante

   Reemplazar 'your.service.id.here' con tu Apple Service ID real (el mismo valor que usaste para ANDROID_SERVICE_ID en el Paso 3).

Consulta la implementación completa como referencia.

Paso 5: Probar la integración

1. Build y ejecuta tu app de Android

   npx cap sync android
   npx cap run android

2. Prueba el flujo de autenticación

   • Pulsa el botón “Sign in with Apple”
   • Deberías ver la página de OAuth de Apple en el navegador
   • Tras autenticarte, deberías ser redirigido a tu app
   • Revisa los logs de la consola por si hay errores

3. Verifica el flujo

   El flujo completo debería ser:

   1. El usuario pulsa “Sign in with Apple”
   2. La app abre el navegador con Apple OAuth
   3. El usuario se autentica con Apple
   4. Apple redirige a: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. La Edge function cambia code por tokens
   6. La Edge function redirige a: your-app://path?id_token=...&access_token=...
   7. La app de Android recibe el deep link y procesa el identity token
   8. La app inicia sesión en Supabase con el identity token

Solución de problemas

Si la autenticación falla:

• Error de Redirect URI mismatch: Verifica que la Return URL en el Apple Developer Portal coincida exactamente con APPLE_REDIRECT_URI secret
• El deep link no funciona: Comprueba que AndroidManifest.xml el intent filter coincida con tu BASE_REDIRECT_URL
• Faltan secrets: Verify all secrets are set correctly using supabase secrets list
• Error en el intercambio de token: Revisa los logs de la edge function en el Supabase Dashboard para ver errores detallados
• La app no recibe el callback: Asegúrate de onNewIntent está bien implementado en MainActivity
• Revisa la app de ejemplo code como referencia

Cómo funciona

En Android, Apple Sign-In usa un flujo de redirección OAuth:

1. Inicialización: El plugin se inicializa con tu Service ID y la URL de redirección del backend
2. Flujo OAuth: Abre un navegador/Chrome Custom Tab con la página de OAuth de Apple
3. Callback del backend: Apple redirige a tu Supabase Edge Function con un code de autorización
4. Intercambio de tokens: La edge function intercambia el code por tokens usando el endpoint de tokens de Apple
5. Redirección con Deep Link: La edge function redirige de vuelta a tu app con el identity token
6. Autenticación de Supabase: La app recibe el token e inicia sesión en Supabase

Este flujo es necesario porque Apple no ofrece soporte nativo para Sign in with Apple en Android.

Continuar desde Supabase Apple Login en Android

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