Supabase Apple Login im Web

Voraussetzungen

Diese Anleitung hilft dir bei der Integration von Apple Sign-In mit Supabase Authentication im Web. Wir gehen davon aus, dass du Folgendes bereits erledigt hast:

• Die Apple Login Web Setup
• Die Supabase Apple Login – Allgemeines Setup.

Implementierung

Die vollständige Implementierung findest du im der Beispiel-App supabaseAuthUtils.ts Datei. Dieser Guide erklärt die wichtigsten Konzepte und wie du sie verwendest.

Verwendung des Authentication Helpers

Der authenticateWithAppleSupabase Funktion übernimmt den gesamten Authentication-Flow:

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

Im Web nutzt Apple Sign-In einen OAuth-Popup-Flow:

1. Initialisierung: Das Plugin wird mit deiner Service ID und der aktuellen Seiten-URL als Redirect-URL initialisiert
2. OAuth-Popup: Öffnet ein Popup-Fenster mit der OAuth-Seite von Apple
3. Benutzerauthentifizierung: Der User authentifiziert sich im Popup bei Apple
4. Identity-Token: Apple liefert einen Identity Token (JWT) mit Benutzerinformationen zurück
5. Supabase-Authentifizierung: The identity token is sent to Supabase using signInWithIdToken()

Die Helper-Funktion erkennt die Web-Plattform automatisch und konfiguriert alles passend.

Wichtige Hinweise

Service-ID-Konfiguration

• Für Web wird deine Apple Service ID benötigt (identisch mit Android)
• Die Service ID muss im Apple Developer Portal mit den korrekten Return URLs konfiguriert werden
• Stelle sicher, dass deine Domain im Apple Developer Portal zu den erlaubten Domains hinzugefügt wurde

Redirect-URL

• Im Web wird die Redirect URL automatisch auf gesetzt: window.location.href (URL der aktuellen Seite)
• Dies muss einer der im Apple Developer Portal konfigurierten Return-URLs entsprechen
• Stelle sicher, dass sowohl die URL mit als auch ohne abschließenden Slash im Apple Developer Portal konfiguriert sind

Supabase Client ID

Konfiguriere deinen Apple-Provider in Supabase mit:

• Client-ID: Deine Apple Service ID (z. B. com.example.app.service)

Wenn du auch iOS nutzt, musst du sowohl die App ID als auch die Service ID im Client-ID-Feld von Supabase angeben (kommagetrennt).

Helper Function aktualisieren

Wenn du die authenticateWithAppleSupabase Helper Function nutzt, musst du musst aktualisiere den clientId passend zu deiner 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,
  },
});

Wichtig

Ersetze 'your.service.id.here' mit deiner tatsächlichen Apple Service ID (derselbe Wert, den du im Apple Developer Portal konfiguriert hast).

Fehlerbehebung

Falls die Authentifizierung fehlschlägt:

• Service ID stimmt nicht überein: Prüfe, ob deine Service ID im Apple Developer Portal und in deinem code übereinstimmt
• Return-URL nicht konfiguriert: Stelle sicher, dass deine aktuelle Seiten-URL (mit und ohne Slash am Ende) im Apple Developer Portal hinterlegt ist
• Popup blockiert: Prüfe die Browsereinstellungen – einige Browser blockieren Popups standardmäßig
• Domain nicht erlaubt: Prüfe, ob deine Domain im Apple Developer Portal unter den erlaubten Domains eingetragen ist
• Supabase-Konfiguration: Prüfe, ob deine Service ID in den Apple-Provider-Einstellungen von Supabase korrekt konfiguriert ist
• Überprüfe die Beispiel-App code als Referenz

Weiter mit Supabase Apple Login im Web

Wenn du es nutzt Supabase Apple Login im Web 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.