Introduction à l'intégration Firebase

Section intitulée « Vue d'ensemble »

Ce tutoriel vous guidera dans la configuration de l'authentification Firebase avec le plugin de connexion sociale Capacitor.

Ce que vous allez apprendre

• Comment intégrer le plugin de connexion sociale __CAPGO_KEEP_0__ avec Auth Firebase
• How to integrate Capacitor Social Login plugin with Firebase Auth
• Ce dont vous aurez besoin

Section intitulée « Ce dont vous aurez besoin »

Un projet Firebase

1. Créez un projet sur

   • Console Firebase Section intitulée « Ce que vous allez apprendre »
   • Activer l'authentification (Courriel/ Mot de passe et connexion Google)
   • Obtenez vos informations de configuration Firebase

2. Firebase JS SDK

   • Installez Firebase dans votre projet :

     npm install firebase

3. Un projet Capacitor

   • Une application Capacitor existante
   • Le plugin de connexion sociale Capacitor installé :

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

Application d'exemple

Un exemple d'application fonctionnel est disponible dans le dépôt :

Code Dépôt: Vous pouvez trouver le dépôt code ici

L'application d'exemple démontre :

• L'authentification par e-mail/ mot de passe avec Firebase
• L'intégration de l'inscription Google (Android, iOS et Web)
• Un simple stockage de clés-valeurs en utilisant les collections Firestore de Firebase
• Le stockage de données spécifiques à l'utilisateur dans les sous-collecteurs Firestore

Un mot sur l'utilisation du Firebase SDK sur Capacitor

Lors de l'utilisation du Firebase JS SDK sur Capacitor, il faut être conscient que lors de l'utilisation des méthodes d'authentification, il faut initialiser l'instance d'authentification Firebase de manière légèrement différente.

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

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 fait planter l'authentification Firebase. Comme indiqué dans ce billet de blog, vous devez utiliser la initializeAuth fonction pour initialiser l'instance d'authentification Firebase. Cela ressemble à ceci :

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 Firebase - Configurez le projet Firebase
• Configuration Android - Configuration spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Configuration Web - Configuration spécifique à Web