Introduction à l'intégration Firebase

Aperçu

Ce tutoriel vous guidera dans la configuration de Firebase Authentication avec le plugin Social Login de Capacitor. Cette intégration vous permet d'utiliser les fournisseurs de social login natifs (Google, Apple, Facebook, Twitter) sur mobile tout en exploitant Firebase Auth pour l'authentification backend et Firestore pour le stockage des données.

Ce que vous allez apprendre

• Comment configurer Firebase Authentication
• Comment intégrer le plugin Social Login de Capacitor avec Firebase Auth
• Configuration spécifique par plateforme pour Android, iOS et le Web

Ce dont vous aurez besoin

Avant de commencer, assurez-vous d'avoir :

1. Un projet Firebase

   • Créez un projet sur Console Firebase
   • Activer l'authentification (e-mail/mot de passe et Google Sign-In)
   • Récupérer vos identifiants de configuration Firebase

2. Firebase JS SDK

   • Installer Firebase dans votre projet :

     npm install firebase

3. Un projet Capacitor

   • Une application Capacitor existante
   • Le plugin Capacitor Social Login installé :

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

Application d'exemple

Un exemple complet et fonctionnel est disponible dans le dépôt :

Code Repository: Vous trouverez le dépôt code ici

L'application d'exemple illustre :

• Authentification par e-mail/mot de passe avec Firebase
• Intégration de Google Sign-In (Android, iOS et web)
• Un stockage clé-valeur simple via les collections Firebase Firestore
• Stockage de données utilisateur dans des sous-collections Firestore

Note sur l'utilisation du SDK Firebase sur Capacitor

Lorsque vous utilisez le SDK JS Firebase sur Capacitor, notez que pour les méthodes d'authentification, vous devez initialiser l'instance Firebase Auth un peu différemment.

Sur la plateforme web, vous utiliseriez la getAuth fonction pour obtenir l'instance Firebase Auth.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

Malheureusement, sur Capacitor, cela ne fonctionne pas et bloque l'authentification Firebase. Comme indiqué dans cet article de blog, vous devez utiliser la initializeAuth fonction pour initialiser l'instance Firebase Auth. Voici à quoi cela ressemble :

import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);

function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}

export const auth = whichAuth();

Étapes suivantes

Continuez avec les guides de configuration :

• Configuration de Firebase - Configurez votre projet Firebase
• Configuration Android - Configuration spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Configuration web - Configuration spécifique au web

Continuer depuis l'introduction à l'intégration Firebase

Si vous utilisez Introduction à l'intégration Firebase pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @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, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.