Configurer l'authentification Supabase avec le plugin de connexion sociale Capacitor

La mise en place de l'authentification dans les applications mobiles peut être complexe, mais la combinaison de Supabase avec le plugin de connexion sociale __CAPGO_KEEP_0__ simplifie le processus. Supabase avec le Capgo Social Login plugin rendez-vous facile. Cette tutrice vous guidera à travers l'intégration de l'authentification sociale (Google, Apple, Facebook) avec Supabase dans votre Capacitor application.

Supabase fournit un backend-as-a-service robuste avec une authentification intégrée, tandis que le @capgo/capacitor-social-login plugin offre une authentification sociale native sur les plateformes iOS, Android et web. Ensemble, ils fournissent :

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

Prérequis

Avant de commencer, assurez-vous d'avoir :

Un projet Capacitor configuré
Un compte et un projet Supabase
Des comptes développeurs pour vos fournisseurs sociaux choisis (Google, Apple, Facebook)

Tout d'abord, installez le plugin de connexion sociale Capgo :

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

Étape 2 : Configurer le projet Supabase

Créez et configurez votre projet Supabase

Créez un projet Supabase:
- Allez à supabase.com et vous inscrire/ vous connecter
- Cliquez “Nouveau Projet”
- Choisissez votre organisation
- Entrez un Nom de Projet (par exemple, « MonApp Auth »)
- Définissez un Mot de passe de base de données (sauvez-le en toute sécurité)
- Sélectionnez votre Région (choisissez celle la plus proche de vos utilisateurs)
- Cliquez « Créer un nouveau projet »
Obtenez vos informations de projet:
- Une fois créé, allez à Paramètres > API
- Copiez votre URL de projet (par exemple, https://your-project-ref.supabase.co)
- Copiez votre adresse publique anonyme API clé
- Enregistrez ces informations pour une utilisation ultérieure dans votre application

Configurer les paramètres d'authentification

Configurer les paramètres d'authentification généraux:
- Allez à Authentification > Paramètres
- Sous Paramètres généraux:
  - Définir URL du site à l'URL de votre application (par exemple, https://yourdomain.com ou http://localhost:3000 pour le développement)
  - Ajouter des éléments supplémentaires URLs de redirection si nécessaire :
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
Configurer les paramètres de messagerie (facultatif mais recommandé) :
- Sous Paramètres SMTP, configurez votre fournisseur de messagerie
- Cela active les confirmations par courriel et les réinitialisations de mot de passe
- Pour le développement, vous pouvez utiliser le service de messagerie intégré

Accédez à la section des fournisseurs:
- Allez à Authentication > Fournisseurs dans votre tableau de bord Supabase
- Vous verrez une liste des fournisseurs sociaux disponibles
- Chaque fournisseur a un Activer bouton d'activation et options de configuration

Configurez maintenant chaque fournisseur social en détail :

Configuration de l'authentification Google dans Supabase

Obtenez d'abord vos clés OAuth Google :

Suivez notre guide détaillé de configuration Google : Configuration de l'authentification Google

Ce guide couvre :

Créer un projet Cloud Google
Configurer les informations d'identification OAuth 2.0 pour web, iOS et Android
Configurer l'écran de consentement
Obtenir les identifiants Client et secrets requis

Après avoir terminé la configuration de Google, configurez-le dans Supabase :

Activer le fournisseur Google dans Supabase:
- Dans votre tableau de bord Supabase, allez à Authentification > Fournisseurs
- Trouvez Google et activez-le ACTIF
- Remplissez la configuration :
  - ID du client: Votre Google OAuth Web ID du client (à partir du Google Cloud Console)
  - Secret du client: Votre Google OAuth Web Secret du client
  - URL de redirection: https://your-project-ref.supabase.co/auth/v1/callback (remplie automatiquement)
- Cliquez “Sauvegarder”

Important: Utilisez les ID du client Web et le secret du client Web dans Supabase, même si vous construisez une application mobile. Les ID de client mobile sont utilisés séparément dans la configuration du plugin.

Configurer l'authentification Apple dans Supabase

Obtenir les informations d'identification Apple :

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

Ce guide couvre :

Configuration de votre compte développeur Apple
Création d'identifiants d'application et d'identifiants de service
Configuration de la capacité de connexion avec Apple
Génération des clés privées requises
Configuration spécifique à la plateforme pour iOS, Android et Web

Après avoir terminé la configuration Apple, configurez-la dans Supabase :

Activer le fournisseur Apple dans Supabase:
- Allez à Authentification > Fournisseurs et activez Apple ACTIF
- Remplissez la configuration :
  - ID client: Votre identifiant d'ID de service (par exemple, com.yourapp.signin)
  - Secret client: Générez ce JWT à l'aide de votre clé privée Apple (voir docs Apple Supabase pour le format JWT)
  - URL de redirection: https://your-project-ref.supabase.co/auth/v1/callback (remplie automatiquement)
- Cliquez “Enregistrer”

Remarque: La mise en place de l'authentification Apple est la plus complexe en raison des exigences d'Apple pour les identifiants de service, les clés privées et la génération de JWT. Suivez notre documentation soigneusement pour chaque plateforme.

Mise en place de l'authentification Facebook dans Supabase

Obtenez vos informations de connexion Facebook :

Suivez notre guide de mise en place Facebook complet : Mise en place de l'authentification Facebook

Ce guide couvre :

Créer un compte développeur Facebook et une application
Ajouter le produit de connexion Facebook
Configurer les URIs de redirection OAuth
Obtenir votre ID d'application, votre secret d'application et votre jeton client
Configuration spécifique à la plateforme pour iOS et Android

Après avoir terminé la configuration de Facebook, configurez-le dans Supabase :

Activer le fournisseur Facebook dans Supabase:
- Allez à Authentification > Fournisseurs et basculez Facebook ACTIVER
- Remplissez les informations de configuration :
  - ID du client : Votre ID d'application FacebookSecret du client : Votre secret d'application Facebook
  - Client SecretClient ID
  - URL de redirection: https://your-project-ref.supabase.co/auth/v1/callback (rempli automatiquement)
- Cliquez “Sauvegarder”

Important : Assurez-vous d'ajouter l'URL de rappel Supabase () à vos paramètres de l'application Facebook.https://your-project-ref.supabase.co/auth/v1/callbackURIs de redirection OAuth valides Paramètres de connexion Facebook : Important : Notes de configuration Supabase

Niveau de sécurité par ligne (RLS) :

Après avoir configuré l'authentification, activez le RLS sur vos tables

Supabase callback URL (
Allez à Base de données > Tables et basculez Activer la RLS pour chaque table
Créez des politiques pour contrôler l'accès aux données en fonction des utilisateurs authentifiés

Gestion des utilisateurs :

Afficher les utilisateurs authentifiés dans Authentification > Utilisateurs
Surveiller les événements d'authentification dans Authentification > Journal
Configurer les modèles de courriel dans Authentification > Modèles de courriel

Tester la configuration :

Utilisez l'outil de test d'authentification intégré de Supabase
Allez à Authentification > Utilisateurs et cliquez sur “Inviter un utilisateur” pour tester les flux de courriel
Vérifiez la section des journaux pour tout erreur d'authentification

Maintenant que Supabase est configuré, vous devez configurer le plugin de connexion sociale avec les informations correspondantes. __CAPGO_KEEP_0__L'important : Le plugin nécessite les informations d'authentification OAuth des __CAPGO_KEEP_1__ (pas de Supabase), tandis que Supabase gère l'authentification côté serveur.

Comment fonctionne le flux d'authentification

Avant de plonger dans la configuration, comprenez le flux :

Le plugin s'authentifie avec le fournisseur social (Google/Apple/Facebook) de manière native
Le plugin reçoit les jetons (jeton d'accès, jeton d'ID) du fournisseur
Votre application envoie ces jetons à Supabase à l'aide de signInWithIdToken()
Supabase valide les jetons avec le fournisseur et crée une session d'utilisateur
Supabase retourne son propre jeton JWT pour les requêtes authentifiées de votre application

Configuration du plugin Google

Le plugin nécessite votre ID de client Web pour tous les plateformes et optionnellement un ID de 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',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

Points clés pour Google :

Utilisez le ID du client Web (pas les ID des clients Android/iOS) pour le webClientId champ
Le plugin fonctionnera sur tous les plateformes avec uniquement l'ID du client Web
Le iOSClientId est optionnel et n'est utilisé que pour les fonctionnalités Google spécifiques à iOS

Configuration du plugin Apple

La configuration d'Apple diffère entre iOS et Android :

Pour iOS (signe d'Apple natif) :

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

Pour Android/Web (exige l'ID de service) :

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

Points clés pour Apple :

iOS utilise Sign in with Apple natif (aucune configuration supplémentaire nécessaire)
Android/Web nécessite l'ID de service que vous avez créé dans le Portail développeur Apple
Le redirectUrl devrait correspondre à ce que vous avez configuré dans les deux Portail développeur Apple et Supabase

Configuration du plugin Facebook

Facebook nécessite votre ID d'application et votre jeton 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
  }
});

Points clés pour Facebook :

Utilisez le même ID d'application que vous avez configuré dans Supabase
Le jeton client se trouve dans les paramètres de base de votre application Facebook
limitedLogin: true active le mode de connexion limité de Facebook, qui se concentre sur la vie privée (disponible uniquement sur iOS)
Importants: Consultez notre guide de configuration de Facebook pour une information détaillée sur les limitations de connexion, y compris les considérations ATT Initialisation complète du plugin

Voici comment initialiser tous les fournisseurs ensemble :

Remarques importantes :

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

Appelez

une seule fois initialize() lorsque votre application démarre, et non avant chaque connexion Vous n'avez besoin de configurer que les fournisseurs que vous prévoyez d'utiliser
Les informations d'identification ici proviennent de
__CAPGO_KEEP_0__ fournisseurs par défaut, pas de Supabase
Vérifiez que les informations de connexion du fournisseur correspondent à celles configurées dans Supabase

Étape 5 : Configurer le client Supabase

Installez le client Supabase :

npm install @supabase/supabase-js

Créez un service 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,
  },
});

Étape 6 : Implémenter le flux d'authentification

Créez un service d'authentification qui combine les deux :

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

Étape 7 : Implémenter dans votre application

Initialisez le service et gérez l'authentification :

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

Créez des boutons de connexion dans votre interface utilisateur :

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

Étape 8 : Configuration spécifique au plateforme

Configuration iOS

Pour des instructions de configuration iOS détaillées, consultez nos guides spécifiques à la plateforme :

Configuration iOS Google - Configuration des schémas URL, configuration d'Info.plist
Configuration iOS Apple - Configuration de la capacité de connexion avec Apple
Configuration iOS Facebook (guide Facebook général) - Configuration Facebook SDK

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 obtenir des instructions de configuration iOS complètes, y compris la configuration du projet Xcode.

Configuration Android

Pour des instructions de configuration Android détaillées, consultez nos guides spécifiques à la plateforme :

Configuration Google Android - empreintes SHA-1, configuration des services Google Play
Configuration Apple Android - configuration de l'ID de service pour Android
Configuration Facebook Android (guide Facebook en général) - intégration Facebook SDK

Configuration Android essentielle:

1. Obtenez votre empreinte SHA-1 (nécessaire 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 - Ajoutez à 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 à 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 la plateforme liés pour une configuration complète d'Android, y compris la configuration des services Google Play et du nom de package.

Étape 9 : Utilisation de 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 de Supabase avec la sécurité au niveau de la ligne (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

N'exposez jamais les clés sensibles dans votre client code
Utilisez les variables d'environnement pour la configuration
Activer la sécurité au niveau de la ligne dans Supabase
Vérifier les jetons sur votre serveur si nécessaire
Gérer le renouvellement des jetons automatiquement avec Supabase

Résoudre les problèmes courants

Erreurs de correspondance de jetons

Assurez-vous que les configurations de votre fournisseur OAuth correspondent entre le plugin de connexion sociale et Supabase
Vérifiez que les URL de redirection sont correctement configurées

Problèmes spécifiques à la plateforme

iOS : Vérifiez que votre ID de bundle correspond à votre configuration de développeur Apple
Android : Assurez-vous que les empreintes SHA1 sont correctement ajoutées à Google Console

Interruptions de flux d'authentification

Implémentez un traitement d'erreur approprié pour les problèmes de réseau
Ajoutez des états de chargement pendant l'authentification

Conclusion

Vous disposez maintenant d'un système d'authentification complet qui combine le backend robuste de Supabase avec les capacités de connexion sociale native. Cette configuration offre :

Authentification sociale native sécurisée
Gestion de jetons sans heurt
Intégration de base de données en temps réel
Compatibilité multi-plateforme

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

Pour plus de fonctionnalités avancées comme authentification à plusieurs facteurs ou revendications personnalisées, consultez la documentation de Supabase et la documentation du plugin de connexion sociale Rédigé par Martin Donadieu.

Configurer l'authentification Supabase avec le plugin de connexion sociale Capacitor

Pourquoi Utiliser Supabase avec la Connexion Sociale ?

Prérequis

Étape 1 : Installer et configurer le plugin de connexion sociale

Étape 2 : Configurer le projet Supabase

Créez et configurez 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

Configurer l'authentification Apple dans Supabase

Mise en place de l'authentification Facebook dans Supabase

Niveau de sécurité par ligne (RLS) :

Étape 4 : Configurez le plugin de connexion sociale

Comment fonctionne le flux d'authentification

Configuration du plugin Google

Configuration du plugin Apple

Configuration du plugin Facebook

Voici comment initialiser tous les fournisseurs ensemble :

Étape 5 : Configurer le client Supabase

Étape 6 : Implémenter le flux d'authentification

Étape 7 : Implémenter dans votre application

Étape 8 : Configuration spécifique au plateforme

Configuration iOS

Configuration Android

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

Considérations de sécurité importantes

Résoudre les problèmes courants

Erreurs de correspondance de jetons

Problèmes spécifiques à la plateforme

Interruptions de flux d'authentification

Conclusion