Capacitor, Supabase e Social Auth in React

Rilascia l'accesso nativo con Google e Apple in un'app React con il supporto di Supabase Auth, e avvolgi la stessa UI in Capacitor senza combattere con i redirect dei browser mobile. Capgo Social Login (@capgo/capacitor-social-login) gestisce le schede native del provider; scambi l'ID token del provider con una sessione Supabase tramite signInWithIdToken.

Questo articolo integra la nostra guida Supabase + Social Login con un React + Vite tutorial completo (layout del progetto, provider, rotte, configurazione Capacitor). Per le dashboard dei provider e le chiavi di piattaforma, continua a usare la documentazione per l'integrazione Supabase e il configurazione generale Google + Supabase. Post correlati: Google sign-in con Capacitor, Apple sign-in con Capacitor, e opzioni di autenticazione in Capacitor.

Indice dei contenuti

• Cosa costruirai
• Flusso di autenticazione generale
• Applicazione React (Vite) di base
• Progetto Supabase e provider Google
• Configura i provider in Supabase
• Inizializza il plugin Social Login
• Client Supabase e layer auth React
• UI di login e rotte protette
• Aggiungi Capacitor all'app React
• Configurazione della piattaforma
• Accesso al database con RLS
• Problemi noti e troubleshooting
• Considerazioni sulla sicurezza

Cosa costruirai

• Un Vite + React + TypeScript web app con tasti di login e vista debug
• Supabase Auth sessioni create da native Google (e opzionale Apple) ID token
• Lo stesso bundle in esecuzione in Capacitor su iOS e Android
• Un flusso Google sicuro con nonce, allineato con l'app di esempio del plugin

Flusso di autenticazione generale

Con @capgo/capacitor-social-login, l'app mobile esegue hai affidarsi a signInWithOAuth redirect all'interno della WebView. Il SDK nativo restituisce un Token ID; Supabase lo valida e rilascia il proprio JWT.

Su web, puoi comunque usare lo stesso plugin (vedi configurazione web di Google). Gestisci eventuali URL di ritorno OAuth nel tuo router se aggiungerai un fallback via browser in seguito.

Applicazione React (Vite) di base

Crea una nuova app (o riutilizza un codebase React esistente):

bun create vite capgo-supabase-auth --template react-ts
cd capgo-supabase-auth
bun install
bun add @supabase/supabase-js @capgo/capacitor-social-login react-router-dom @capacitor/core

Avvia il server di sviluppo:

bun run dev

Struttura della cartella di destinazione:

Aggiungi le variabili d'ambiente in .env.local (non committare mai le chiavi segrete):

VITE_SUPABASE_URL=https://your-project-ref.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-public-key
VITE_GOOGLE_WEB_CLIENT_ID=your-web-client-id.apps.googleusercontent.com
VITE_GOOGLE_IOS_CLIENT_ID=your-ios-client-id.apps.googleusercontent.com
VITE_APPLE_SERVICE_ID=com.yourapp.signin
VITE_SUPABASE_APPLE_CALLBACK_URL=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

Perché usare Supabase con Social Login?

Supabase fornisce un robusto backend-as-a-service con autenticazione integrata, mentre il @capgo/capacitor-social-login plugin offre l'autenticazione social nativa su iOS, Android e web. Per un'integrazione più stretta con Supabase, @capgo/capacitor-supabase aggiunge helper di auth nativi e accesso JWT. Insieme, offrono:

• Autenticazione social fluida
• Gestione sicura dei token
• Compatibilità cross-platform
• Integrazione database in tempo reale
• Gestione utenti integrata

Prerequisiti

Prima di iniziare, assicurati di aver:

• Un progetto Capacitor configurato
• Un account e un progetto Supabase
• Account developer per i provider social scelti (Google, Apple, Facebook)

Passaggio 1: Installa e configura il plugin Social Login

Per prima cosa, installa il plugin Capgo Social Login:

bun add @capgo/capacitor-social-login

Esegui bunx cap sync dopo aggiungi Capacitor e le piattaforme native in Aggiungi Capacitor all'app React. La guida dedicata a Vite qui sotto funziona nel browser prima di questo passaggio.

Guarda il Social Login e Supabase plugin pages for platform-specific setup.

Passaggio 2: Configura il progetto Supabase

Crea e configura il tuo progetto Supabase

1. Crea un progetto Supabase:

   • Vai su supabase.com e registrati o accedi
   • Clicca su “Nuovo Progetto”
   • Scegli la tua organizzazione
   • Inserisci un Nome del progetto (es. “MyApp Auth”)
   • Imposta una Password del database (salvala in modo sicuro)
   • Seleziona la tua Regione (scegli quella più vicina ai tuoi utenti)
   • Clicca su “Crea nuovo progetto”

2. Ottieni le credenziali del progetto:

   • Una volta creato, vai su Impostazioni > API
   • Copia il tuo URL del progetto (es. https://your-project-ref.supabase.co)
   • Copia il tuo anon public Chiave API
   • Salvali per usarli dopo nella tua app

Configura le impostazioni di Authentication

3. Configura le impostazioni generali di autenticazione:

   • Vai su Autenticazione > Impostazioni
   • Sotto Impostazioni generali:
     • Imposta URL del sito all'URL della tua app (es. https://yourdomain.com o http://localhost:3000 per lo sviluppo)
     • Aggiungi altri URL di redirect se necessario:

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

4. Configura le impostazioni email (opzionale ma consigliato):

   • Sotto Impostazioni SMTP, configura il tuo provider email
   • Questo abilita le conferme email e il reset della password
   • Per lo sviluppo, puoi usare il servizio email integrato

Abilita i Social Authentication Providers

5. Accedi alla sezione providers:
   • Vai su Autenticazione > Provider nel tuo dashboard Supabase
   • Vedrai un elenco di social provider disponibili
   • Ogni provider ha un Abilita opzioni di toggle e configurazione

Ora configuriamo ogni social provider nel dettaglio:

Passaggio 3: Configura i Social Provider in Supabase

Configurazione dell'autenticazione Google in Supabase

Per prima cosa, ottieni le tue credenziali Google OAuth:

Segui la nostra guida completa alla configurazione di Google: Configurazione Autenticazione Google

Questa guida include:

• Creazione di un progetto Google Cloud
• Configurazione credenziali OAuth 2.0 per web, iOS e Android
• Configurazione della schermata di consenso
• Ottenimento dei Client ID e dei secret necessari

Dopo aver completato la configurazione di Google, impostalo in Supabase:

Segui lo standard Guida generale Supabase + Google per gli screenshot di ogni dashboard.

1. Abilita il provider Google in Supabase:
   • Nel tuo dashboard di Supabase, vai su Authentication > Providers
   • Trova Google e attiva l'interruttore ON
   • Aggiungi la Web, iOS, e Android client ID creati su Google Cloud (salta le piattaforme che non utilizzi)
   • Clicca su Salva

Importante per questo tutorial React: quando utilizzi signInWithIdToken con @capgo/capacitor-social-login, devi hai servono i campi OAuth client secret o callback URL per Google. Registra tutti i client ID che Supabase dovrà accettare per validare i token di ogni piattaforma.

Configurare l'autenticazione Apple in Supabase

Ottieni le credenziali Apple:

Follow our detailed Apple setup guide: Configurazione Apple Authentication

Questa guida include:

• Configurazione del tuo account Apple Developer
• Creazione di App ID e Service ID
• Configurazione della capability Sign in with Apple
• Generazione delle chiavi private necessarie
• Configurazione specifica per iOS, Android e Web

Dopo aver completato la configurazione Apple, impostala in Supabase:

1. Abilita il provider Apple in Supabase:
   • Vai su Authentication > Providers e attiva Apple ON
   • Compila la configurazione:
     • ID Client: Il tuo iOS App ID e l'Apple Service ID se distribuisci su entrambe le piattaforme, separati da virgola (ad esempio com.yourapp,com.yourapp.signin). I token iOS usano l'audience App ID; Android e web usano il Service ID. Vedi Supabase Apple generale.
     • Per il flusso di questo tutorial signInWithIdToken con @capgo/capacitor-social-login, devi hai inserire un OAuth client secret o l'URL di callback OAuth di Supabase nel form del provider Apple.
   • Clicca su Salva

Nota: la configurazione dell'autenticazione Apple è la più complessa a causa dei requisiti di Apple per Service ID, chiavi private e URL di redirect specifici per piattaforma. Segui attentamente la nostra documentazione per ogni piattaforma.

Configurare l'autenticazione Facebook in Supabase

Ottieni le credenziali Facebook:

Segui la nostra guida completa per Facebook: Configurazione Facebook Authentication

Questa guida include:

• Creazione di un account e di un'app Facebook Developer
• Aggiunta del prodotto Facebook Login
• Configurazione degli OAuth redirect URI
• Recupero di App ID, App Secret e Client Token
• Configurazione specifica per iOS e Android

Dopo aver configurato Facebook, procedi con Supabase:

1. Abilita il provider Facebook in Supabase:
   • Vai su Autenticazione > Provider e attiva Facebook ON
   • Compila la configurazione:
     • ID Client: Il tuo Facebook App ID
     • Client Secret: Il tuo Facebook App Secret
     • URL di redirect: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
   • Clicca su “Salva”

Importante: Assicurati di aggiungere l'URL di callback di Supabase (https://your-project-ref.supabase.co/auth/v1/callback) alla tua app Facebook URI di reindirizzamento OAuth validi nelle impostazioni di Facebook Login.

Note importanti sulla configurazione di Supabase

Sicurezza a livello di riga (RLS):

• Dopo aver configurato l'autenticazione, abilita la RLS sulle tue tabelle
• Vai su Database > Tables e attiva Abilita RLS per ogni tabella
• Crea policy per controllare l'accesso ai dati in base agli utenti autenticati

Gestione utenti:

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

Test della configurazione:

• Usa lo strumento di test dell'autenticazione integrato in Supabase
• Vai su Autenticazione > Utenti e clicca su “Invita utente” per testare i flussi email
• Consulta la Log sezione per eventuali errori di autenticazione

Passaggio 4: Configura il plugin Social Login

Ora che Supabase è configurato, devi impostare il plugin Social Login con le relative credenziali. Importante: Il plugin richiede le credenziali OAuth dei provider originali (non tramite Supabase), mentre Supabase gestisce l'autenticazione lato server.

Come funziona il flusso di autenticazione

Prima di passare alla configurazione, comprendi il flusso:

1. Il plugin autentica nativamente con il provider social (Google/Apple/Facebook)
2. Il plugin riceve i token (access token, ID token) dal provider
3. La tua app invia questi token a Supabase utilizzando signInWithIdToken()
4. Supabase valida i token con il provider e crea una sessione utente
5. Supabase restituisce il proprio token JWT per le richieste autenticate della tua app

Configurazione Plugin Google

Il plugin richiede il tuo ID Client Web per tutte le piattaforme e, opzionalmente, un ID Client iOS per le 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',
    
    // Use online mode so the plugin returns an idToken for Supabase
    mode: 'online'
  }
});

Punti chiave per Google:

• Usa il ID Client Web (non gli ID client Android/iOS) per il webClientId campo
• Il plugin funzionerà su tutte le piattaforme con il solo Web Client ID
• Il iOSClientId è opzionale e serve solo per le funzioni Google su iOS

Configurazione Plugin Apple

La configurazione Apple differisce tra iOS e Android:

Per iOS (native Apple Sign-In):

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

Per Android/Web (richiede Service ID). Usa le stesse regole di redirect buildApplePluginConfig() del tutorial React:

import { Capacitor } from '@capacitor/core';

const platform = Capacitor.getPlatform();

await SocialLogin.initialize({
  apple:
    platform === 'android'
      ? {
          clientId: 'YOUR_SERVICE_ID',
          redirectUrl:
            'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback',
        }
      : {
          clientId: 'YOUR_SERVICE_ID',
          redirectUrl: window.location.href,
        },
});

Punti chiave per Apple:

• iOS usa il Sign in with Apple nativo (nessuna config extra)
• Android utilizza il tuo Service ID e l'URL di Supabase apple-signin-callback URL della Edge Function
• Web utilizza il tuo Service ID e window.location.href, che deve corrispondere agli Apple Return URLs

Configurazione del plugin Facebook

Facebook richiede il tuo App ID e il Client Token:

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:

• Usa lo stesso App ID che hai configurato in Supabase
• Il Client Token si trova nelle Impostazioni di base della tua app Facebook
• limitedLogin: true abilita il Limited Login di Facebook, attento alla privacy (solo iOS)
• Importante: Scopri i nostri Guida alla configurazione di Facebook per informazioni dettagliate sul Limited Login, incluse le considerazioni su ATT

Inizializzazione completa 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: 'online'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // Prefer buildApplePluginConfig() from the React walkthrough.
      // Android: redirectUrl = Supabase apple-signin-callback Edge Function
      // Web: redirectUrl = window.location.href
    }
  });
}

Note importanti:

• Chiama initialize() una volta all'avvio dell'app, non prima di ogni login
• Devi configurare solo i provider che intendi utilizzare
• Le credenziali qui provengono dai provider originali, non da Supabase
• Assicurati che le credenziali del provider corrispondano a quelle configurate in Supabase

Client React Supabase e layer di auth

Installa il client Supabase se non l'hai già fatto:

bun add @supabase/supabase-js

Crea un singolo client per l'intero albero React:

// src/lib/supabaseClient.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

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

Helper nonce per Google + Supabase

Supabase si aspetta un nonce raw nella signInWithIdToken e a una digest SHA-256 inviato a Google. Il Guida Supabase e Google documenta l'intero flusso. Helper minimi:

// src/auth/nonce.ts
export function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

export async function sha256Hex(message: string): Promise<string> {
  const data = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  return Array.from(new Uint8Array(hashBuffer), (b) => b.toString(16).padStart(2, '0')).join('');
}

export async function createGoogleNoncePair(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hex(rawNonce);
  return { rawNonce, nonceDigest };
}

Integra Social Login + Supabase in un unico modulo (pattern dall' esempio supabaseAuthUtils.ts):

// src/auth/socialLogin.ts
import { Capacitor } from '@capacitor/core';
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from '../lib/supabaseClient';
import { createGoogleNoncePair } from './nonce';

export function isAppleLoginConfigured(): boolean {
  const platform = Capacitor.getPlatform();
  if (platform === 'ios') return true;
  const serviceId = import.meta.env.VITE_APPLE_SERVICE_ID;
  if (!serviceId) return false;
  if (platform === 'android') {
    return Boolean(import.meta.env.VITE_SUPABASE_APPLE_CALLBACK_URL);
  }
  if (platform === 'web') return true;
  return false;
}

function buildApplePluginConfig() {
  const platform = Capacitor.getPlatform();

  if (platform === 'ios') {
    return {};
  }

  if (platform === 'android') {
    return {
      clientId: import.meta.env.VITE_APPLE_SERVICE_ID,
      redirectUrl: import.meta.env.VITE_SUPABASE_APPLE_CALLBACK_URL,
    };
  }

  if (platform === 'web') {
    return {
      clientId: import.meta.env.VITE_APPLE_SERVICE_ID,
      redirectUrl: window.location.href,
    };
  }

  return {};
}

function isGoogleNonceMismatch(error: { message?: string }): boolean {
  return (error.message ?? '').toLowerCase().includes('nonce');
}

let initialization: Promise<void> | null = null;

export function ensureSocialLoginInitialized(): Promise<void> {
  if (!initialization) {
    const initOptions: Parameters<typeof SocialLogin.initialize>[0] = {
      google: {
        webClientId: import.meta.env.VITE_GOOGLE_WEB_CLIENT_ID,
        iOSClientId: import.meta.env.VITE_GOOGLE_IOS_CLIENT_ID,
        mode: 'online',
      },
    };

    if (isAppleLoginConfigured()) {
      initOptions.apple = buildApplePluginConfig();
    }

    initialization = SocialLogin.initialize(initOptions).catch((error) => {
      initialization = null;
      throw error;
    });
  }
  return initialization;
}

async function signInWithGoogleSupabaseOnce(allowNonceRetry: boolean) {
  await ensureSocialLoginInitialized();
  const { rawNonce, nonceDigest } = await createGoogleNoncePair();

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

  const googleResult = result.result;
  if (!googleResult || googleResult.responseType !== 'online' || !googleResult.idToken) {
    throw new Error('Google login did not return an ID token');
  }

  const { data, error } = await supabase.auth.signInWithIdToken({
    provider: 'google',
    token: googleResult.idToken,
    nonce: rawNonce,
  });

  if (error) {
    if (allowNonceRetry && isGoogleNonceMismatch(error)) {
      await SocialLogin.logout({ provider: 'google' });
      return signInWithGoogleSupabaseOnce(false);
    }
    throw error;
  }

  return data;
}

export async function signInWithGoogleSupabase() {
  return signInWithGoogleSupabaseOnce(true);
}

export async function signInWithAppleSupabase() {
  if (!isAppleLoginConfigured()) {
    throw new Error('Apple sign-in is not configured for this platform');
  }
  await ensureSocialLoginInitialized();
  const result = await SocialLogin.login({
    provider: 'apple',
    options: { scopes: ['email', 'name'] },
  });

  const appleIdToken = result.result?.idToken;
  if (!appleIdToken) throw new Error('Apple login did not return an idToken');

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

  if (error) throw error;
  return data;
}

export async function signOutEverywhere() {
  await supabase.auth.signOut();
  await Promise.all([
    SocialLogin.logout({ provider: 'google' }),
    SocialLogin.logout({ provider: 'apple' }),
  ]);
}

Apple initialize per piattaforma (vedi Supabase Apple generale, Android, Web):

• iOS: buildApplePluginConfig() restituisce {}. Native Sign in with Apple usa il tuo bundle ID. No redirectUrl.
• Android: clientId è il tuo Apple Service ID. redirectUrl è la tua Supabase Edge Function (apple-signin-callback). Fai il deploy della funzione, imposta Apple Return URL su quell'endpoint e aggiungi l'intent filter per il deep link dell'app, così il flusso può tornare alla WebView (Guida Android Supabase Apple).
• Web: clientId è il tuo Service ID. redirectUrl è window.location.href, che deve corrispondere a un Return URL in Apple Developer Portal (Guida Web Supabase Apple).

ensureSocialLoginInitialized() aggiunge il apple provider solo quando isAppleLoginConfigured() è true, quindi una configurazione solo Google non invia credenziali Android o Apple web vuote.

Il plugin restituisce result.idToken su tutte le piattaforme (AppleProviderResponse nella @capgo/capacitor-social-login). Registra sia l'iOS App ID che il Service ID in Supabase quando pubblichi su più piattaforme.

Esponi lo stato della sessione ai componenti:

// src/auth/useAuth.tsx
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
  type ReactNode,
} from 'react';
import type { Session } from '@supabase/supabase-js';
import { supabase } from '../lib/supabaseClient';
import { ensureSocialLoginInitialized } from './socialLogin';

type AuthContextValue = {
  session: Session | null;
  loading: boolean;
  initError: string | null;
  clearInitError: () => void;
};

const AuthContext = createContext<AuthContextValue | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [session, setSession] = useState<Session | null>(null);
  const [loading, setLoading] = useState(true);
  const [initError, setInitError] = useState<string | null>(null);

  useEffect(() => {
    void ensureSocialLoginInitialized()
      .then(() => setInitError(null))
      .catch((error) => {
        setInitError(error instanceof Error ? error.message : 'Social login failed to initialize');
      });
    supabase.auth.getSession().then(({ data }) => {
      setSession(data.session);
      setLoading(false);
    });
    const { data: subscription } = supabase.auth.onAuthStateChange((_event, nextSession) => {
      setSession(nextSession);
    });
    return () => subscription.subscription.unsubscribe();
  }, []);

  const clearInitError = useCallback(() => setInitError(null), []);

  const value = useMemo(
    () => ({ session, loading, initError, clearInitError }),
    [session, loading, initError, clearInitError],
  );

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
  return ctx;
}

UI di login React e rotte protette

Pannello di login:

// src/components/LoginPanel.tsx
import { useState } from 'react';
import {
  isAppleLoginConfigured,
  signInWithAppleSupabase,
  signInWithGoogleSupabase,
} from '../auth/socialLogin';
import { useAuth } from '../auth/useAuth';

export function LoginPanel() {
  const { initError, clearInitError } = useAuth();
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const showApple = isAppleLoginConfigured();

  const run = async (action: () => Promise<unknown>) => {
    setBusy(true);
    setError(null);
    try {
      await action();
      clearInitError();
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Sign-in failed');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div>
      <button type="button" disabled={busy} onClick={() => run(signInWithGoogleSupabase)}>
        Continue with Google
      </button>
      {showApple ? (
        <button type="button" disabled={busy} onClick={() => run(signInWithAppleSupabase)}>
          Continue with Apple
        </button>
      ) : null}
      {initError ? <p role="alert">{initError}</p> : null}
      {error ? <p role="alert">{error}</p> : null}
    </div>
  );
}

Vista debug della sessione (sostituisci con la tua UI reale in seguito):

// src/components/SessionDebug.tsx
import { useEffect, useState } from 'react';
import type { User } from '@supabase/supabase-js';
import { supabase } from '../lib/supabaseClient';
import { signOutEverywhere } from '../auth/socialLogin';

export function SessionDebug() {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    supabase.auth.getUser().then(({ data }) => setUser(data.user));
  }, []);

  return (
    <div>
      <button type="button" onClick={() => signOutEverywhere()}>Sign out</button>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </div>
  );
}

Route con react-router-dom:

// src/App.tsx
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { AuthProvider, useAuth } from './auth/useAuth';
import { LoginPanel } from './components/LoginPanel';
import { SessionDebug } from './components/SessionDebug';

function HomePage() {
  const { session, loading } = useAuth();
  if (loading) return <p>Loading…</p>;
  if (session) return <Navigate to="/account" replace />;
  return <LoginPanel />;
}

function AccountPage() {
  const { session, loading } = useAuth();
  if (loading) return <p>Loading…</p>;
  if (!session) return <Navigate to="/" replace />;
  return <SessionDebug />;
}

export default function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/account" element={<AccountPage />} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

Monta l'app in main.tsx come al solito. Dopo un login riuscito con il provider, onAuthStateChange aggiornamenti session e React Router reindirizza l'utente a /account.

Opzionale: Facebook

Facebook segue lo stesso signInWithIdToken pattern con l'access token del plugin. Vedi configurazione di Facebook e il blocco del provider in Passaggio 4.

Aggiungi Capacitor all'app React

Genera il bundle web, poi aggiungi i progetti nativi:

bun run build
bun add @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
bunx cap init "Capgo Auth Demo" com.example.authdemo --web-dir dist
bunx cap add ios
bunx cap add android

Sincronizza dopo ogni build web:

bun run build
bunx cap sync

Apri l'IDE nativo quando sei pronto per i test sui dispositivi:

bunx cap open ios
bunx cap open android

Completa i passaggi per le piattaforme Google e Apple prima di testare sull'hardware:

• Google Android
• Google iOS
• Apple iOS

Deep links e Universal Links

I tutorial che effettuano chiamate supabase.auth.signInWithOAuth all'interno di una WebView spesso richiedono Universal Links o App Links così il sistema operativo restituisce il controllo all'app dopo il redirect di Google. Native Google sign-in con un Token ID evita il loop di redirect perché il plugin non avvia un round trip OAuth nel browser. Apple su Android è diverso: utilizza ancora il redirect dell'Edge Function e un deep link intent filter in modo che la WebView possa riprendere dopo il login Apple.

Puoi comunque configurare i deep link per altre funzioni (reset password, magic link, URL marketing). Aggiungi gli stessi percorsi a Autenticazione > Configurazione URL in Supabase e nel tuo apple-app-site-association / Android intent filter quando aggiungi questi flussi.

Passaggio 8: Configurazione specifica per piattaforma

Configurazione iOS

Per istruzioni dettagliate su iOS, consulta le nostre guide specifiche:

• Configurazione Google su iOS - URL scheme, configurazione Info.plist
• Configurazione Apple su iOS - Configurazione capability Sign in with Apple
• Configurazione Facebook su iOS (nella guida Facebook generale) - Configurazione SDK di Facebook

Riassunto 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 collegate per la configurazione completa di iOS, inclusa quella del progetto Xcode.

Configurazione Android

For detailed Android setup instructions, see our platform-specific guides:

• Configurazione Google Android - Fingerprint SHA-1, configurazione Google Play Services
• Configurazione Apple Android - Configurazione Service ID per Android
• Configurazione Facebook Android (nella guida Facebook generale) - Integrazione di Facebook SDK

Configurazione Android essenziale:

1. Ottieni il tuo fingerprint SHA-1 (necessario 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 le risorse di 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 ufficiali delle piattaforme per completare la configurazione di Android, inclusa l'impostazione di Google Play Services e del package name.

Passaggio 9: Usare il database Supabase con utenti autenticati

Una volta autenticati gli utenti, puoi usare il database di Supabase con la Row Level Security (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 importanti sulla sicurezza

1. Non esporre mai chiavi sensibili nel tuo client code
2. Usa le variabili d'ambiente per la configurazione
3. Abilita la Row Level Security in Supabase
4. Valida i token sul backend se necessario
5. Gestisci il refresh dei token automaticamente con Supabase

Problemi noti e troubleshooting

Nonce mismatch su Google (specialmente iOS)

Se Supabase restituisce un errore di nonce, Google potrebbe aver inviato un ID token in cache. Effettua il logout da Google tramite il plugin, riprova e conferma il passaggio nonceDigest a SocialLogin.login e rawNonce a signInWithIdToken. L' app di esempio tentativi dopo SocialLogin.logout.

Errori sull'audience del token

Registra ogni client ID di Google (web, iOS, Android) nel provider Google di Supabase. La aud claim nell'ID token deve corrispondere a uno di essi.

Tutorial OAuth redirect vs questa guida

Post del blog che utilizzano signInWithOAuth in una WebView può fallire su mobile quando il redirect apre Safari invece della tua app. Meglio il login nativo + signInWithIdToken per Capacitor, oppure segui configurazione web di Social Login per i redirect del browser.

Controlli specifici per piattaforma

• iOS: bundle ID e URL scheme da configurazione Google iOS
• Android: fingerprint SHA-1 in configurazione Google Android
• Vedi troubleshooting del plugin per soluzioni consolidate

Mismatch dei token ed errori di rete

• Allinea le credenziali del provider tra Google Cloud, Supabase e SocialLogin.initialize
• Mostra gli stati di caricamento ed errore in React (vedi LoginPanel sopra)

Conclusione

Ora hai un sistema di autenticazione completo che unisce il backend robusto di Supabase alle funzionalità di social login native. Questa configurazione offre:

• Autenticazione social nativa e sicura
• Gestione fluida dei token
• Integrazione database in tempo reale
• Compatibilità cross-platform

La combinazione di Supabase e del plugin Capgo Social Login offre una soluzione di autenticazione potente e scalabile per le tue app Capacitor.

Per funzionalità più avanzate come autenticazione a più fattori o custom claims, dai un'occhiata alla documentazione di Supabase e il Documentazione del plugin Social Login.

Continua da Setup Supabase Authentication con il plugin Capacitor Social Login

Se stai usando Configura l'autenticazione Supabase con il plugin Capacitor Social Login per pianificare i flussi di autenticazione e account, collegandolo a @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, Autenticazione a due fattori per i dettagli di implementazione in Two-factor authentication, e SSO (Enterprise) per i dettagli di implementazione in SSO (Enterprise).