Authentification avec Firebase

Bienvenu dans notre 3ème article, aujourd'hui, on va voir l'authentification avec Firebase, cela veut dire comment tu peux intégrer l'authentification dans ton projet. Par exemple, tu peux te connecter par Google, ou ton compte, tu as même la possibilité avec SMS.

Tout d'abord, Firebase Authentication simplifie la gestion des utilisateurs en prenant en charge le stockage et les sessions, tout en offrant un support natif pour divers fournisseurs d'identité (Google, Facebook, Apple, etc.), une sécurité renforcée avec l'authentification multi-facteurs et une intégration fluide avec d'autres services Firebase comme Firestore et Cloud Functions. Pour configurer Firebase Authentication, il suffit de créer un projet sur Firebase Console, d’activer l’authentification dans la section Build : Authentication, puis de choisir les méthodes de connexion souhaitées comme E-mail/Mot de passe, Google, etc.

Pour intégrer Firebase dans ton projet, commence par créer un projet Firebase et enregistrer ton application, puis installe le SDK avec npm install firebase et initialise Firebase avec initializeApp(firebaseConfig), ce qui te permettra d'accéder facilement aux services comme Authentication, Firestore, Realtime Database et Cloud Storage.

Implémentation de l'authentification

Firebase Authentication permet d'inscrire de nouveaux utilisateurs en utilisant la méthode createUserWithEmailAndPassword(auth, email, password), qui enregistre un compte à partir d’une adresse e-mail et d’un mot de passe tout en gérant la sécurité des identifiants dans la base de données.

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed up const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. }); Une fois inscrit, un utilisateur peut se connecter grâce à signInWithEmailAndPassword(auth, email, password), qui vérifie ses informations et lui accorde l'accès à l'application si elles sont correctes.

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

const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });

Pour suivre en temps réel l’état d’authentification d’un utilisateur, Firebase propose onAuthStateChanged(auth, callback), qui détecte automatiquement si l'utilisateur est connecté ou déconnecté et permet d’adapter l’interface en conséquence.

import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/auth.user const uid = user.uid; // ... } else { // User is signed out // ... } });

Avec ces fonctionnalités, Firebase facilite l’intégration d’un système d’authentification sécurisé et évolutif, offrant une expérience utilisateur fluide et efficace. Ces fonctions sont déjà proposées par Firebase, mais pour les intégrer dans ton projet, tu dois les déclarer dans un fichier dédié, comme firebase.js, afin de mieux les organiser et les utiliser facilement dans ton projet.

Source

Firebase Docs (Authentication ) : https://firebase.google.com/docs/auth/web/start?_gl=1x2710z_upMQ.._gaMTUxMDY1MDE5Mi4xNzM5NjI5MDEw_ga_CW55HF8NVT*MTczOTYyOTAwOS4xLjAuMTczOTYyOTAwOS4wLjAuMA. (Consulté le 14 février)

Firebase Docs (Authentication ) : https://firebase.google.com/docs/web/setup?_gl=1tglnd4_upMQ.._gaMTUxMDY1MDE5Mi4xNzM5NjI5MDEw_ga_CW55HF8NVT*MTczOTYyOTAwOS4xLjAuMTczOTYyOTAwOS4wLjAuMA..#add-sdk-and-initialize (Consulté le 14 février)

Firebase Docs (Authentication ) : https://firebase.google.com/docs/auth/web/start?_gl=1x2710z_upMQ.._gaMTUxMDY1MDE5Mi4xNzM5NjI5MDEw_ga_CW55HF8NVT*MTczOTYyOTAwOS4xLjAuMTczOTYyOTAwOS4wLjAuMA..#web_2 (Consulté le 14 février)