Einstellung der Supabase-Authentifizierung mit dem Social-Login-Plugin von Capacitor

Die Einstellung der Authentifizierung in mobilen Apps kann komplex sein, aber die Combination mit Supabase und dem __CAPGO_KEEP_0__ Social Login Plugin macht es einfacher. Diese Anleitung führt Sie durch die Integration der sozialen Authentifizierung (Google, Apple, Facebook) mit Supabase in Ihrer __CAPGO_KEEP_0__ App. Wozu Supabase mit Social Login verwenden? Supabase bietet eine robuste Backend-as-a-Service mit integrierter Authentifizierung, während der @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login-Plugin native soziale Authentifizierung auf iOS, Android und Web-Plattformen bietet. Für eine enge Supabase-Integration Capgo Social Login plugin Capacitor

__CAPGO_KEEP_1__

Social Login Plugin @capgo/capacitor-social-login Supabase @capgo/capacitor-supabase füdert native Auth-Hilfsmittel und JWT-Zugriff. Zusammen bieten sie:

• Störungsfreie soziale Authentifizierung
• Sichere Token-Verwaltung
• Kompatibilität auf mehreren Plattformen
• Echtzeit-Datenbankintegration
• Integrierte Benutzerverwaltung

Voraussetzungen

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

• Ein Capacitor-Projekt, das eingerichtet ist
• Ein Supabase-Konto und -Projekt
• Entwicklerkonten für Ihre gewählten sozialen Anbieter (Google, Apple, Facebook)

Schritt 1: Installieren und Konfigurieren des Social-Login-Plugins

Zunächst installieren Sie das Capgo Social-Login-Plugin:

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

Siehe die Social-Login und Supabase Plugin-Seiten für die Plattform-spezifische Einrichtung.

Schritt 2: Einrichten des Supabase-Projekts

Erstellen und Konfigurieren Ihres Supabase-Projekts

1. Erstellen Sie ein Supabase-Projekt:

   • Gehe zu supabase.com und anmelden/anmelden
   • Klicken “Neues Projekt”
   • Wählen Sie Ihre Organisation
   • Ein Projektname (z.B. ‘Meine-App-Auth’)
   • Setzen Sie einen Datenbankpasswort (speichern Sie dies sicher)
   • Wählen Sie Ihre Region Wählen Sie das nächste Projekt für Ihre Benutzer
   • Klicken Sie „Neues Projekt erstellen“

2. Ermitteln Sie Ihre Projektanmeldeinformationen:

   • Nachdem Sie das Projekt erstellt haben, gehen Sie zu Einstellungen > API
   • Kopieren Sie Ihren Projekt-URL (z.B. https://your-project-ref.supabase.co)
   • Kopieren Sie Ihren Anonymen öffentlichen API-Schlüssel
   • Speichern Sie diese für später in Ihrer App

Authentifizierungs-Einstellungen konfigurieren

3. Authentifizierungs-Einstellungen allgemein einrichten:

   • Gehe zu Authentifizierung > Einstellungen
   • Unter Allgemeine Einstellungen:
     • Setze Site-URL auf die URL Ihrer App (z.B. https://yourdomain.com oder http://localhost:3000 für die Entwicklung
     • Hinzufügen von zusätzlichen Umleitungs-URLs falls erforderlich:

       http://localhost:3000
       https://yourdomain.com
       capacitor://localhost (for mobile apps)

4. E-Mail-Einstellungen konfigurieren (optional, aber empfohlen):

   • Unter SMTP-Einstellungen, Ihre E-Mail-Anbieter konfigurieren
   • Dies ermöglicht E-Mail-Bestätigungen und Passwortschutz
   • Für die Entwicklung können Sie die integrierte E-Mail-Dienst verwendet werden

Soziale Authentifizierungsanbieter aktivieren

5. Zugriff auf die Anbieter-Sektion:
   • Gehe zu Authentifizierung > Anbieter deinem Supabase-Dashboard
   • Du siehst eine Liste der verfügbaren sozialen Anbieter
   • Jeder Anbieter hat ein Enable Schaltfläche und Konfigurationsmöglichkeiten

Konfigurieren wir nun jeden sozialen Anbieter im Detail:

Schritt 3: Konfigurieren Sie soziale Anbieter in Supabase

Einrichten der Google-Authentifizierung in Supabase

Zuerst holst du deine Google OAuth-Zertifikate:

Folge unserem umfassenden Google-Einrichtungsleitfaden: Google-Auth-Setup

Dieses Leitfaden umfasst:

• Einen Google-Cloud-Projekt erstellen
• OAuth 2.0-Zertifikate für Web, iOS und Android einrichten
• Die Einwilligungsschaltfläche konfigurieren
• Die erforderlichen Client-IDs und -Geheimnisse erhalten

Nach Abschluss der Google-Einrichtung konfigurieren Sie es in Supabase:

1. Google-Anbieter in Supabase aktivieren:
   • In Ihrem Supabase-Dashboard gehen Sie zu Authentifizierung > Anbieter
   • Finden Sie Google und aktivieren Sie es AN
   • Konfiguration einfüllen:
     • Client-ID: Ihr Google OAuth Web Client-ID (aus dem Google Cloud Console)
     • Client-Secret: Ihr Google OAuth Web Client-Secret
     • Rückruf-URL: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
   • Klicken Sie "Speichern"

WichtigWichtiger Hinweis : Verwenden Sie den Web Client ID und Web Client Secret

in Supabase, selbst wenn Sie eine mobile App entwickeln. Die mobilen Client-IDs werden separat in der Plugin-Konfiguration verwendet.

Einstellung von Apple-Authentifizierung in Supabase

Erhalten Sie Apple-Zertifikate: Apple-Authentifizierungs-Setup

Dieses Leitfaden umfasst:

• Die Einrichtung Ihres Apple-Entwicklerkontos
• Erstellen von App-IDs und Service-IDs
• Konfigurieren der Funktion "Anmelden mit Apple"
• Generieren der erforderlichen privaten Schlüssel
• Plattform-spezifische Einrichtung für iOS, Android und Web

Nach Abschluss der Apple-Einrichtung, konfigurieren Sie sie in Supabase:

1. Apple-Anbieter in Supabase aktivieren:
   • Gehe zu Authentifizierung > Anbieter und klicke auf das Schaltflächentoggle Apfel AN
   • Füllen Sie die Konfiguration ein:
     • Client-ID: Ihre Service-ID-Bezeichner (z.B. com.yourapp.signin)
     • Client-Secret: Generieren Sie diesen JWT mithilfe Ihres Apple-Privatschlüssels (siehe Supabase Apple-Dokumentation für die JWT-Format)
     • Richtlinien-URL: https://your-project-ref.supabase.co/auth/v1/callback (automatisch ausgefüllt)
   • Klicken “Speichern”

Hinweis: Die Apple-Authentifizierung ist aufgrund der Anforderungen von Apple an Service IDs, private Schlüssel und JWT-Generation die komplexeste. Folgen Sie unserer Dokumentation sorgfältig für jede Plattform.

Einstellung von Facebook-Authentifizierung in Supabase

Erhalten Sie Facebook-Zugangsdaten:

Folgen Sie unserem vollständigen Facebook-Einrichtungsleitfaden: Einstellung von Facebook-Authentifizierung

Dieses Leitfaden umfasst:

• Erstellen eines Facebook-Entwicklerkontos und einer App
• Hinzufügen des Facebook-Login-Produkts
• Konfigurieren von OAuth-Redirect-URI
• Erhalten Sie Ihre App-ID, App-Secret und Client-Token
• Plattform-spezifische Konfiguration für iOS und Android

Nach Abschluss der Facebook-Einrichtung, konfigurieren Sie sie in Supabase:

1. Aktivieren Sie den Facebook-Anbieter in Supabase:
   • Gehe zu Authentifizierung > Anbieter und schalte Facebook AN
   • Füllen Sie die Konfiguration aus:
     • Client-ID: Ihre Facebook-App-ID
     • Client-Secret: Dein Facebook-App-Secret
     • Richtlinien-URL: https://your-project-ref.supabase.co/auth/v1/callback (automatisch ausgefüllt)
   • Klicken “Speichern”

WichtigWichtige Hinweise zur Supabase-Konfigurationhttps://your-project-ref.supabase.co/auth/v1/callback: Stelle sicher, dass du die Supabase-Rückruf-URL ( ) in den Facebook-Login-Einstellungen deiner Facebook-App hinzufügst. Wichtige Hinweise zur Supabase-Konfiguration

Zugriffsstufe auf Ebene der Zeilen (RLS):

In den gültigen OAuth-Richtlinien-URIs in den Facebook-Login-Einstellungen deiner Facebook-App hinzufügen.

• Nachdem Sie die Authentifizierung eingerichtet haben, aktivieren Sie RLS auf Ihren Tabellen
• Gehe zu Datenbank > Tabellen und schalte RLS aktivieren für jede Tabelle
• Erstellen Sie Richtlinien, um den Zugriff auf Daten auf der Grundlage von authentifizierten Benutzern zu steuern

Benutzerverwaltung:

• Zeige authentifizierte Benutzer in Authentifizierung > Benutzer
• Überwache Authentifizierungsereignisse in Authentifizierung > Protokolle
• E-Mail-Vorlagen einrichten in Authentifizierung > E-Mail-Vorlagen

Die Konfiguration testen:

• Verwenden Sie das integrierte Authentifizierungstestwerkzeug von Supabase
• Gehe zu Authentifizierung > Benutzer und klicke auf “Invite user” um E-Mail-Flüsse zu testen
• Überprüfe die Protokolle Abschnitt für Authentifizierungsfehler

Schritt 4: Konfigurieren Sie das Social-Login-Plugin

Jetzt, dass Supabase konfiguriert ist, müssen Sie das Social-Login-Plugin mit den entsprechenden Zugriffsberechtigungen einrichten. Wichtig: Das Plugin benötigt die OAuth-Zugriffsberechtigungen von den ursprünglichen Anbietern (nicht von Supabase), während Supabase die Serverauthentifizierung abhandelt.

Wie der Authentifizierungsfluss funktioniert

Bevor Sie in die Konfiguration einsteigen, verstehen Sie den Ablauf:

1. Plugin authentifiziert sich mit dem sozialen Anbieter (Google/Apple/Facebook) natively
2. Plugin erhält Token (Zugriffstoken, ID-Token) vom Anbieter
3. Ihre App sendet diese Token an Supabase mithilfe von signInWithIdToken()
4. Supabase validiert die Token mit dem Anbieter und erstellt eine Benutzersitzung
5. Supabase gibt sein eigenes JWT-Token für die von Ihrer App authentifizierten Anfragen zurück

Google-Plugin-Konfiguration

Das Plugin benötigt Ihre Web Client ID für alle Plattformen und optional einen iOS Client ID für iOS-spezifische Funktionen:

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

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

Hauptsachen für Google:

• Verwenden Sie das Web Client ID (nicht Android/iOS Client IDs) für das webClientId Feld
• Das Plugin funktioniert auf allen Plattformen mit nur dem Web Client ID
• Das iOSClientId ist optional und wird nur für iOS-spezifische Google-Funktionen verwendet

Apple-Plugin-Konfiguration

Die Apple-Konfiguration unterscheidet sich zwischen iOS und Android:

Für iOS (native Apple Sign-In):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Für Android/Web (erfordert Service-ID):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Hauptpunkte für Apple:

• iOS verwendet native Sign in with Apple (keine zusätzliche Konfiguration erforderlich)
• Android/Web erfordert die von Ihnen in Apple Developer Portal erstellte Service-ID
• Der redirectUrl sollte dem entsprechen, was Sie in beiden Apple Developer Portal und Supabase konfiguriert haben

Facebook-Plugin-Konfiguration

Bei Facebook sind App-ID und Client-Token erforderlich:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Hauptpunkte für Facebook:

• Verwenden Sie die gleiche App-ID, die Sie in Supabase konfiguriert haben
• Client-Token finden Sie in den grundlegenden Einstellungen Ihres Facebook-Apps
• limitedLogin: true ermöglicht Facebooks privacy-fokussierte Limited Login-Funktion (nur iOS)
• Wichtig: Siehe unsere Facebook-Einrichtungsanleitung zur detaillierten Limited Login-Information, einschließlich ATT-Betrachtungen

Vollständige Plugin-Initialisierung

Hier ist die Anleitung, alle Anbieter gleichzeitig zu initialisieren:

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

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

Wichtige Hinweise:

• Aufrufen initialize() einmal als Ihre App startet, nicht vor jedem Login
• Sie benötigen nur die Anbieter zu konfigurieren, die Sie verwenden möchten
• Die hier angegebenen Anmeldeinformationen stammen von den ursprünglichen Anbieternnicht von Supabase
• Stellen Sie sicher, dass die Anbieteranmeldeinformationen mit den in Supabase konfigurierten Werten übereinstimmen

Schritt 5: Einrichten des Supabase-Clients

Installieren Sie den Supabase-Client:

npm install @supabase/supabase-js

Erstellen Sie einen Supabase-Dienst:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Schritt 6: Implementieren Sie die Authentifizierungssequenz

Erstellen Sie ein Authentifizierungsdienst, das beide kombiniert:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

Schritt 7: Implementieren Sie es in Ihrer App

Initialisieren Sie den Dienst und bearbeiten Sie die Authentifizierung:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

Erstellen Sie Anmeldebildschirme in Ihrer Benutzeroberfläche:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

Schritt 8: Plattform-spezifische Konfiguration

iOS-Konfiguration

Für detaillierte Anweisungen zur iOS-Einrichtung, sehen Sie sich unsere plattform-spezifischen Anleitungen an:

• Google iOS-Einrichtung - URL-Schemes, Info.plist-Konfiguration
• Apple iOS-Einrichtung - Einrichtung der Sign-in-with-Apple-Fähigkeit
• Facebook iOS-Einrichtung (allgemeine Facebook-Anleitung) - Facebook SDK-Konfiguration

Kurzübersicht - Hinzufügen ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

Folgen Sie den verlinkten Anleitungen für die vollständigen iOS-Einrichtungsanweisungen einschließlich Xcode-Projekt-Konfiguration.

Android-Konfiguration

Für detaillierte Anweisungen zur Android-Einrichtung, sehen Sie sich unsere plattformspezifischen Anleitungen an:

• Google-Android-Einrichtung - SHA-1-Abdrucke, Google Play Services-Konfiguration
• Apple-Android-Einrichtung - Konfiguration der Dienst-ID für Android
• Facebook-Android-Einrichtung (allgemeine Facebook-Anleitung) - Facebook SDK-Integration

Wichtige Android-Einrichtung:

1. Erhalten Sie Ihren SHA-1-Abdruck (erforderlich für Google):

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. Konfigurieren Sie AndroidManifest.xml - Hinzufügen zu android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Fügen Sie Facebook-Ressourcen hinzu zu android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Folgen Sie den verlinkten Plattformleitfäden für die vollständige Android-Konfiguration einschließlich Google Play Services-Einrichtung und Paketnamen-Konfiguration.

Schritt 9: Verwendung der Supabase-Datenbank mit authentifizierten Benutzern

Sobald Benutzer authentifiziert sind, können Sie die Supabase-Datenbank mit Row Level Security (RLS) verwenden:

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

Wichtige Sicherheitsüberlegungen

1. Exponieren Sie keine sensiblen Schlüssel in Ihrem Client code
2. Verwenden Sie Umgebungsvariablen für die Konfiguration
3. Row-Level-Sicherheit aktivieren in Supabase
4. Token gültigstellen auf Ihrem Backend erforderlich
5. Token erneuern automatisch mit Supabase

Häufige Probleme lösen

Token-Mismatch-Fehler

• Stellen Sie sicher, dass die Konfigurationen Ihres OAuth-Anbieters zwischen dem Social-Login-Plugin und Supabase übereinstimmen
• Überprüfen Sie, ob die Redirect-URLs korrekt konfiguriert sind

Plattform-spezifische Probleme

• iOS: Überprüfen Sie, ob Ihr Bundle-Id Ihren Apple-Entwickler-Konfiguration entspricht
• Android: Stellen Sie sicher, dass SHA1-Fingerabdrücke korrekt in Google Console hinzugefügt wurden

Authentifizierungsablauf-Unterbrechungen

• Implementieren Sie eine ordnungsgemäße Fehlerbehandlung für Netzwerkprobleme
• Fügen Sie während der Authentifizierung Ladezustände hinzu

Zusammenfassung

Sie haben nun ein vollständiges Authentifizierungssystem, das Supabases robusten Backend mit nativen sozialen Anmeldefunktionen kombiniert. Diese Konfiguration bietet:

• Sichere, native soziale Authentifizierung
• Schlüsselloser Token-Management
• Echtzeit-Datenbankintegration
• Plattformübergreifende Kompatibilität

Die Combination von Supabase und dem Capgo Social-Login-Plugin bietet eine leistungsstarke, skalierbare Authentifizierungslösung für Ihre Capacitor Apps.

Mehrere fortschrittliche Funktionen wie Multi-Faktor-Authentifizierung oder HTML text fragment from a longer Capgo UI string (parent key `alternatives_cta_questions`). Page/area: Capacitor live-update alternatives comparison page. Role: Long marketing or legal paragraph. Seen in: page alternatives.astro. Preserve Capgo product/brand and developer terms exactly. Message key `alternatives_cta_questions` (Alternatives CTA Questions). | HTML text fragment from a longer Capgo UI string (parent key `appflow_cta_questions`). Page/area: Appflow comparison / migration marketing copy. Role: Long marketing or legal paragraph. Seen in: page ionic-appflow.astro. Preserve Capgo product/brand and developer terms exactly. Message key `appflow_cta_questions` (Appflow CTA Questions). | HTML text fragment from a longer Capgo UI string (parent key `capwesome_cta_questions`). Page/area: Capawesome comparison page. Role: Long marketing or legal paragraph. Seen in: page capwesome.astro. Preserve Capgo product/brand and developer terms exactly. Message key `capwesome_cta_questions` (Capwesome CTA Questions). | HTML text fragment from a longer Capgo UI string (parent key `consulting_faq_subtitle`). Page/area: Consulting services page. Role: Section subtitle or tagline. Seen in: page consulting.astro. Preserve Capgo product/brand and developer terms exactly. Message key `consulting_faq_subtitle` (Consulting FAQ Subtitle). | Seite/area: Appflow-Vergleichs-/Migrationsmarketing. Rolle: Kurze UI-Bezeichnung oder Navigationselement. Gesehen in: Seite ionic-appflow.astro, Seite ionic-enterprise-plugins.astro, Seite solutions/ionic-enterprise-plugins.astro. Nachrichten Schlüssel `appflow_plugins_or` (Appflow-Plugins-oder)Benutzerdefinierte Ansprüche , schauen Sie sich die Supabase-Dokumentation und die.

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin

Fortsetzen Sie mit der Einrichtung von Supabase Authentifizierung mit __CAPGO_KEEP_0__ Social Login Plugin Setup Supabase Authentication with Capacitor Social Login Plugin Einrichtung von Supabase Authentifizierung mit __CAPGO_KEEP_0__ Social Login Plugin verwenden, um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit @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 Zwei-Faktor-Authentifizierung für die Implementierungsdetails in der Zwei-Faktor-Authentifizierung und SSO (Unternehmen) für die Implementierungsdetails in SSO (Unternehmen).