Passer au contenu
Capgo - Live Updates for Capacitor Apps Capgo

Firebase Integration Introduction

Aperçu

Section titled “Aperçu”

This Tutoriel will Guide you through setting up Firebase Authentication with the Capacitor Social Connexion plugin. This integration allows you to use Natif social Connexion providers (Google, Apple, Facebook, Twitter) on mobile platforms while leveraging Firebase Auth for backend authentication and Firestore for data storage.

What You’ll Learn

Section titled “What You’ll Learn”
  • How to configure Firebase Authentication
  • How to integrate Capacitor Social Connexion plugin with Firebase Auth
  • Platform-specific Configuration for Android, iOS, and Web

What You’ll Need

Section titled “What You’ll Need”

Before you begin, make sure you have:

  1. A Firebase Project

    • Créer a project at Firebase Console
    • Activer Authentication (Email/Password and Google Sign-In)
    • Get your Firebase Configuration credentials

  2. Firebase JS SDK

    • Installer Firebase in your project:
      Terminal window
      npm install firebase

  3. A Capacitor Project

    • An existing Capacitor Application
    • Capacitor Social Connexion plugin installed:
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

Exemple Application

Section titled “Exemple Application”

A Terminé working Exemple is Disponible in the repository:

Code Repository: You can find the code repository here

The Exemple Application demonstrates:

  • Email/password authentication with Firebase
  • Google Sign-In integration (Android, iOS, and Web)
  • A simple key-value store using Firebase Firestore collections
  • Utilisateur-specific data storage in Firestore subcollections

A word À propos using the Firebase SDK on Capacitor

Section titled “A word À propos using the Firebase SDK on Capacitor”

When using the Firebase JS SDK on Capacitor, you need to be aware that when using the authentication methods, you need to Initialiser the Firebase Auth instance a bit differently.

On the web platform, you would use the getAuth function to get the Firebase Auth instance.

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


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

Unfortunately, on Capacitor, this does not work and causes Firebase auth to hang. As stated in this blog post, you need to use the initializeAuth function to initialize the Firebase Auth instance. This looks like this:

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

Suivant Steps

Section titled “Suivant Steps”

Continue with the Configuration guides: