Supabase Google Login im Web

Einführung

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

• die Google Login Web Setup
• die Supabase Google Login – Allgemeines Setup.

Implementierung

Die vollständige Implementierung findest du in der Example-App- supabaseAuthUtils.ts Datei. Dieser Guide erklärt die wichtigsten Konzepte und die Anwendung.

Verwendung des Authentication Helpers

Die authenticateWithGoogleSupabase Funktion übernimmt den gesamten Authentication-Flow:

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Kritisch: Redirect-Handling

Kritisch: Redirect-Handling

Wenn du Google Login im Web nutzt, musst du UNBEDINGT eine beliebige Funktion aus dem Plugin aufrufen, wenn der Redirect stattfindet, damit das Plugin initialisiert wird und den Redirect verarbeiten und das Popup-Fenster schließen kann. Du kannst entweder isLoggedIn() ODER initialize() - beide lösen das Redirect-Handling aus.

Das ist essenziell, damit der OAuth-Popup-Flow korrekt funktioniert.

Implementierungsbeispiel

Füge dies deiner Komponente für das Google Sign-In hinzu:

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

Siehe SupabasePage.tsx für ein vollständiges Beispiel.

So funktioniert es

Eine detaillierte Erklärung zum Authentifizierungs-Flow, inklusive Nonce-Generierung, JWT-Validierung und Supabase Sign-in, findest du im Abschnitt „How It Works“ im General Setup Guide.

Für die vollständige code Referenz schau in den Abschnitt „Complete Code Reference“ im General Setup Guide.

Siehe auch:

• SupabasePage.tsx - Beispielkomponente mit Redirect-Handling
• SupabaseCreateAccountPage.tsx - Beispiel für die Registrierungsseite

Wichtige Hinweise

Redirect-Handling

Wenn du Google Login im Web nutzt, musst du UNBEDINGT eine beliebige Funktion aus dem Plugin aufrufen, wenn der Redirect stattfindet, damit das Plugin initialisiert wird und den Redirect verarbeiten und das Popup-Fenster schließen kann. Du kannst entweder isLoggedIn() ODER initialize() - beide lösen das Redirect-Handling aus.

Dies ist essenziell, damit der OAuth-Popup-Flow korrekt funktioniert. Ohne dies schließt sich das Popup-Fenster nach der Authentifizierung nicht.

Nonce-Handling

Die Nonce-Implementierung folgt dem Muster der React Native Google Sign In Dokumentation:

• rawNonce geht an Supabase signInWithIdToken()
• Supabase erstellt einen Hash von rawNonce und vergleicht ihn mit dem nonceDigest der im ID-Token von Google Sign-In enthalten ist
• nonceDigest (SHA-256 Hash, hex-kodiert) geht an den nonce Parameter in den Google Sign-In APIs

Automatischer Retry

Die Implementierung enthält eine automatische Retry-Logik:

• Schlägt die JWT-Validierung beim ersten Versuch fehl, erfolgt ein Logout und ein erneuter Versuch
• Dies deckt Fälle ab, in denen gecachte Tokens falsche Nonces enthalten könnten
• Falls auch der Retry fehlschlägt, wird ein Fehler zurückgegeben

Fehlerbehebung

Falls die Authentifizierung fehlschlägt:

• Redirect funktioniert nicht: Stellen Sie sicher, dass Sie aufrufen isLoggedIn() beim Mount der Komponente (siehe Beispiel oben)
• Ungültige Audience: Überprüfe, ob deine Google Client IDs in der Google Cloud Console und in Supabase übereinstimmen
• Autorisierte Redirect-URLsStelle sicher, dass die autorisierten Redirect-URLs sowohl in der Google Cloud Console als auch in Supabase konfiguriert sind
• Nonce-Mismatch: Prüfe die Console-Logs – die Funktion versucht es automatisch erneut, du kannst aber bei Bedarf manuell ausloggen
• Token-Validierung fehlgeschlagen: Stelle sicher, dass du mode: 'online' im initialize-Aufruf verwendest, um ein idToken zu erhalten
• Lies die Beispiel-App code als Referenz

Weiter mit Supabase Google Login im Web

Wenn Sie ... verwenden Supabase Google Login im Web um Authentifizierungs- und Account-Flows zu planen, verbinde es mit Mit @capgo/capacitor-social-login für die native Funktion in „Mit @capgo/capacitor-social-login“, @capgo/capacitor-social-login für das Implementierungsdetail in @capgo/capacitor-social-login, @capgo/capacitor-passkey für das Implementierungsdetail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für das Implementierungsdetail in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für das Implementierungsdetail in der Zwei-Faktor-Authentifizierung.