Capacitor, Supabase et l'authentification sociale en React

Déployez la connexion native Google et Apple dans une React application, et adossez-l’à Supabase Auth, et enveloppez la même interface dans Capacitor sans lutter contre les redirections des navigateurs mobiles. Capgo Social Login avec Capacitor (@capgo/capacitor-social-login) gère les feuilles de calcul du fournisseur natif ; vous échangez le token ID du fournisseur contre une session Supabase avec signInWithIdToken.

Cet article complète notre guide Supabase + Social Login existant avec un React + Vite guide (structure du projet, providers, routes, configuration de Capacitor). Pour les dashboards des providers et les clés de plateforme, continuez d'utiliser le documentation d'intégration Supabase et le configuration générale Google + Supabase. Articles similaires : Connexion Google avec Capacitor, Connexion Apple avec Capacitor, et Options d'authentification dans Capacitor.

Table des matières

Ce que vous allez construire
Flux d'authentification global
Application React (Vite) de base
Projet Supabase et fournisseur Google
Configurer les fournisseurs dans Supabase
Initialiser le plugin Social Login
Client Supabase et couche d'auth React
Interface de connexion et routes protégées
Ajouter Capacitor à l'app React
Configuration des plateformes
Accès à la base de données avec RLS
Problèmes connus et dépannage
Considérations de sécurité

Ce que vous allez construire

Un Vite + React + TypeScript application web avec boutons de connexion et vue de debug une fois connecté
Supabase Auth sessions créées depuis le natif Google (et optionnel Apple) jetons ID
Le même bundle s'exécutant dans Capacitor sur iOS et Android
Un flux Google sécurisé par nonce, aligné avec l'application d'exemple du plugin

Flux d'authentification global

Avec @capgo/capacitor-social-login, l'application mobile effectue pas compter sur signInWithOAuth redirections dans la WebView. Le SDK natif renvoie un token ID; Supabase le valide et génère son propre JWT.

Flux de l'interface React via le Social Login Capgo et Google vers Supabase Auth

Activé web, vous pouvez toujours utiliser le même plugin (voir configuration Google web). Gérez les URL de retour OAuth dans votre routeur si vous ajoutez un fallback navigateur plus tard.

Application React de base (Vite)

Créez une nouvelle application (ou réutilisez un codebase React existant) :

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

Lancez le serveur de dev :

bun run dev

Serveur de dev Vite local après l'installation de Supabase et Social Login

Structure du dossier cible :

Structure src suggérée pour les helpers d'auth Supabase et les pages React

Ajoutez les variables d'environnement dans .env.local (ne commitez jamais de secrets) :

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

Supabase fournit un backend-as-a-service robuste avec l'authentification intégrée, tandis que le @capgo/capacitor-social-login plugin offre une authentification sociale native sur iOS, Android et le web. Pour une intégration Supabase plus poussée, @capgo/capacitor-supabase ajoute des helpers d'authentification natifs et l'accès JWT. Ensemble, ils offrent :

Une authentification sociale fluide
Une gestion sécurisée des tokens
Une compatibilité multiplateforme
Intégration de base de données en temps réel
Une gestion des utilisateurs intégrée

Prerequisites

Avant de commencer, assurez-vous d'avoir :

Un projet Capacitor configuré
Un compte et un projet Supabase
Des comptes développeur pour les fournisseurs d'identité sociale choisis (Google, Apple, Facebook)

Tout d'abord, installez le plugin Capgo Social Login :

bun add @capgo/capacitor-social-login

Exécutez bunx cap sync après vous ajoutez Capacitor et les plateformes natives dans Ajouter Capacitor à l'app React. Le tutoriel ci-dessous, dédié à Vite, fonctionne dans le navigateur avant cette étape.

Consultez le Connexion sociale et Supabase plugin pages for platform-specific setup.

Étape 2 : Configurer le projet Supabase

Checklist du dashboard Supabase pour activer Google avec l'authentification par ID token

Créer et configurer votre projet Supabase

Créer un projet Supabase:
- Accéder à supabase.com et s'inscrire ou se connecter
- Cliquez « Nouveau projet »
- Choisissez votre organisation
- Entrez un Nom du projet (ex. : « MyApp Auth »)
- Définissez un Mot de passe de la base de données (conservez-l’en lieu sûr)
- Sélectionnez votre Région (choisissez la plus proche de vos utilisateurs)
- Cliquez « Create new project »
Récupérez les identifiants de votre projet:
- Une fois créé, rendez-vous dans Paramètres > API
- Copiez votre URL du projet (ex., https://your-project-ref.supabase.co)
- Copiez votre anon public clé API
- Save these for later use in your app

Configurer les paramètres d'authentification

Configurez les paramètres d'authentification généraux:
- Accéder à Authentification > Paramètres
- Inférieur à Paramètres généraux:
  - Définissez URL du site vers l’URL de votre app (ex. : https://yourdomain.com ou http://localhost:3000 pour le développement)
  - Ajouter d’autres URL de redirection si nécessaire :
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
Configurer les paramètres d’e-mail (optionnel mais recommandé) :
- Inférieur à Paramètres SMTP, configurez votre fournisseur d'e-mail
- This enables email confirmations and password resets
- Pour le développement, vous pouvez utiliser le service d'e-mail intégré

Accédez à la section des fournisseurs:
- Accéder à Authentification > Fournisseurs dans votre dashboard Supabase
- Vous verrez une liste des fournisseurs sociaux disponibles
- Chaque fournisseur possède un Activer options de bascule et de configuration

Configurons maintenant chaque fournisseur social en détail :

Configuration de l'authentification Google dans Supabase

Tout d'abord, récupérez vos identifiants Google OAuth :

Suivez notre guide complet de configuration Google : Configuration de l'authentification Google

Ce guide couvre :

La création d'un projet Google Cloud
La configuration des identifiants OAuth 2.0 pour le web, iOS et Android
La configuration de l'écran de consentement
La récupération des Client IDs et secrets requis

Une fois la configuration Google terminée, configurez-la dans Supabase :

Consultez la Guide général Supabase + Google pour les captures d'écran de chaque dashboard.

Activer le fournisseur Google dans Supabase:
- Dans votre dashboard Supabase, allez dans Authentification > Fournisseurs
- Trouvez Google et activez l'option Activé
- Ajouter le Le Web, iOS, et Android les client IDs créés dans Google Cloud (ignorez les plateformes que vous ne déployez pas)
- Cliquez Enregistrer

Important pour ce tutoriel React : lorsque vous utilisez signInWithIdToken par @capgo/capacitor-social-login, vous devez pas besoin de l'OAuth secret client ou des champs d'URL de callback pour Google. Enregistrez tous les client IDs que Supabase devra accepter lors de la validation des tokens de chaque plateforme.

Configuration de l'authentification Apple dans Supabase

Récupérez les identifiants Apple :

Suivez notre guide détaillé pour la configuration Apple : Configuration de l'authentification Apple

Ce guide couvre :

Configuration de votre compte Apple Developer
Création des App IDs et des Service IDs
Configuration de la capacité Sign in with Apple
Génération des clés privées requises
Configuration spécifique par plateforme pour iOS, Android et le Web

Une fois la configuration Apple terminée, configurez-la dans Supabase :

Activer le fournisseur Apple dans Supabase:
- Accéder à Authentification > Fournisseurs et activez Apple Activé
- Remplissez la configuration :
  - ID client: Votre App ID iOS et votre Apple Service ID pour le déploiement sur les deux plateformes, séparés par une virgule (par exemple com.yourapp,com.yourapp.signin). Les tokens iOS utilisent l'audience App ID ; Android et le web utilisent le Service ID. Voir Supabase Apple général.
  - Pour ce tutoriel, signInWithIdToken flux avec @capgo/capacitor-social-login, vous pas un client secret OAuth ou l'URL de callback OAuth Supabase est requis dans le formulaire du fournisseur Apple.
- Cliquez Enregistrer

Remarque: la configuration de l'authentification Apple est la plus complexe en raison des exigences d'Apple concernant les Service IDs, les clés privées et les URL de redirection spécifiques à chaque plateforme. Suivez attentivement notre documentation pour chaque plateforme.

Configurer l'authentification Facebook dans Supabase

Récupérez les identifiants Facebook :

Suivez notre guide complet pour configurer Facebook : Configuration de l'authentification Facebook

Ce guide couvre :

Création d'un compte et d'une application Facebook Developer
Ajout du produit Facebook Login
Configuration des URI de redirection OAuth
Récupération de l'App ID, de l'App Secret et du Client Token
Configuration spécifique par plateforme pour iOS et Android

Une fois la configuration Facebook terminée, configurez-la dans Supabase :

Activer le fournisseur Facebook dans Supabase:
- Accéder à Authentification > Fournisseurs et activez Facebook Activé
- Remplissez la configuration :
  - ID client: Votre ID d'application Facebook
  - Secret client: Votre secret d'application Facebook
  - URL de redirection: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
- Cliquez “Save”

Important: Assurez-vous d'ajouter l'URL de callback Supabase (https://your-project-ref.supabase.co/auth/v1/callback) à votre application Facebook dans les URI de redirection OAuth valides des paramètres de Facebook Login.

Notes importantes sur la configuration Supabase

Row Level Security (RLS) :

Une fois l'authentification configurée, activez le RLS sur vos tables
Accéder à Database > Tables et activez Activer le RLS pour chaque table
Créez des politiques pour contrôler l'accès aux données selon les utilisateurs authentifiés

Gestion des utilisateurs :

Consultez les utilisateurs authentifiés dans Authentification > Utilisateurs
Surveillez les événements d'authentification dans Authentication > Logs
Configurez les templates d'e-mail dans Authentication > Email Templates

Test de la configuration :

Utilisez l'outil de test d'authentification intégré de Supabase
Accéder à Authentification > Utilisateurs et cliquez sur « Inviter un utilisateur » pour tester les flux d'e-mails
Consultez la Logs pour détecter d'éventuelles erreurs d'authentification

Maintenant que Supabase est configuré, vous devez paramétrer le plugin Social Login avec les identifiants correspondants. Important : le plugin a besoin des identifiants OAuth des fournisseurs d'origine (pas via Supabase), tandis que Supabase gère l'authentification côté serveur.

Fonctionnement du flux d'authentification

Avant de passer à la configuration, comprenez le flux :

Le plugin authentifie l'utilisateur nativement avec le fournisseur social (Google/Apple/Facebook)
Le plugin reçoit les tokens (access token, ID token) du fournisseur
Votre application envoie ces tokens à Supabase en utilisant signInWithIdToken()
Supabase valide les tokens auprès du fournisseur et crée une session utilisateur
Supabase renvoie son propre token JWT pour les requêtes authentifiées de votre application

Configuration du plugin Google

Le plugin nécessite votre ID client Web pour toutes les plateformes et, en option, un ID client iOS pour les fonctionnalités spécifiques à 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'
  }
});

Points clés pour Google :

Utilisez le ID client Web (et non les client IDs Android/iOS) pour le webClientId champ
Le plugin fonctionnera sur toutes les plateformes avec l'ID client Web uniquement
Le iOSClientId est optionnel et utilisé uniquement pour les fonctionnalités Google spécifiques à iOS

Configuration du plugin Apple

La configuration Apple diffère entre iOS et Android :

Pour iOS (Sign in with Apple natif) :

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

Pour Android/Web (nécessite un Service ID). Utilisez les mêmes règles de redirection que buildApplePluginConfig() dans le tutoriel 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,
        },
});

Points clés pour Apple :

iOS utilise le Sign in with Apple natif (aucune config supplémentaire requise)
Android utilise votre Service ID et l'URL apple-signin-callback Edge Function de Supabase
Le Web utilise votre Service ID et window.location.href, qui doit correspondre aux URL de retour Apple

Configuration du plugin Facebook

Facebook nécessite votre App ID et votre 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
  }
});

Points clés pour Facebook :

Utilisez le même App ID que celui configuré dans Supabase
Le Client Token se trouve dans les paramètres de base de votre application Facebook
limitedLogin: true active la fonctionnalité Limited Login de Facebook axée sur la confidentialité (iOS uniquement)
Important: Consultez notre Guide de configuration Facebook pour des infos détaillées sur le Limited Login, incluant l'ATT

Initialisez @capgo/capacitor-social-login une seule fois au démarrage de l'app React

Initialisation complète du plugin

Voici comment initialiser tous les providers ensemble :

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

Notes importantes :

Appelez initialize() once au démarrage de votre app, pas avant chaque connexion
Vous devez seulement configurer les providers que vous comptez utiliser
Les identifiants ici proviennent de fournisseurs d'origine, pas depuis Supabase
Assurez-vous que les identifiants du fournisseur correspondent à votre configuration dans Supabase

Client Supabase React et couche d'authentification

Installez le client Supabase si ce n'est pas déjà fait :

bun add @supabase/supabase-js

Créez un client unique pour tout l'arbre 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,
  },
});

Helpers de nonce pour Google + Supabase

Supabase attend un nonce brut dans signInWithIdToken et une digest SHA-256 transmis à Google. Le Guide Supabase Google documente tout le flux. Helpers minimaux :

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

Reliez Social Login + Supabase dans un seul module (modèle de l' exemple 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 par plateforme (voir Supabase Apple général, Android, Le Web):

iOS: buildApplePluginConfig() renvoie {}. Native Sign in with Apple utilise votre bundle ID. Aucun redirectUrl.
Android: clientId est votre Apple Service ID. redirectUrl est votre Supabase Edge Function (apple-signin-callback). Déployez la fonction, configurez l'Apple Return URL sur ce point de terminaison, et ajoutez le filtre d'intent de deep link de l'app pour que le flux puisse revenir vers la WebView (guide Supabase Apple pour Android).
Le Web: clientId est votre Service ID. redirectUrl est window.location.href, qui doit correspondre à une Return URL dans le portail Apple Developer (guide Supabase Apple pour le Web).

ensureSocialLoginInitialized() ajoute le apple fournisseur uniquement lorsque isAppleLoginConfigured() est vrai, de sorte qu'une configuration Google uniquement n'envoie pas d'identifiants Android ou Apple web vides.

Le plugin renvoie result.idToken sur toutes les plateformes (AppleProviderResponse dans @capgo/capacitor-social-login). Enregistrez l'App ID iOS et le Service ID dans Supabase lorsque vous déployez sur plusieurs plateformes.

Exposez l'état de session aux composants :

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

Exemple d'écran de connexion avec des boutons Google et Apple dans un layout mobile

Panneau de connexion :

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

Vue de debug de session (remplacez plus tard par votre interface de compte) :

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

JSON de session connectée dans un panneau de debug React

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

Montez l'application dans main.tsx comme d'habitude. Après une connexion réussie au provider, onAuthStateChange mises à jour session et React Router redirige l'utilisateur vers /account.

Optionnel : Facebook

Facebook suit le même signInWithIdToken pattern avec l'access token du plugin. Voir Configuration Facebook et le bloc provider dans Étape 4.

Ajouter Capacitor à l'app React

Compilez le bundle web, puis ajoutez les projets natifs :

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

Capacitor héberge le build Vite tandis que les SDK natifs gèrent le social login

Synchronisez après chaque build web :

bun run build
bunx cap sync

Ouvrez l'IDE natif quand vous êtes prêt à tester sur les appareils :

bunx cap open ios
bunx cap open android

Terminez les étapes pour les plateformes Google et Apple avant de tester sur le matériel :

Deep links et Universal Links

Les tutoriels qui appellent supabase.auth.signInWithOAuth à l'intérieur d'une WebView nécessitent souvent les Universal Links ou App Links pour que l'OS redonne le contrôl’à l'app après la redirection Google. Natif Google connexion avec un token ID évite cette boucle de redirection car le plugin n'ouvre jamais de navigateur pour le cycle OAuth. Apple sur Android est différent : il utilise toujours la redirection Edge Function et un deep link intent filter pour que la WebView puisse reprendre après la connexion Apple.

Vous pouvez toujours configurer des deep links pour d'autres fonctionnalités (e-mails de réinitialisation de mot de passe, magic links, URLs marketing). Ajoutez les mêmes chemins à Authentification > Configuration des URL dans Supabase et à votre apple-app-site-association / filtres d'intent Android lorsque vous ajoutez ces flux.

Étape 8 : configuration spécifique à la plateforme

Configuration iOS

Pour des instructions détaillées sur la configuration iOS, consultez nos guides par plateforme :

Configuration Google sur iOS - Schémas d'URL, configuration Info.plist
Configuration Apple sur iOS - Configuration de la capacité Sign in with Apple
Configuration Facebook sur iOS (dans le guide Facebook général) - Configuration SDK de Facebook

Résumé rapide - Ajouter à 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>

Suivez les guides liés pour les instructions de configuration iOS complètes, incluant la configuration du projet Xcode.

Configuration Android

Pour des instructions détaillées sur la configuration Android, consultez nos guides par plateforme :

Configuration Google Android - Empreintes SHA-1, configuration des Google Play Services
Configuration Apple Android - Configuration de l'ID de service pour Android
Configuration Facebook Android (dans le guide Facebook général) - Intégration Facebook SDK

Configuration Android essentielle:

1. Récupérez votre empreinte SHA-1 (requis pour 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. Configurez AndroidManifest.xml - Ajouter à 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. Ajoutez les ressources Facebook vers 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>

Suivez les guides de plateforme liés pour une configuration Android complète, incluant la configuration des Google Play Services et du nom de package.

Étape 9 : Utiliser la base de données Supabase avec des utilisateurs authentifiés

Une fois les utilisateurs authentifiés, vous pouvez utiliser la base de données Supabase avec 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;
  }
}

Considérations de sécurité importantes

Ne jamais exposer de clés sensibles dans votre code client
Utilisez des variables d'environnement pour la configuration
Activez la Row Level Security dans Supabase
Validez les tokens sur votre backend si nécessaire
Gérez le refresh du token automatiquement avec Supabase

Problèmes connus et dépannage

Erreur de nonce sur Google (surtout iOS)

Si Supabase renvoie une erreur de nonce, il est possible que Google ait renvoyé un ID token mis en cache. Déconnectez-vous de Google via le plugin, réessayez une fois et confirmez que vous passez nonceDigest vers SocialLogin.login et rawNonce vers signInWithIdToken. Le application exemple tentatives après SocialLogin.logout.

Erreurs d'audience du token

Enregistrez chaque client ID Google (web, iOS, Android) dans le fournisseur Google de Supabase. Le aud claim dans l'ID token doit correspondre à l'un d'entre eux.

Tutoriels de redirection OAuth vs ce guide

Articles de blog utilisant signInWithOAuth dans une WebView peut échouer sur mobile si la redirection ouvre Safari au lieu de votre application. Privilégiez le login natif + signInWithIdToken pour Capacitor, ou suivez la configuration web de Social Login pour les redirections via navigateur.

Vérifications spécifiques à la plateforme

iOS : bundle ID et URL schemes depuis la configuration Google iOS
Android : empreintes SHA-1 dans la configuration Google Android
Consultez dépannage du plugin pour des correctifs consolidés

Erreurs de réseau et mismatch de token

Aligner les identifiants du provider entre Google Cloud, Supabase et SocialLogin.initialize
Gérer les états de chargement et d'erreur dans React (voir LoginPanel ci-dessus)

Conclusion

Vous disposez désormais d'un système d'authentification complet combinant le backend robuste de Supabase avec les capacités de social login natif. Cette configuration offre :

Une authentification sociale native et sécurisée
Une gestion fluide des tokens
Intégration de base de données en temps réel
Une compatibilité multiplateforme

La combinaison de Supabase et du plugin Social Login Capgo offre une solution d'authentification puissante et scalable pour vos applications Capacitor.

Pour des fonctionnalités plus avancées comme l'authentification multi-facteurs ou claims personnalisés, consultez la documentation Supabase et le documentation du plugin Social Login.

Si vous utilisez Configurer l'authentification Supabase avec le plugin Capacitor Social Login pour planifier les flux d'authentification et de compte, le connecter à @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, Authentification à deux facteurs pour les détails d'implémentation dans l'authentification à deux facteurs, et SSO (Entreprise) pour les détails d'implémentation dans le SSO (Enterprise).

Capacitor, Supabase et l'authentification sociale en React

Table des matières

Ce que vous allez construire

Flux d'authentification global

Application React de base (Vite)

Pourquoi utiliser Supabase avec Social Login ?

Prerequisites

Étape 1 : Installer et configurer le plugin Social Login

Étape 2 : Configurer le projet Supabase

Créer et configurer votre projet Supabase

Configurer les paramètres d'authentification

Activer les fournisseurs d'authentification sociale

Étape 3 : configurer les fournisseurs sociaux dans Supabase

Configuration de l'authentification Google dans Supabase

Configuration de l'authentification Apple dans Supabase

Configurer l'authentification Facebook dans Supabase

Notes importantes sur la configuration Supabase

Étape 4 : configurer le plugin Social Login

Fonctionnement du flux d'authentification

Configuration du plugin Google

Configuration du plugin Apple

Configuration du plugin Facebook

Initialisation complète du plugin

Client Supabase React et couche d'authentification

Helpers de nonce pour Google + Supabase

Interface de connexion React et routes protégées

Optionnel : Facebook

Ajouter Capacitor à l'app React

Deep links et Universal Links

Étape 8 : configuration spécifique à la plateforme

Configuration iOS

Configuration Android

Étape 9 : Utiliser la base de données Supabase avec des utilisateurs authentifiés

Considérations de sécurité importantes

Problèmes connus et dépannage

Erreur de nonce sur Google (surtout iOS)

Erreurs d'audience du token

Tutoriels de redirection OAuth vs ce guide

Vérifications spécifiques à la plateforme

Erreurs de réseau et mismatch de token

Conclusion

Continuer depuis Configurer l'authentification Supabase avec le plugin Capacitor Social Login