Supabase Apple Login on Android

Prerequisites

Esta guía Va a help you integrate Apple Sign-In with Supabase Authentication on Android. It is assumed that you have already Completado:

• El Supabase Apple Login - General Setup.

Importante

Apple Sign-In on Android requires a backend server because Apple doesn’t provide native Android support. We’ll Usar a Supabase Edge Función as El backend.

Paso 1: Desplegar El Backend Edge Función

First, we Necesita Para desplegar El Supabase Edge Función that Va a handle El Apple OAuth callback.

1. Navigate A your Supabase project directory

   cd your-project/supabase

2. Crear El edge Función (if it doesn’t exist)

   supabase functions new apple-signin-callback

3. Copiar El edge Función code

   El Completo edge Función implementation is available in El example app.

   Copiar El following files A your project:

   • supabase/functions/apple-signin-callback/index.ts - Main edge Función code
   • supabase/functions/apple-signin-callback/deno.json - Importar map for dependencies (includes jose library for JWT signing)

4. Configurar JWT verification

   El Apple OAuth callback endpoint Debe be public (no authentication Requerido) because Apple Va a redirect A it. Actualización your supabase/config.toml file:

   [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"

   :::Precaución[Importante] Setting verify_jwt = false makes this endpoint public. Esto es Requerido because Apple’s OAuth redirect doesn’t include Supabase authentication headers. El endpoint validates El OAuth flow itself. :::

5. Desplegar El Función

   supabase functions deploy apple-signin-callback

6. Get your Función URL

   After Implementación, you’ll get a URL like:

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

   Si cannot Encontrar it, Puede do El following:

   1. Open https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Haga clic on El apple-signin-callback Función URL A Copiar it.

   Guardar this URL

   You’ll Necesita this URL in El next Paso when configuring Apple Developer Portal.

Paso 2: Configurar Apple Developer Portal

Now we Necesita Para configurar Apple Developer Portal with El backend URL and get all El Requerido values.

Función URL

Make sure you have your Supabase Edge Función URL De Paso 1 before proceeding. You’ll Necesita it Para configurar El Return URL in Apple Developer Portal.

1. Siga El Apple Login Android Configuración Guía

   Completo El Apple Login Android Setup guide A:

   • Crear a Service ID
   • Generate a private key (.p8 file)
   • Get your Team ID and Key ID
   • Configurar El Return URL

2. Establecer El Return URL in Apple Developer Portal

   When configuring El Return URL in Apple Developer Portal (Paso 6.9 of El Apple Guía), Usar your Supabase Edge Función URL:

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

   Importante: Usar Supabase Edge Función URL

   Do NOT Usar El redirect URL De El Apple Login Android Setup guide. That Guía uses a custom backend server URL. For Supabase Integración, you must Usar your Supabase Edge Función URL instead.

   :::Precaución[Exact Match Requerido] El Return URL Debe match exactly what you Configurar here. Apple is very strict about redirect URI matching. :::

3. Collect all Requerido values

   After completing El Apple Configuración Guía, Debería have:

   • APPLE_TEAM_ID: Your Apple Developer Team ID
   • APPLE_KEY_ID: El Key ID De Apple Developer Portal
   • APPLE_PRIVATE_KEY: Your .p8 private key file (needs A be base64 encoded)
   • ANDROID_SERVICE_ID: Your Apple Service ID (e.g., com.example.app.service)
   • BASE_REDIRECT_URL: Your deep Enlace URL (e.g., capgo-demo-app://path)

   Deep Enlace URL

   El BASE_REDIRECT_URL is El deep Enlace scheme configured in your AndroidManifest.xml. Esto es where El backend Va a redirect after authentication.

   El value of your deep Enlace is dependent on El android:scheme="capgo-demo-app" code. Si have Establecer android:scheme="capgo-demo-app" in your AndroidManifest.xml, then your deep Enlace Va a be capgo-demo-app://path.

Paso 3: Establecer Supabase Secrets

Now we Necesita Para configurar El environment Variables (secrets) for El Supabase Edge Función.

1. Encode your private key

   First, encode your Apple private key (.p8 file) A base64:

   base64 -i AuthKey_XXXXX.p8

   Copiar El entire output (it’s a single long string).

2. Establecer secrets using 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

   Replace Placeholders

   Replace all El placeholder values with your actual values De Paso 2.

3. Alternative: Establecer secrets in Supabase Panel

   Si prefer using El Panel:

   1. Go A your Supabase project Panel
   2. Navigate A Edge Funciones → Configuración → Secrets
   3. Agregar each secret Variable with its value

Android Aplicación Configuración

El Apple Login Android Setup guide already covers configuring your Android Aplicación:

• Adding El deep Enlace intent filter A AndroidManifest.xml
• Adding El onNewIntent handler A MainActivity.java

Make sure you’ve Completado those Pasos before proceeding. El deep Enlace scheme you Configurar there Va a be your BASE_REDIRECT_URL in Paso 3.

Paso 4: Usar El Authentication Helper

Now Puede Usar El authentication helper in your Aplicación code.

Implementation

El Completo implementation is available in El example app’s supabaseAuthUtils.ts file.

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

Actualización El Helper Función

When using El authenticateWithAppleSupabase helper Función, you must Actualizar El following values A match your Configuración:

1. Actualización redirectUrl - Establecer this A your Supabase Edge Función URL:

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

2. Actualización clientId - Establecer this A your 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,
     },
   });

   :::Precaución[Importante] Replace 'your.service.id.here' with your actual Apple Service ID (El same value you used for ANDROID_SERVICE_ID in Paso 3). :::

Ver El complete implementation for Referencia.

Paso 5: Prueba El Integración

1. Construir and Ejecutar your Android Aplicación

   npx cap sync android
   npx cap run android

2. Prueba El authentication flow

   • Tap El “Sign in with Apple” button
   • Debería Ver El Apple OAuth page in a browser
   • After authenticating, Debería be redirected back A your Aplicación
   • Verificar El console Registros for any errors

3. Verificar El flow

   El Completo flow should be:

   1. User taps “Sign in with Apple”
   2. Aplicación opens browser with Apple OAuth
   3. User authenticates with Apple
   4. Apple redirects A: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Edge Función exchanges code for tokens
   6. Edge Función redirects A: your-app://path?id_token=...&access_token=...
   7. Android Aplicación receives El deep Enlace and processes El identity token
   8. Aplicación signs in A Supabase with El identity token

Solución de problemas

If authentication fails:

• Redirect URI mismatch: Verificar El Return URL in Apple Developer Portal matches exactly with APPLE_REDIRECT_URI secret
• Deep Enlace not working: Verificar that AndroidManifest.xml intent filter matches your BASE_REDIRECT_URL
• Missing secrets: Verificar all secrets are Establecer correctly using supabase secrets list
• Token exchange fails: Verificar edge Función Registros in Supabase Panel for detailed Error messages
• Aplicación doesn’t receive callback: Ensure onNewIntent is properly implemented in MainActivity
• Review El example app code for Referencia

How It Works

On Android, Apple Sign-In uses an OAuth redirect flow:

1. Initialization: El Plugin is initialized with your Service ID and backend redirect URL
2. OAuth Flow: Opens a browser/Chrome Custom Tab with Apple’s OAuth page
3. Backend Callback: Apple redirects A your Supabase Edge Función with an authorization code
4. Token Exchange: El edge Función exchanges El code for tokens using Apple’s token endpoint
5. Deep Enlace Redirect: El edge Función redirects back A your Aplicación with El identity token
6. Supabase Authentication: El Aplicación receives El token and signs in A Supabase

This flow is necessary because Apple doesn’t provide native Android support for Sign in with Apple.