Configura l'autenticazione Supabase con il plugin Capacitor di login sociale

Il configurare l'autenticazione nei dispositivi mobili può essere complesso, ma combinando Supabase con il Capgo plugin di login sociale rende tutto più semplice. Questo tutorial vi guiderà attraverso l'integrazione dell'autenticazione sociale (Google, Apple, Facebook) con Supabase nel vostro Capacitor app.

Supabase fornisce un backend come servizio con autenticazione integrata, mentre il plugin @capgo/capacitor-social-login offre un' autenticazione sociale nativa su piattaforme iOS, Android e web. Per una maggiore integrazione Supabase, @capgo/capacitor-Supabase aggiunge aiuti di autenticazione nativa e accesso JWT. Insieme, forniscono:

Autenticazione sociale senza intoppi
Gestione sicura dei token
Compatibilità cross-platform
Integrazione di database in tempo reale
Gestione degli utenti integrata

Prerequisites

Prima di iniziare, assicurati di avere:

Un progetto Capacitor configurato
Un account e un progetto Supabase
Conti di sviluppatore per i tuoi provider social scelti (Google, Apple, Facebook)

Prima, installa il plugin di Social Login Capgo.

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

Vedi Login Sociale and Supabase plugin pages for platform-specific setup.

Passo 2: Configura il Progetto Supabase

Creare e configurare il tuo progetto Supabase

Creare un progetto Supabase:
- Vai a supabase.com e registrati/accedi
- Clicca “Nuovo Progetto”
- Scegli la tua organizzazione
- Inserisci un Nome del Progetto (ad esempio, “MyApp Auth”)
- Configura un Password del Database (salva questo in modo sicuro)
- Scegli la tua Regione (scegli quella più vicina ai tuoi utenti)
- Clicca su “Crea nuovo progetto”
Ottieni le credenziali del tuo progetto:
- Una volta creato, vai a Impostazioni > API
- Copia le tue URL del progetto ad esempio, https://your-project-ref.supabase.co)
- Copia il tuo pubblico anonimo API chiave
- Salva questi per usarli in seguito nel tuo app

Configura Impostazioni di autenticazione

Configura impostazioni di autenticazione generali:
- Vai a Autenticazione > Impostazioni
- Sotto Impostazioni generali:
  - Configura URL del sito a quella del tuo app (ad esempio, https://yourdomain.com o http://localhost:3000 per lo sviluppo)
  - Aggiungi indirizzi URL aggiuntivi se necessario: se necessario:
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
(facoltativo ma consigliato): (opzionale ma consigliato):
- Under Impostazioni SMTPConfigura il tuo provider di posta elettronica
- Abilita le conferme via email e i reset dei password
- Per lo sviluppo, puoi utilizzare il servizio di posta elettronica integrato

Accedi alla sezione dei provider:
- Vai a Autenticazione > Provider nella tua dashboard di Supabase
- Vedrai una lista dei provider social disponibili
- Ogni provider ha un Abilita interruttore e opzioni di configurazione

Ora configuriamo ogni provider sociale in dettaglio:

Configurazione dell'autenticazione Google in Supabase

Prima di tutto, ottieni le tue credenziali OAuth Google:

Segui la nostra guida completa di configurazione Google: Configurazione dell'autenticazione Google

Questa guida copre:

Creazione di un progetto Google Cloud
Configurazione delle credenziali OAuth 2.0 per web, iOS e Android
Configurazione dello schermo di consenso
Ottieni gli ID client e le chiavi richiesti

Dopo aver completato la configurazione Google, configurala in Supabase:

Abilita il provider Google in Supabase:
- Nella tua dashboard di Supabase, vai a Autenticazione > Provider
- Trova Google e attivalo ATTIVATO
- Riempi le informazioni:
  - ID del client: Il tuo ID OAuth Google Web ID del client di Google (dal Google Cloud Console)
  - Segreto del Client: Il tuo Google OAuth Web Segreto del Client
  - URL di reindirizzamento: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
- Clicca “Salva”

Importante: Utilizza il ID del Client Web e Segreto del Client Web in Supabase, anche se stai creando un'app mobile. Gli ID dei clienti mobili vengono utilizzati separatamente nella configurazione del plugin.

Impostazione dell'autenticazione Apple in Supabase

Ottieni le credenziali Apple:

Follow our detailed Apple setup guide: Impostazione dell'autenticazione Apple

Questa guida copre:

Impostazione del tuo account di sviluppatore Apple
Creazione degli ID App e degli ID Servizio
Configurazione della capacità di accesso con Apple
Generazione delle chiavi private richieste
Impostazione specifica per piattaforma per iOS, Android e Web

Dopo aver completato la configurazione di Apple, configuralo in Supabase:

Abilita il provider Apple in Supabase:
- Vai a Autenticazione > Provider e attiva Apple ATTIVO
- Riempi le informazioni di configurazione:
  - ID del client: Il tuo identificatore di servizio (ad esempio, com.yourapp.signin)
  - Segreto del client: Genera questo JWT utilizzando la tua chiave privata di Apple (vedi Supabase documentazione Apple per il formato JWT)
  - URL di reindirizzamento: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
- Clicca “Salva”

Nota: la configurazione di autenticazione Apple è la più complessa a causa delle richieste di Apple per gli ID di servizio, le chiavi private e la generazione di JWT. Segui attentamente la nostra documentazione per ogni piattaforma.

Configurazione dell'autenticazione Facebook in Supabase

Ottieni le credenziali Facebook:

Follow our complete Facebook setup guide: Configurazione dell'autenticazione Facebook

Questa guida copre:

Creare un account di sviluppatore Facebook e un'app
Aggiungere il prodotto Facebook Login
Configurare gli URI di reindirizzamento OAuth
Ottenere il tuo ID App, Segreto App e Token Client
Configurazione specifica per piattaforma per iOS e Android

Dopo aver completato la configurazione di Facebook, configuralo in Supabase:

Abilitare il provider Facebook in Supabase:
- Vai a Autenticazione > Provider e attiva Facebook SI
- Compilare la configurazione:
  - ID del client: Il tuo ID App Facebook
  - Segreto del client: Il tuo segreto App Facebook
  - URL di reindirizzamento: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
- Clicca “Salva”

Importante: Assicurati di aggiungere l'URL di callback di Supabase (https://your-project-ref.supabase.co/auth/v1/callbackaggiungere al tuo app Facebook URI di Redirect OAuth valide nelle impostazioni di accesso Facebook.

Note importanti sulla configurazione di Supabase

Livello di sicurezza per riga (RLS):

Dopo aver configurato l'autenticazione, abilita RLS sulle tue tabelle
Vai a Database > Tabelle e attiva Abilita RLS per ogni tabella
Creare politiche per controllare l'accesso ai dati in base agli utenti autenticati

Gestione degli utenti:

Visualizza gli utenti autenticati in Autenticazione > Utenti
Monitora gli eventi di autenticazione in Autenticazione > Log
Configura i modelli di email in Autenticazione > Modelli di email

Test della configurazione:

Utilizza l'outil di test di autenticazione integrato di Supabase
Vai a Autenticazione > Utenti e clicca “Invita l'utente” a testare i flussi di posta elettronica
Controlla il Logs Sezione per gli errori di autenticazione

Ora che Supabase è configurato, è necessario configurare il plugin di accesso sociale con le credenziali corrispondenti. ImportantIl plugin richiede i credenziali OAuth da parte di provideri originali (non da Supabase), mentre Supabase gestisce l'autenticazione server-side.

Come Funziona il Flusso di Autenticazione

Prima di immergersi nella configurazione, comprendi il flusso:

Plugin autentica con il provider sociale (Google/Apple/Facebook) nativamente
Plugin riceve i token (token di accesso, token ID) dal provider
La tua app invia questi token a Supabase utilizzando signInWithIdToken()
Supabase verifica i token con il provider e crea una sessione utente
Supabase restituisce il suo proprio token JWT per le richieste autenticate dell'app

Configurazione del Plugin Google

Il plugin richiede il tuo ID del client Web per tutte le piattaforme e facoltativamente un ID del client iOS per funzionalità specifiche di iOS:

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'
  }
});

Punti chiave per Google:

Utilizza il ID del client Web (non ID dei client Android/iOS) per il webClientId campo
Il plugin funzionerà su tutte le piattaforme con solo l'ID del client Web
Il iOSClientId è facoltativo e viene utilizzato solo per funzionalità iOS specifiche di Google

Configurazione Plugin Apple

La configurazione Apple differisce tra iOS e Android:

Per iOS (sign-in Apple nativo):

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

Per Android/Web (richiede ID Servizio):

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'
  }
});

Punti chiave per Apple:

iOS utilizza il Sign in con Apple nativo (nessuna configurazione aggiuntiva necessaria)
Android/Web richiede l'ID Servizio che hai creato nel portale dello sviluppatore Apple
La redirectUrl deve corrispondere a quanto configurato in entrambi il portale dello sviluppatore Apple e Supabase

Configurazione Plugin Facebook

Facebook richiede il tuo ID App e Token Client:

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
  }
});

Punti chiave per Facebook:

Utilizza lo stesso ID App che hai configurato in Supabase
Token Client si trova nei Impostazioni base del tuo App Facebook
limitedLogin: true abilita la funzione di accesso limitato di Facebook (solo per iOS)
ImportanteVedi il nostro Guida di configurazione Facebook per informazioni dettagliate sull'accesso limitato, compresi i requisiti di ATT

Completa l'inizializzazione del Plugin

Ecco come inizializzare tutti i provider insieme:

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'
    }
  });
}

Note importante:

Chiama initialize() once allorché l'applicazione si avvia, non prima di ogni accesso
quando il tuo app inizia, non prima di ogni login
Le credenziali qui riportate provengono dalle I credenziali qui sono daprovider originali
Assicurati che le credenziali del provider corrispondano a quanto configurato in Supabase

Passo 5: Configura il Client Supabase

Passo 5: Configura il client di Supabase

npm install @supabase/supabase-js

Crea un servizio Supabase:

// 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,
  },
});

Passo 6: Implementare il Flusso di Autenticazione

Creare un servizio di autenticazione che combina entrambi:

// 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();

Passo 7: Implementare nel tuo App

Inizializzare il servizio e gestire l'autenticazione:

// 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();

Creare pulsanti di accesso nel tuo UI:

// 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);
  }
}

Passo 8: Configurazione Specifica per Piattaforma

Configurazione iOS

Per ulteriori istruzioni di configurazione iOS, consultare le nostre guide specifiche per piattaforma.

Configurazione iOS di Google - Schemi di URL, configurazione di Info.plist
Configurazione iOS di Apple - Configurazione della capacità di accesso con Apple
Impostazione Facebook iOS Guida generale di Facebook - Configurazione Facebook SDK

Riepilogo rapido - Aggiungi a 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>

Segui le guide collegamenti per le istruzioni di configurazione completa del progetto Xcode inclusa.

Configurazione Android

Per ulteriori istruzioni di configurazione per Android, consultare le nostre guide specifiche per piattaforma.

Impostazione Google Android - Dati di fingerprint SHA-1, configurazione dei servizi Google Play
Impostazione Android Apple - Configurazione dell'ID del servizio per Android
Configurazione Facebook per Android (in generale guida Facebook) - Integrazione Facebook SDK

Configurazione Android essenziale:

1. Ottieni il tuo fingerprint SHA-1 (richiesto per 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. Configura AndroidManifest.xml - Aggiungi a 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. Aggiungi risorse Facebook a 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>

Segui le guide complete del relativo piattaforma per la configurazione Android, inclusa la configurazione di Google Play Services e la configurazione del nome del pacchetto.

Passo 9: Utilizzo del database Supabase con utenti autenticati

Una volta autenticati gli utenti, puoi utilizzare il database di Supabase con la sicurezza di livello di riga (RLS):

// 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;
  }
}

Considerazioni di sicurezza importanti

Non esporre mai le chiavi sensibili nel tuo client code
Utilizza le variabili di ambiente per la configurazione
Abilita il livello di sicurezza per riga in Supabase
Valida i token se necessario sul tuo backend
Gestisci il rinnovo dei token automaticamente con Supabase

Risolvere Problemi Comuni

Errori di Mancanza di Token

Assicurati che le configurazioni del provider OAuth siano coerenti tra il plugin di login sociale e Supabase.
Verifica che gli URL di reindirizzamento siano configurati correttamente

Problemi Specifici per Piattaforma

iOS: Verifica che l'ID del bundle corrisponda alla configurazione del tuo sviluppatore Apple
Android: Assicurati che le impronte SHA1 siano aggiunte correttamente al Console di Google

Interruzioni del Flusso di Autenticazione

Implementa un corretto trattamento degli errori per problemi di rete
Aggiungi stati di caricamento durante l'autenticazione

Conclusioni

Ora hai un sistema di autenticazione completo che combina il backend robusto di Supabase con le capacità di login sociale native. Questa configurazione fornisce:

Autenticazione sociale sicura e nativa
Gestione dei token senza problemi
Integrazione del database in tempo reale
Compatibilità multi-piattaforma

La combinazione di Supabase e il plugin di accesso sociale Capgo offre una soluzione di autenticazione potente e scalabile per le tue Capacitor app.

Per funzionalità avanzate come l'autenticazione a fattore multipla o asserzioni personalizzaterichieste personalizzate , scopri di più nella e il Documentazione plugin di accesso sociale.

Se stai utilizzando Setup Autenticazione Supabase con Capacitor Plugin di accesso sociale per pianificare l'autenticazione e le flussi di account, connettilo con @capgo/capacitor-login-sociale per i dettagli di implementazione in @capgo/capacitor-login-sociale @capgo/capacitor-chiave di passaggio per i dettagli di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometrico-nativo per i dettagli di implementazione in @capgo/capacitor-biometrico-nativo Autenticazione a due fattori per i dettagli di implementazione in Due-factor authentication, e SSO (Enterprise) per i dettagli di implementazione in SSO (Enterprise).

Configura l'autenticazione Supabase con il plugin di login sociale di Capacitor

Perché Usare Supabase con Social Login?

Prerequisites

Passo 1: Installa e configura il plugin di accesso sociale

Passo 2: Configura il Progetto Supabase

Creare e configurare il tuo progetto Supabase

Configura Impostazioni di autenticazione

Abilita i Provider di Autenticazione Sociale

Passo 3: Configura i provider sociali in Supabase

Configurazione dell'autenticazione Google in Supabase

Impostazione dell'autenticazione Apple in Supabase

Configurazione dell'autenticazione Facebook in Supabase

Note importanti sulla configurazione di Supabase

sezione per eventuali errori di autenticazione

Come Funziona il Flusso di Autenticazione

Configurazione del Plugin Google

Configurazione Plugin Apple

Configurazione Plugin Facebook

Completa l'inizializzazione del Plugin

Passo 5: Configura il Client Supabase

Passo 6: Implementare il Flusso di Autenticazione

Passo 7: Implementare nel tuo App

Passo 8: Configurazione Specifica per Piattaforma

Configurazione iOS

Configurazione Android

Passo 9: Utilizzo del database Supabase con utenti autenticati

Considerazioni di sicurezza importanti

Risolvere Problemi Comuni

Errori di Mancanza di Token

Problemi Specifici per Piattaforma

Interruzioni del Flusso di Autenticazione

Conclusioni

Continua da Setup Autenticazione Supabase con Capacitor Plugin di accesso sociale