Supabase Google Login – Allgemeines Setup

Einführung

In diesem Guide lernst du, wie du Google Sign-In mit Supabase Authentication über das Capacitor Social Login Plugin integrierst. Mit diesem Setup nutzt du natives Google Sign-In auf mobilen Plattformen und verwendest gleichzeitig Supabase Auth für die Backend-Authentifizierung.

Voraussetzungen

Before starting, ensure you have:

1. Ein Supabase-Projekt erstellt hast

2. Lies die Google Login Allgemeines Setup Anleitung zum Setup der Google OAuth-Credentials

3. Die plattformspezifischen Guides für das Setup der Google OAuth-Credentials deiner Zielplattform befolgt hast:

   • 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 nutzen möchtest. Du benötigst diese in Schritt 7 dieser Anleitung.

Google 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 den Google Provider

   

6. Provider aktivieren

   

7. Füge die Client IDs für die geplanten Plattformen hinzu

   

   Hinweis

   Dies umfasst die Web Client ID, die iOS Client ID und die Android Client ID. Je nach Plattform kannst du einige davon überspringen.

8. Klicke auf die Save Button

   

Hinweis

Du DARF NICHT Setup Client Secret (for OAuth) oder Callback URL (for OAuth). Einige Quellen empfehlen zudem das Setzen von Skip nonce checks für Google auf iOS, aber mit diesem Guide ist das nicht nötig.

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

Funktionsweise des Google Sign-In Helpers mit Supabase Authentication

In diesem Abschnitt wird erklärt, wie die Google Sign-In Integration mit Supabase im Hintergrund funktioniert. Das Verständnis dieses Flows hilft dir bei der Implementierung und Fehlersuche im Authentifizierungsprozess.

Vollständige Implementierung

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

1. Nonce-Generierung

Die Implementierung generiert ein sicheres Nonce-Paar gemäß den Supabase Nonce-Anforderungen:

// 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-sicherer Zufallsstring (64 Hex-Zeichen)
• nonceDigest: SHA-256-Hash von rawNonce (hex-kodiert)
• nonceDigest wird an Google Sign-In übergeben → Google fügt den Nonce-Digest in den ID-Token ein
• rawNonce wird an Supabase übergeben → Supabase hasht den Nonce und vergleicht ihn mit dem Token-Nonce

2. Google Sign-In

Die Funktion initialisiert das Plugin und meldet sich mit 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 das 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 an Supabase erfüllt mehrere wichtige Zwecke:

1. Ungültige Requests verhindern: Wenn das Token eine falsche Audience oder einen Nonce-Mismatch hat, wird Supabase das Token ohnehin ablehnen. Eine vorherige Validierung vermeidet unnötige API Aufrufe und liefert klarere Fehlermeldungen.

2. Token-Caching-Probleme: Auf einigen Plattformen (besonders iOS) kann das Google Sign-In SDK Token aus Performance-Gründen cachen. Wenn ein gecachtes Token zurückgegeben wird, wurde dieses eventuell mit einem anderen Nonce (oder gar keinem) generiert, was dazu führt, dass Supabase das 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.

3. Sicherheit (iOS): Auf iOS stellt die Validierung sicher, dass das Token für deine spezifischen Google Client IDs ausgestellt wurde, um Sicherheitsrisiken durch die Verwendung von Token für andere Apps zu vermeiden.

4. Besseres Error Handling: Das Erkennen von Problemen vor Supabase ermöglicht eine automatische Retry-Logik, die essenziell ist, um iOS-Caching-Probleme transparent zu handhaben.

If validation fails, the function automatically:

1. Logout bei Google (löscht gecachte Tokens – kritisch unter iOS)
2. Einmaliger Authentifizierungs-Retry (erzwingt neue Token-Generierung mit korrektem Nonce)
3. If retry also fails, returns an error

4. Supabase Sign-In

Schließlich wird das 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 findest du im der Beispiel-App supabaseAuthUtils.ts Datei, die Folgendes enthält:

• getUrlSafeNonce() - Erzeugt URL-sicheren Random Nonce
• sha256Hash() - Hasht String mit SHA-256
• getNonce() - Erzeugt Nonce-Paar
• decodeJWT() - Decodiert JWT-Token
• validateJWTToken() - Validiert JWT Audience und Nonce
• authenticateWithGoogleSupabase() - Haupt-Auth-Funktion mit automatischem Retry

Zusätzliche Beispieldateien

• SupabasePage.tsx - Beispielkomponente mit Redirect-Handling (Web)
• SupabaseCreateAccountPage.tsx - Beispiel: Registrierungsseite

Nächste Schritte

Bitte folge der plattformspezifischen Anleitung für deine Zielplattform:

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

Weiter mit Supabase Google Login - General Setup

Wenn du es nutzt Supabase Google Login – Allgemeines Setup um Authentifizierungs- und Account-Flows zu planen und sie zu verbinden 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.