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

Configurer l'authentification dans les applications mobiles peut être complexe, mais la combinaison Supabase avec le Capgo plugin de connexion sociale facilite grandement la tâche. Ce tutoriel vous guidera à travers l'intégration de l'authentification sociale (Google, Apple, Facebook) avec Supabase dans votre application Capacitor.

Why Use Supabase with Social Login?

Supabase offre un backend robuste avec une authentification intégrée, tandis que le @capgo/capacitor-connexion-avec-login-social Ce plugin offre une authentification sociale native sur les plateformes iOS, Android et web. Pour une intégration Supabase plus étroite, @capgo/capacitor-Supabase ajoute des assistants d'authentification native et un accès JWT. Ensemble, ils fournissent :

• Une authentification sociale fluide
• Gestion de jetons sécurisée
• Compatibilité cross-plateforme
• Intégration de base de données en temps réel
• Gestion des utilisateurs intégrée

Prerequisites

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)

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

Premièrement, installez le Capgo plugin de connexion sociale :

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

Voir les Connexion sociale et plugin Supabase pages de configuration pour les plateformes spécifiques.

Étape 2 : Configurer le projet Supabase

Créer et configurer votre projet Supabase

1. Créer un projet Supabase:

   • Allez à supabase.com et vous vous inscrire/ou 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 Enregistrez-l’en toute sécurité
   • Sélectionnez votre Région (choisissez la plus proche de vos utilisateurs)
   • Clicker « Créer un nouveau projet »

2. Obtenez vos informations de projet:

   • Une fois créé, allez à Paramètres > API
   • Copiez votre (par exemple, public anonyme https://your-project-ref.supabase.co)
   • Copiez votre public anonyme Clé API
   • Save these for later use in your app

Configurez les paramètres d'authentification

3. Configurez les paramètres d'authentification généraux:

   • Allez à Authentification > Paramètres
   • Sous Paramètres généraux:
     • Définir URL du site à votre URL d'application (par exemple, https://yourdomain.com ou http://localhost:3000 pour le développement)
     • Ajoutez des URL de redirection Configurez les URL de redirection si nécessaire :

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

4. Configurez les paramètres de courriel (facultatif mais recommandé) :

   • Sous Paramètres SMTP, configurez votre fournisseur de courriel
   • This enables email confirmations and password resets
   • Pour le développement, vous pouvez utiliser le service de courriel intégré

Activer les fournisseurs d'authentification sociale

5. Accédez à 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 bouton et des options de configuration

Maintenant, configurons chaque fournisseur social en détail :

Étape 3 : Configurer les fournisseurs sociaux dans Supabase

Configurer l'authentification Google dans Supabase

Obtenez d'abord vos clés OAuth Google :

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

Ce guide couvre :

• Création d'un projet Google Cloud
• Configuration des clés OAuth 2.0 pour web, iOS et Android
• Configuration de l'écran de consentement
• Obtention des identifiants et des secrets Client requis

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

1. Activer le fournisseur Google dans Supabase:
   • Dans votre tableau de bord Supabase, allez à Authentification > Fournisseurs
   • Trouvez Google et l'activer ACTIVER
   • Remplir les informations de configuration :
     • ID client: Votre ID OAuth Google Web ID client (de la console Google Cloud)
     • Secret client: Votre ID OAuth Google Web Secret client
     • URL de redirection: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
   • Appuyez “Sauvegarder”

ImportantUtilisez les ID du client Web et Secret du client Web dans Supabase, même si vous construisez une application mobile. Les identifiants de client mobile sont utilisés séparément dans la configuration du plugin.

Configurer l'authentification Apple dans Supabase

Obtenez les informations d'identification Apple :

Suivez notre guide détaillé d'Apple : Configuration d'authentification Apple

Ce guide couvre :

• Configuration de votre compte développeur Apple
• Création d'IDs d'application et d'IDs de service
• Configuration de la capacité Sign in with 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 :

1. Activer le fournisseur Apple dans Supabase:
   • Allez à Authentification > Fournisseurs et basculer Apple ACTIVÉ
   • Remplissez la configuration :
     • ID client: Votre identifiant de Service ID (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 (auto-filled)
   • Cliquez “Sauvegarder”

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

Obtenez les informations de compte Facebook :

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

Ce guide couvre :

• Création d'un compte développeur Facebook et d'une application
• Ajout du produit de connexion Facebook
• Configuration des URIs de redirection OAuth
• Getting your App ID, App Secret, and Client Token
• Configuration spécifique à la plateforme pour iOS et Android

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

1. Activer le fournisseur Facebook dans Supabase:
   • Allez à 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 “Sauvegarder”

Important: Assurez-vous d'avoir ajouté l'URL de rappel de Supabase (https://your-project-ref.supabase.co/auth/v1/callback) à votre application Facebook URIs de Redirection OAuth Valides en paramètres de login Facebook.

Notes importantes de configuration de Supabase

Sécurité au niveau de la ligne (SLN) :

• Après avoir configuré l'authentification, activez LSNL sur vos tables
• Allez à Base de données > Tables et basculer Activer LSNL sur 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 Authentification > Utilisateurs
• Surveillez les événements d'authentification dans Authentification > Journal
• Paramétrer les modèles de courriel dans Authentification > Modèles de courriel

Vérification de la configuration :

• Utiliser 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 le Journal section pour tout erreur d'authentification

Étape 4 : Configurez le plugin de connexion sociale

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 originaux fournisseurs (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 :

1. Le plugin s'authentifie avec le fournisseur social (Google/Apple/Facebook) nativement
2. Le plugin reçoit des jetons les jetons d'accès (jeton d'ID) du fournisseur
3. Votre application envoie ces jetons à Supabase à l'aide de signInWithIdToken()
4. Supabase valide les jetons avec le fournisseur et crée une session utilisateur
5. 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 client Web pour tous les plateformes et optionnellement 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',
    
    // 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 (authentification Apple native):

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 Sign in avec Apple (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 correspond à ce que vous avez configuré dans le Portail du 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 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 (disponible uniquement sur iOS)
• Importantcontext Guide de configuration de Facebook Pour plus d'informations sur la connexion limitée, y compris les considérations ATT.

guide de configuration Facebook

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

Initialisation complète du plugin

• Call initialize() once lorsque votre application démarre, et non avant chaque connexion
• Vous devez uniquement configurer les fournisseurs que vous prévoyez utiliser
• The credentials here are from the fournisseurs d'origineet non de Supabase
• Assurez-vous que les informations de compte 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 : 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 : Mettre en œuvre 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 :

// 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 les instructions de configuration iOS détaillées, consultez nos guides spécifiques à la plateforme.

• Configuration iOS Google - schémas d'URL, configuration de 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 - Ajoutez à 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 complète de projet Xcode, y compris la configuration iOS.

Configuration Android

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

• Configuration d'Android Google - empreintes SHA-1, configuration des services Google Play
• Configuration d'Android Apple - configuration de l'ID de service pour Android
• Configuration d'Android Facebook (guide Facebook en général) - intégration de 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 - 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ée pour configurer complètement Android, y compris la mise en place de Google Play Services et la configuration du nom de package.

Step 9: Using Supabase Database with Authenticated Users

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

1. Ne jamais exposer les clés sensibles en votre client code
2. Utilisez les variables d'environnement pour la configuration
3. Activer la sécurité de niveau de ligne sur Supabase
4. Valider les jetons sur votre serveur de backend si nécessaire
5. Gérer le renouvellement automatique des jetons automatiquement avec Supabase

Résoudre les problèmes courants

Erreurs de correspondance de jetons

• Vérifiez 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 liés à la plateforme

• iOS : Vérifiez que votre ID de bundle correspond à votre configuration Apple Developer.
• Android : Assurez-vous que les empreintes SHA1 sont ajoutées correctement au console Google

Interruptions de la flux d'authentification

• Gérer les erreurs réseau de manière appropriée
• 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 des capacités de connexion sociale native. Ce setup offre :

• L'authentification sociale native sécurisée
• La gestion des jetons sans heurt
• Intégration de base de données en temps réel
• La compatibilité cross-plateforme

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

Pour plus de fonctionnalités avancées comme l'authentification à plusieurs facteurs ou revendications personnaliséesVoyez également Si vous utilisez et le Documentation de l'extension de connexion sociale.

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin

l'authentification à plusieurs facteurs Configurer l'authentification Supabase avec le plugin de connexion sociale Capacitor planifier l'authentification et les flux de compte, connectez-l’avec @capgo/capacitor-connexion-social pour les détails d'implémentation dans @capgo/capacitor-connexion-social, @capgo/capacitor-mot-de-passe pour les détails d'implémentation dans @capgo/capacitor-mot-de-passe, @capgo/capacitor-authentification-native pour les détails d'implémentation dans @capgo/capacitor-authentification-native, L'authentification à deux facteurs pour les détails d'implémentation dans L'authentification à deux facteurs, et L'authentification unique (Entreprise) pour les détails d'implémentation dans SSO (Entreprise).