Supabase Apple Login auf Android

Voraussetzungen

Diese Anleitung hilft dir dabei, Apple Sign-In mit Supabase Authentication auf Android zu integrieren. Wir gehen davon aus, dass du bereits Folgendes abgeschlossen hast:

• Die Supabase Apple Login – Allgemeines Setup.

Wichtig

Apple Sign-In auf Android benötigt einen Backend-Server, da Apple keine native Android-Unterstützung bietet. Wir nutzen eine Supabase Edge Function als Backend.

Schritt 1: Backend Edge Function bereitstellen

Zuerst müssen wir die Supabase Edge Function deployen, die den Apple OAuth-Callback verarbeitet.

1. Navigiere zu deinem Supabase-Projektverzeichnis

   cd your-project/supabase

2. Erstelle die Edge Function (falls sie noch nicht existiert)

   supabase functions new apple-signin-callback

3. Kopiere die Edge Function code

   Die vollständige Implementierung der Edge Function findest du in der Beispiel-App.

   Kopiere die folgenden Dateien in dein Projekt:

   • supabase/functions/apple-signin-callback/index.ts - Haupt-Edge-Function code
   • supabase/functions/apple-signin-callback/deno.json - Import Map für Abhängigkeiten (inklusive jose Library für JWT-Signing)

4. JWT-Verifizierung konfigurieren

   Der Apple OAuth Callback-Endpoint muss öffentlich sein (keine Authentifizierung erforderlich), da Apple dorthin weiterleitet. Aktualisiere deinen supabase/config.toml Datei:

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

   Wichtig

   Einstellung verify_jwt = false macht diesen Endpoint öffentlich. Das ist notwendig, da der OAuth-Redirect von Apple keine Supabase-Authentifizierungs-Header enthält. Der Endpoint validiert den OAuth-Flow selbst.

5. Function deployen

   supabase functions deploy apple-signin-callback

6. Function-URL abrufen

   Nach dem Deployment erhältst du eine URL wie:

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

   Falls du sie nicht findest, kannst du Folgendes tun:

   1. Öffne https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Klicke auf die apple-signin-callback Funktions-URL zum Kopieren.

   Diese URL speichern

   Diese URL benötigst du im nächsten Schritt bei der Konfiguration des Apple Developer Portals.

Schritt 2: Apple Developer Portal konfigurieren

Jetzt müssen wir das Apple Developer Portal mit der Backend-URL konfigurieren und alle erforderlichen Werte abrufen.

Funktions-URL

Stelle sicher, dass du die Supabase Edge Function URL aus Schritt 1 bereit hast. Du benötigst sie, um die Return URL im Apple Developer Portal zu konfigurieren.

1. Folge dem Apple Login Android Setup Guide

   Schließe den Apple Login Android Setup Guide ab an:

   • Erstelle eine Service ID
   • Generiere einen Private Key (.p8 Datei)
   • Hol dir deine Team ID und Key ID
   • Konfiguriere die Return URL

2. Setze die Return URL im Apple Developer Portal

   Nutze beim Konfigurieren der Return URL im Apple Developer Portal (Schritt 6.9 des Apple Guides) deine Supabase Edge Function URL:

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

   Wichtig: Nutze die Supabase Edge Function URL

   Benutze NICHT die Redirect-URL aus dem Apple Login Android Setup Guide. Dieser Guide nutzt eine eigene Backend-Server-URL. Für die Supabase-Integration musst du musst stattdessen deine Supabase Edge Function URL verwenden.

   Exakter Match erforderlich

   Die Return URL muss exakt mit exactly was du hier konfigurierst. Apple ist sehr streng bei der Validierung der Redirect URI.

3. Alle erforderlichen Werte sammeln

   Nach Abschluss der Apple-Setup-Anleitung sollten Sie Folgendes haben:

   • APPLE_TEAM_ID: Ihre Apple Developer Team ID
   • APPLE_KEY_ID: Die Key ID aus dem Apple Developer Portal
   • APPLE_PRIVATE_KEY: Ihre .p8 Private Key Datei (muss base64-kodiert sein)
   • ANDROID_SERVICE_ID: Deine Apple Service ID (z. B. com.example.app.service)
   • BASE_REDIRECT_URL: Ihre Deep Link URL (z. B., capgo-demo-app://path)

   Deep Link URL

   Der BASE_REDIRECT_URL ist das Deep Link Scheme, das du in deinem AndroidManifest.xmlkonfiguriert hast. Dorthin leitet das Backend nach der Authentifizierung weiter.

   Der Wert deines Deep Links hängt von deinem android:scheme="capgo-demo-app" code ab. Wenn du android:scheme="capgo-demo-app" in deinem AndroidManifest.xmlgesetzt hast, dann lautet dein Deep Link capgo-demo-app://path.

Schritt 3: Supabase Secrets setzen

Jetzt müssen wir die Umgebungsvariablen (Secrets) für die Supabase Edge Function konfigurieren.

1. Privaten Key encodieren

   Codiere zuerst deinen Apple Private Key (.p8-Datei) in Base64:

   base64 -i AuthKey_XXXXX.p8

   Kopiere die gesamte Ausgabe (ein einziger langer String).

2. Secrets über Supabase CLI setzen

   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

   Platzhalter ersetzen

   Ersetze alle Platzhalter durch deine tatsächlichen Werte aus Schritt 2.

3. Alternative: Secrets im Supabase Dashboard setzen

   Falls du das Dashboard bevorzugst:

   1. Gehe zu deinem Supabase Project Dashboard
   2. Navigiere zu Edge Functions → Einstellungen → Secrets
   3. Füge jede Secret-Variable mit ihrem Wert hinzu

Android App Konfiguration

Der Apple Login Android Setup Guide deckt die Konfiguration deiner Android App bereits ab:

• Hinzufügen des Deep Link Intent Filters zu AndroidManifest.xml
• Hinzufügen des onNewIntent Handlers zu MainActivity.java

Stelle sicher, dass du diese Schritte abgeschlossen hast, bevor du fortfährst. Das Deep Link Scheme, das du dort konfigurierst, ist dein BASE_REDIRECT_URL in Schritt 3.

Schritt 4: Authentication Helper nutzen

Jetzt kannst du den Authentication Helper in deiner App code nutzen.

Implementierung

Die vollständige Implementierung findest du im der Beispiel-App supabaseAuthUtils.ts Datei.

Verwendung des Authentication Helpers

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

Helper Function aktualisieren

Wenn du die authenticateWithAppleSupabase Helper Function nutzt, musst du musst Passe die folgenden Werte an deine Konfiguration an:

1. Update redirectUrl - Setze dies auf deine Supabase Edge Function URL:

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

2. Update clientId - Setze dies auf deine 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,
     },
   });

   Wichtig

   Ersetze 'your.service.id.here' durch deine tatsächliche Apple Service ID (derselbe Wert, den du für ANDROID_SERVICE_ID in Schritt 3).

Siehe den vollständige Implementierung als Referenz.

Schritt 5: Integration testen

1. Android-App builden und ausführen

   npx cap sync android
   npx cap run android

2. Authentifizierungs-Flow testen

   • Tippe auf den „Sign in with Apple“-Button
   • Du solltest die Apple OAuth-Seite im Browser sehen
   • Nach der Authentifizierung solltest du zurück in deine App geleitet werden
   • Prüfe die Console Logs auf Fehler

3. Flow verifizieren

   Der vollständige Flow sollte so aussehen:

   1. User tippt auf „Sign in with Apple“
   2. App öffnet Browser mit Apple OAuth
   3. User authentifiziert sich bei Apple
   4. Apple leitet weiter zu: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Edge Function tauscht code gegen Tokens
   6. Edge Function leitet weiter zu: your-app://path?id_token=...&access_token=...
   7. Android App erhält Deep Link und verarbeitet Identity Token
   8. App meldet sich mit Identity Token bei Supabase an

Fehlerbehebung

Falls die Authentifizierung fehlschlägt:

• Redirect-URI stimmt nicht überein: Stelle sicher, dass die Return URL im Apple Developer Portal exakt mit übereinstimmt: APPLE_REDIRECT_URI secret
• Deep Link funktioniert nicht: Überprüfe, ob AndroidManifest.xml intent filter matches your BASE_REDIRECT_URL
• Fehlende Secrets: Verify all secrets are set correctly using supabase secrets list
• Token-Exchange schlägt fehl: Prüfe die Edge Function Logs im Supabase Dashboard für detaillierte Fehlermeldungen
• App erhält keinen Callback: Ensure onNewIntent in der MainActivity korrekt implementiert ist
• Überprüfe die Beispiel-App code als Referenz

So funktioniert es

Unter Android nutzt Apple Sign-In einen OAuth-Redirect-Flow:

1. Initialisierung: Das Plugin wird mit deiner Service ID und der Backend-Redirect-URL initialisiert
2. OAuth-Flow: Öffnet einen Browser/Chrome Custom Tab mit der OAuth-Seite von Apple
3. Backend-Callback: Apple leitet mit einem Authorization code an deine Supabase Edge Function weiter
4. Token-Austausch: Die Edge Function tauscht den code über Apples Token-Endpoint gegen Tokens aus
5. Deep Link Redirect: Die Edge Function leitet mit dem Identity Token zurück an deine App weiter
6. Supabase-Authentifizierung: Die App erhält den Token und meldet sich bei Supabase an

Dieser Flow ist notwendig, da Apple keine native Android-Unterstützung für Sign in with Apple bietet.

Weiter mit Supabase Apple Login auf Android

Wenn du es nutzt Supabase Apple Login auf Android Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung von @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails zur Zwei-Faktor-Authentifizierung.