Supabase Google Login - Allgemeine Einstellungen

Ein Setup-Prompt kopieren, der die Installationsanweisungen und die vollständige Markdown-Anleitung für diesen Plugin enthält.

Einführung

Diese Anleitung führt Sie durch die Integration von Google Sign-In mit Supabase-Authentifizierung mithilfe des Capacitor-Social-Login-Plugins. Diese Konfiguration ermöglicht die Verwendung von native Google Sign-In auf mobilen Plattformen, während Supabase Auth für die Backend-Authentifizierung genutzt wird.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

Einen Supabase-Projekt erstellt haben
Die Google Login General Setup Anleitung zur Einrichtung von Google OAuth-Zugriffsberechtigungen gelesen haben
Die jeweils platform-spezifischen Anleitungen zur Einrichtung von Google OAuth-Zugriffsberechtigungen für Ihre Zielplattform befolgt haben:
Bevor Sie das Supabase-Tutorial beginnen, müssen Sie die Client-IDs für die Plattformen erstellen, die Sie verwenden möchten. Sie werden sie in Schritt 7 dieser Anleitung verwenden.

Google OAuth-Anbieter in Supabase aktivieren

Gehen Sie zu Ihrem Supabase-Dashboard
Klicken Sie auf Ihr Projekt
Gehe zum Menü Authentication Menü
Klicke auf die Providers Registerkarte
Finde den Google Anbieter
Aktiviere den Anbieter
Füge die Client-IDs für die Plattformen ein, die du verwenden möchtest

Dies umfasst den Web-Client-Id, den iOS-Client-Id und den Android-Client-Id. Sie können einige davon überspringen, je nachdem, welche Plattformen Sie verwenden möchten.
Klicken Sie auf den Save Button

Voilà, Sie haben nun Google Sign-In mit Supabase-Authentifizierung aktiviert 🎉

In diesem Abschnitt wird erklärt, wie die Google-Sign-In-Integration mit Supabase unter der Haube funktioniert. Ein Verständnis dieses Flusses hilft Ihnen dabei, die Authentifizierungsprozess zu implementieren und zu überprüfen.

1. Zufallszahlenerzeugung

Die Implementierung generiert ein sicheres Zufallszahlspaar, das den Anforderungen von Supabase entspricht Supabase-Zufallszahleneinheiten:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Ablauf:

rawNonce: URL-sichere zufällige Zeichenkette (64 hexadezimale Zeichen)
nonceDigest: SHA-256-Hash von rawNonce (hexadezimale Kodierung)
nonceDigest wird an Google Sign-In weitergeleitet → Google enthält den Zufallszahlendigest im ID-Token
rawNonce wird an Supabase weitergeleitet → Supabase hashet die Rohzufallszahl und vergleicht sie mit der Token-Zufallszahl

Die Funktion initialisiert das Plugin und meldet sich bei Google an:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. JWT-Validierung

Bevor der Token an Supabase gesendet wird, validiert die Implementierung den JWT-Token:

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Warum vor Supabase validieren?

Die Validierung des JWT-Tokens vor dem Senden des Tokens an Supabase dient mehreren wichtigen Zwecken:

Prävention von ungültigen Anfragen: Wenn der Token eine falsche Zielgruppe oder ein Nichtübereinstimmung von Nonce hat, wird Supabase den Token ohnehin ablehnen. Die Validierung zuerst vermeidet unnötige API-Aufrufe und liefert klare Fehlermeldungen.
Token-Caching-Probleme: Bei einigen Plattformen (insbesondere iOS), kann Google Sign-In SDK Token für Leistungscache speichern. Wenn ein gecachter Token zurückgegeben wird, kann der gecachte Token möglicherweise mit einer anderen (oder gar keiner) Nonce erstellt worden sein, was dazu führt, dass Supabase den Token mit einem „Nonce-Mismatch“-Fehler ablehnt. Durch die Validierung vor dem Senden an Supabase können wir dieses Problem frühzeitig erkennen und automatisch mit einem frischen Token erneut versuchen.
Security (iOS): Bei iOS stellt die Validierung sicher, dass der Token für Ihre spezifischen Google Client IDs ausgestellt wurde, was mögliche Sicherheitsprobleme von der Verwendung von Token verhindert, die für andere Anwendungen bestimmt sind.
Better Error Handling: Durch die Erkennung von Problemen vor Supabase ist automatisches Wiederholungslogik erforderlich, was für die transparente Behandlung von iOS-Caching-Problemen unerlässlich ist.

Wenn die Validierung fehlschlägt, führt die Funktion automatisch:

Abmelden bei Google (Löschen der gecachten Token - kritisch bei iOS)
Wiederholung der Authentifizierung einmal (Zwingt die Erzeugung eines frischen Tokens mit korrekter Nonce)
Wenn auch die Wiederholung fehlschlägt, wird ein Fehler zurückgegeben

Schließlich wird der validierte Token an Supabase gesendet:

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Vollständige Code-Referenz

Die vollständige Implementierung ist im Beispiel-App- supabaseAuthUtils.ts Datei verfügbar, die Folgendes enthält:

getUrlSafeNonce() - Generiert eine URL-sichere zufällige Nonce
sha256Hash() - Hashes eine Zeichenkette mit SHA-256
getNonce() - Generiert eine Nonce-Paar
decodeJWT() - Decodiert ein JWT-Token
validateJWTToken() - Überprüft die Zielgruppe und die Nonce eines JWT-Tokens
authenticateWithGoogleSupabase() - Hauptauthentifizierungs-Funktion mit automatischer Wiederholung

Zusätzliche Beispieldateien

SupabasePage.tsx - Beispielkomponente mit Redirect-Handling (Web)
SupabaseCreateAccountPage.tsx - Beispiel-Anmeldeseite

Nächste Schritte

Bitte gehen Sie zur plattform-spezifischen Einrichtungsanleitung für Ihre Zielplattform:

Wenn Sie Supabase Google Login - Allgemeine Einstellungen authentifizieren und Kontoflows planen, verbinden Sie es mit Mithilfe von @capgo/capacitor-social-login die native Fähigkeit in Mithilfe von @capgo/capacitor-social-login @capgo/capacitor-social-login die Implementierungsdetails in @capgo/capacitor-social-login @capgo/capacitor-passkey die Implementierungsdetails in @capgo/capacitor-passkey @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometrisch und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.