Supabase Apple Login – Allgemeines Setup

Übersicht

Diese Anleitung hilft dir bei der Integration von Apple Sign-In mit Supabase Authentication. Apple Sign-In bietet eine sichere, datenschutzorientierte Authentifizierung für iOS, Android und Web.

Voraussetzungen

Bevor du startest, stelle sicher, dass du:

1. Ein Supabase-Projekt erstellt hast

2. Lies die Allgemeine Einrichtung von Apple Login Anleitung zur Einrichtung der Apple OAuth-Credentials

3. Folge den jeweiligen plattformspezifischen Guides, um die Apple OAuth-Credentials für deine Zielplattform einzurichten:

   • Android-Setup
   • iOS-Setup
   • Web-Setup

   Hinweis

   Bevor du mit dem Supabase-Tutorial beginnst, musst du die Client-IDs für die Plattformen generieren, die du verwenden möchtest.

   Bei iOS entspricht die Client-ID deiner App-ID. Bei Android und Web ist die Client-ID deine Service-ID. Du benötigst diese in Schritt 7 dieser Anleitung.

Apple OAuth-Provider in Supabase aktivieren

1. Gehe zu deinem Supabase Dashboard

2. Klicke auf dein Projekt

   

3. Navigiere zum Authentication Menü

   

4. Klicke auf die Providers Tab

   

5. Suche nach Apple Provider

   

6. Aktiviere Apple Provider

   

7. Konfiguriere die Client-ID:

   Hinweis

   Wenn du Apple Login für iOS nutzt, entspricht die Client ID deiner App ID. Bei Apple Login für Android oder Web ist die Client ID deine Service ID. Nutzt du beides, musst du sowohl die App ID als auch die Service ID angeben.

   

8. Klicke auf die Save Button

   

   Hinweis

   Du MUSS NICHT einrichten Secret key (for OAuth). Wir implementieren ein eigenes Backend, um den Apple Login zu verarbeiten.

Fertig! Du hast Apple Sign-In mit Supabase Authentication aktiviert 🎉

Verwendung des Authentication Helpers

Die vollständige Implementierung enthält eine Helper-Funktion, authenticateWithAppleSupabase() die den gesamten Apple Sign-In Flow mit Supabase übernimmt. Diese Funktion:

• Initialisiert Apple Sign-In mit plattformspezifischer Konfiguration
• Verwaltet den Auth-Flow (nativ auf iOS, OAuth-Redirect auf Android/Web)
• Extrahiert den Identity Token von Apple
• Meldet mit dem Identity Token bei Supabase an

Vollständige Implementierung

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

Basic Usage

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

So funktioniert es

Die Helper-Funktion übernimmt automatisch die plattformspezifischen Unterschiede:

• iOS: Nutzt natives Apple Sign-In (keine Redirect-URL nötig, Bundle ID wird automatisch verwendet)
• Android: Nutzt OAuth-Redirect-Flow mit Backend Edge Function (Service ID erforderlich)
• Web: Nutzt OAuth-Popup-Flow (erfordert Service ID und aktuelle URL als Redirect)

Die Funktion gibt einen Identity Token von Apple zurück, der anschließend zur Authentifizierung bei Supabase verwendet wird supabase.auth.signInWithIdToken().

Weiter mit Supabase Apple Login - General Setup

Wenn du es nutzt Supabase Apple Login – Allgemeines Setup 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.