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

Configurer l'authentification dans les applications mobiles peut être complexe, mais la combinaison de Supabase avec le plugin d'authentification sociale de Capgo rend l'opération simple. Supabase avec le plugin d'authentification sociale de Capgo Capgo makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

offre un backend robuste avec une authentification intégrée, tandis que le plugin @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @capgo/capacitor-social-login L'authentification sociale fluide

Gestion sécurisée des jetons
__CAPGO_KEEP_1__
Compatibilité multi-plateforme
Intégration de base de données en temps réel
Gestion des utilisateurs intégrée

Prérequis

Avant de commencer, assurez-vous d'avoir :

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

Installez d'abord 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 inscrivez/ou vous connectez
- Cliquez “Nouveau Projet”
- Choisissez votre organisation
- Entrez un Nom de projet (par exemple, « MyApp Auth »)
- Fixez un Mot de passe de base de données (enregistrez ceci de manière sécurisée)
- Sélectionnez votre Région (choisissez 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 public anonyme API clé
- Sauvegardez-les pour une utilisation ultérieure dans votre application

Configurez les paramètres d'authentification

Configurez les paramètres d'authentification généraux:
- Allez à Authentification > Paramètres
- Sous Paramètres généraux:
  - Définissez URL du site à l'URL de votre application (par exemple, https://yourdomain.com ou http://localhost:3000 pour le développement)
  - Ajoutez des URL de redirection si nécessaire : Configurez les paramètres de messagerie
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
(facultatif mais recommandé) : Sous
- Paramètres SMTP , configurez votre fournisseur de messagerieCela active les confirmations par courrier électronique et les réinitialisations de mot de passe
- if needed: __CAPGO_KEEP_0__
- For le développement, vous pouvez utiliser le service email intégré

Accéder à la section des fournisseurs:
- Allez à Authentification > Fournisseurs dans votre tableau de bord Supabase
- Vous verrez une liste des fournisseurs sociaux disponibles
- Chaque fournisseur a un Activer commutateur et des options de configuration

Maintenant, configurons chaque fournisseur social en détail :

Configuration de l'authentification Google dans Supabase

Tout d'abord, obtenez vos clés d'authentification Google :

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

Ce guide couvre :

Créer un projet Google Cloud
Configurer les clés OAuth 2.0 pour les applications web, iOS et Android
Configurer l'écran de consentement
Obtenir les identifiants et les secrets clients requis

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

Activer le fournisseur Google dans Supabase:
- Dans votre tableau de bord Supabase, allez à Authentication > Fournisseurs
- Trouvez Google et activez-le ACTIVÉ
- Remplissez la configuration :
  - ID client: Votre Google OAuth Web ID client (à partir du console Cloud Google)
  - Secret client: Votre Google OAuth Web Secret de Client
  - URL de Redirection: https://your-project-ref.supabase.co/auth/v1/callback (rempli automatiquement)
- Cliquez “Enregistrer”

Important: Utilisez les ID de Client Web et Secret de 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.

Configuration de 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'ID d'application et d'ID de service
Configuration de la capacité de connexion avec Apple
Génération des clés privées requises
Configuration spécifique au plateforme pour iOS, Android et Web

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

Activer le fournisseur Apple dans Supabase:
- Allez à Authentication > Fournisseurs et basculez Apple ACTIVÉ
- Remplissez la configuration :
  - ID client: Votre identifiant d'application (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 (rempli 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.

Configuration de l'authentification Facebook dans Supabase

Obtenir les informations de compte Facebook :

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

Ceci 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 au plateau 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 déverrouillez Facebook SUR
- Remplissez la configuration :
  - ID du client: Votre ID d'application Facebook
  - Secret du client: Votre secret d'application Facebook
  - URL de redirection: https://your-project-ref.supabase.co/auth/v1/callback (remplie automatiquement)
- Cliquez “Sauvegarder”

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

Notes importantes de configuration de Supabase

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

Après avoir configuré l'authentification, activez RLS sur vos tables
Allez à Base de données > Tables et déplacez Activer 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 :

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

Test de la configuration :

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

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

Comment fonctionne le flux d'authentification

Avant de passer à la configuration, comprenez le flux :

Le plugin s'authentifie avec le fournisseur social (Google/Apple/Facebook) natively
Le plugin reçoit des jetons (jeton d'accès, jeton d'identité) du fournisseur
Votre application envoie ces jetons à Supabase en utilisant signInWithIdToken()
Supabase valide les jetons avec le fournisseur et crée une session utilisateur
Supabase retourne son propre jeton JWT pour les demandes authentifiées de votre application

Configuration du plugin Google

Le plugin a besoin de votre ID de client Web pour toutes 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 de client Web (pas les identifiants de client Android/iOS) pour le webClientId champ
Le plugin fonctionnera sur toutes les plateformes avec uniquement l'ID de 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 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 (nécessite 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 le 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 des développeurs Apple
Le redirectUrl devrait correspondre à ce que vous avez configuré dans le Portail des développeurs 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 l'ID d'application que vous avez configuré dans Supabase
Le jeton Client est trouvé dans les paramètres de base de votre application Facebook
limitedLogin: true active le mode de connexion limitée de Facebook, qui se concentre sur la vie privée (disponible uniquement sur iOS)
Important: Consultez notre guide de configuration de Facebook pour obtenir des informations détaillées sur le mode de connexion limitée, y compris les considérations relatives à ATT

Initialisation complète du plugin

Voici comment initialiser tous les fournisseurs 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: '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'
    }
  });
}

Remarques importantes :

Appelez initialize() une fois 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 des fournisseurs d'origine, et non de Supabase
Assurez-vous que les informations d'identification du fournisseur correspondent à ce que vous avez configuré 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 : Mettre en œuvre 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 au plateforme :

Configuration iOS Google - Schemes de URL, configuration Info.plist
Configuration iOS Apple - Configuration de la capacité de connexion avec Apple
Configuration iOS Facebook (guide Facebook en 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 les instructions de configuration complète d'iOS, y compris la configuration du projet Xcode.

Configuration Android

Pour obtenir les instructions de configuration détaillées d'Android, consultez nos guides spécifiques au plateau :

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

Configuration Android essentielle:

1. Obtenez votre empreinte SHA-1 (obligatoire 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. Ajouter 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 plateforme liés pour une configuration Android complète, y compris la mise en place de Google Play Services et la configuration 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

Ne jamais exposer les clés sensibles dans votre client code
Utilisez les variables d'environnement pour la configuration
Activer la sécurité au niveau des lignes dans Supabase
Valider les jetons sur votre serveur si nécessaire
Gérer la mise à jour automatique des jetons avec Supabase

Résoudre les problèmes courants

Erreurs de correspondance de jetons

Assurez-vous que les configurations de votre fournisseur OAuth soient identiques 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 Apple Developer
Android : Assurez-vous que les empreintes SHA1 soient correctement ajoutées à Google Console

Interruptions de la Fluide 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 avez maintenant un système d'authentification complet qui combine le backend robuste de Supabase avec des capacités de connexion sociale natives. Cette configuration fournit :

Une authentification sociale native sécurisée
Un gestionnaire de jetons sans heurt
Intégration de base de données en temps réel
Compatibilité multiplateforme

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

Pour plus de fonctionnalités avancées comme l'authentification à plusieurs facteurs ou des déclarations personnaliséesconsultez la documentation de Supabase et la documentation du plugin de connexion sociale.

Si vous utilisez Configurer l'authentification Supabase avec le plugin de connexion sociale Capacitor pour planifier l'authentification et les flux de compte, connectez-le avec @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, L'authentification à deux facteurs pour les détails d'implémentation dans L'authentification à deux facteurs, et SSO (Entreprise) Détails d'implémentation pour SSO (Entreprise).