Firebase - Authentification 101

Rappelez-vous qu’il fallait garder vos ceintures attachées? Nous allons plonger dans une configuration très technique d’authentification, car c’est ici que l’on souhaite s’assurer de bien faire les choses.

L’authentification des utilisateurs est une étape cruciale dans le développement d’une application, qu’elle soit web, mobile ou hybride. Un système d’authentification mal sécurisé peut exposer les données sensibles des utilisateurs et compromettre la fiabilité de la plateforme.

Pourtant, la mise en place d’une authentification robuste peut s’avérer un véritable casse-tête, surtout lorsque l’on souhaite se concentrer sur les fonctionnalités principales de l’application. Dans cet article, je partage mon expérience avec Firebase Authentication, son implémentation et ses avantages, tout en évaluant son efficacité et sa convivialité.

1. Présentation de Firebase Authentication

Qu'est-ce que Firebase Authentication ?

Firebase Authentication est un service proposé par Google permettant d'implémenter facilement l'authentification des utilisateurs dans une application. J'ai testé plusieurs de ses méthodes d'authentification, qui incluent:

• Email(Courriel)/Mot de passe
• Numéro de téléphone
• Fournisseurs tiers (Google, Facebook, Twitter, GitHub, Apple)
• Authentification anonyme
• Identity Platform (Authentification avancée avec multi-facteurs et SAML/OpenID Connect)

J'ai trouvé que ce service facilite la gestion des utilisateurs, la réinitialisation des mots de passe, la vérification des emails et même l'authentification multi-facteurs pour renforcer la sécurité.

2. Mise en place de Firebase Authentication

2.1 Création d'un projet Firebase

J'ai commencé par créer un projet Firebase et lier mon application:

1. Je suis allé sur la console Firebase: https://firebase.google.com/
2. J'ai créé un nouveau projet et suivi les étapes d'initialisation.
3. J'ai ajouté mon application (Android, iOS ou Web) et suivi les instructions pour lier Firebase à mon projet.

2.2 Installation du SDK Firebase

Pour une application web, j'ai installé le SDK Firebase avec npm:

npm install firebase

Ensuite, j'ai importé Firebase dans mon projet:

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

const firebaseConfig = {
  apiKey: "VOTRE_API_KEY",
  authDomain: "VOTRE_PROJET.firebaseapp.com",
  projectId: "VOTRE_PROJET",
  storageBucket: "VOTRE_PROJET.appspot.com",
  messagingSenderId: "VOTRE_MESSAGING_SENDER_ID",
  appId: "VOTRE_APP_ID"
};

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

Explication:

• initializeApp(firebaseConfig): Initialise Firebase avec les paramètres du projet.
• getAuth(app): Récupère une instance du service d'authentification Firebase.

2.3 Activation des méthodes d'authentification

Dans la console Firebase:

1. Je suis allé dans "Authentication".
2. J'ai activé les méthodes d'authentification souhaitées (Email/Mot de passe, Google, etc.).

3. Implémentation de l'authentification

3.1 Authentification par email/mot de passe

J'ai ajouté une fonction pour enregistrer un utilisateur:

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

const registerUser = (email, password) => {
  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log("Utilisateur créé :", userCredential.user);
    })
    .catch((error) => {
      console.error("Erreur d'inscription :", error.message);
    });
};

Explication:

• createUserWithEmailAndPassword(auth, email, password): Crée un nouvel utilisateur.
• then((userCredential) => { ... }): Exécuté en cas de succès.
• .catch((error) => { ... }): Capture les erreurs éventuelles

Pour la connexion:

import { signInWithEmailAndPassword } from "firebase/auth";

const loginUser = (email, password) => {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log("Connexion réussie :", userCredential.user);
    })
    .catch((error) => {
      console.error("Erreur de connexion :", error.message);
    });
};

3.2 Authentification avec Google

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";

const provider = new GoogleAuthProvider();

const signInWithGoogle = () => {
  signInWithPopup(auth, provider)
    .then((result) => {
      console.log("Utilisateur Google connecté :", result.user);
    })
    .catch((error) => {
      console.error("Erreur d'authentification Google :", error.message);
    });
};

3.3 Déconnexion de l'utilisateur

import { signOut } from "firebase/auth";

const logoutUser = () => {
  signOut(auth)
    .then(() => {
      console.log("Déconnexion réussie.");
    })
    .catch((error) => {
      console.error("Erreur lors de la déconnexion :", error.message);
    });
};

Évaluation de la difficulté des fonctionnalités Firebase Authentication

Analyse des points techniques et leur difficulté

Fonctionnalité	Description	Difficulté (0-10)
Création d'un projet Firebase	Aller sur la console Firebase, créer un projet et lier une application	3 – Interface conviviale, mais demande de suivre des instructions techniques.
Installation du SDK Firebase	Utilisation de la commande npm install firebase et importation du module dans le code	5 – Compréhensible pour un débutant, mais nécessite une familiarité avec npm et JavaScript.
Configuration de Firebase	Définition du firebaseConfig et initialisation avec initializeApp(firebaseConfig)	6 – Comprendre les API keys et la structure JSON peut être intimidant pour un non-programmeur.
Activation des méthodes d'authentification	Aller dans la console Firebase et activer Email/Mot de passe, Google, etc.	2 – Interface utilisateur simple, mais nécessite de savoir où chercher.
Inscription d'un utilisateur (Email/Mot de passe)	Utilisation de createUserWithEmailAndPassword()	6 – Exige de comprendre la structure des promesses en JavaScript et la gestion des erreurs.
Connexion d'un utilisateur (Email/Mot de passe)	Utilisation de signInWithEmailAndPassword()	6 – Similaire à l'inscription, mais toujours basé sur la gestion des promesses.
Authentification avec Google	Utilisation de signInWithPopup(auth, provider)	7 – Plus complexe que l'authentification classique, car elle implique une connexion via un fournisseur tiers.
Déconnexion de l'utilisateur	Utilisation de signOut(auth)	3 – Simple, mais nécessite un appel de fonction spécifique.
Gestion des erreurs	Utilisation de .catch((error) => {...}) pour intercepter les erreurs	7 – Comprendre et gérer les erreurs nécessite une certaine logique de programmation.

---

Résumé global de la difficulté

• Difficulté moyenne: 5/10
• Accessibilité pour un non-programmeur: Modérée – Certaines parties (création du projet, activation des méthodes) sont simples, mais la configuration du SDK et la gestion des utilisateurs nécessitent des bases en programmation.
• Aspect le plus complexe: Authentification avec Google et gestion des erreurs.
• Aspect le plus facile: Activation des méthodes d'authentification et déconnexion.

Conclusion

Firebase Authentication est une solution conviviale pour les développeurs, mais un non-programmeur rencontrerait des difficultés à manipuler le SDK et comprendre la logique des promesses en JavaScript.
Avec un bon tutoriel et un peu de pratique, c’est tout à fait faisable !

---

Références

Google. (s.d.). Firebase Authentication. Firebase. https://firebase.google.com/docs/auth (Consulté le 16 février 2025)

GeeksforGeeks. (2024, 10 mai). What is Firebase Authentication. GeeksforGeeks. https://www.geeksforgeeks.org/what-is-firebase-authentication/ (Consulté le 19 février 2025)

@Firebase. (2022, 17 mars). Getting started with the Firebase Realtime Database on the web [Vidéo]. YouTube. https://www.youtube.com/watch?v=pP7quzFmWBY (Consulté le 24 février 2025)