Einführung in die Supabase-Integration

Übersicht

Dieses Tutorial führt Sie durch die Einrichtung der Supabase-Authentifizierung mit dem Capacitor Social Login-Plugin. Diese Integration ermöglicht es Ihnen, native Social-Login-Anbieter (Google, Apple, Facebook, Twitter) auf mobilen Plattformen zu nutzen, während Sie Supabase Auth für die Backend-Authentifizierung und PostgreSQL für die Datenspeicherung verwenden.

Was du lernen wirst

• So konfigurierst du Supabase Authentication
• So integrierst du das Capacitor Social Login Plugin mit Supabase Auth
• Plattformspezifisches Setup für Android, iOS und Web
• Nonces sicher für Supabase handhaben

Was du benötigst

Stelle vor dem Start sicher, dass du Folgendes hast:

1. Ein Supabase-Projekt

   • Erstelle ein Projekt unter Supabase-Dashboard
   • Google OAuth Provider aktivieren
   • Deine Supabase-Projekt-URL und deinen anon key

2. Supabase JS SDK

   • Installiere Supabase in deinem Projekt:

     npm install @supabase/supabase-js

3. Ein Capacitor-Projekt

   • Eine bestehende Capacitor-Anwendung
   • Capacitor Social Login-Plugin installiert:

     npm install @capgo/capacitor-social-login
     npx cap sync

4. Plattformspezifische Google-Konfiguration

   • Führe die Google Sign-In-Konfiguration für deine Zielplattformen durch:
     • Google Login Android-Setup
     • Google Login iOS-Setup
     • Google Login Web-Setup

Beispielanwendung

Ein vollständiges, funktionierendes Beispiel findest du im Repository:

Code-Repository: Das code Repository findest du hier

Die Beispiel-App zeigt:

• E-Mail/Passwort-Authentifizierung mit Supabase
• Google Sign-In-Integration (Android, iOS und Web)
• Ein einfacher Key-Value-Store mit Supabase PostgreSQL-Tabellen
• Benutzerspezifische Datenspeicherung mit Row Level Security (RLS)

Wichtige Implementierungsdetails

Nonce-Handling

Supabase benötigt aus Sicherheitsgründen ein spezielles Nonce-Handling. Die Implementierung folgt dem React Native Google Sign In Dokumentation:

• Erstelle einen rawNonce (URL-sicheren Zufallsstring)
• Hashen Sie es mit SHA-256, um nonceDigest
• Übergeben nonceDigest an Google Sign-In
• Übergeben rawNonce an Supabase (Supabase hasht ihn intern zum Vergleich)

JWT-Validierung

Die Beispielimplementierung enthält eine JWT-Validierung, um Folgendes sicherzustellen:

• Die Token-Audience stimmt mit deinen konfigurierten Google Client IDs überein
• Die Nonce stimmt mit dem erwarteten Digest überein
• Automatischer Retry bei Validierungsfehlern (besonders wichtig für iOS)

Plattformspezifische Hinweise

• iOS: Token-Caching kann Nonce-Probleme verursachen – die Implementierung regelt dies automatisch
• Web: Must call isLoggedIn() beim Mounten, um OAuth-Redirects zu verarbeiten
• Android: Standardimplementierung mit SHA-1-Fingerprint-Konfiguration

Nächste Schritte

Weiter mit den Setup-Guides:

• Supabase Google Login – Allgemeines Setup - Übersicht und Voraussetzungen
• Android-Setup - Android-spezifische Konfiguration
• iOS-Setup - iOS-spezifische Konfiguration
• Web-Setup - Web-spezifische Konfiguration

Apple Sign-In

• Supabase Apple Login – Allgemeines Setup - Übersicht und Voraussetzungen
• iOS-Setup - iOS-spezifische Konfiguration
• Android-Setup - Android-spezifische Konfiguration

Weiter mit der Supabase-Integration-Einführung

Wenn du es nutzt Einführung in die Supabase-Integration 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.