Firebase fournit des services d'authentification qui vous permettent d'enregistrer et de connecter facilement des utilisateurs. Vous pouvez utiliser des e-mails, des mots de passe, des numéros de téléphone et des fournisseurs d'identité comme Google et Facebook.

Dans ce didacticiel, vous apprendrez comment utiliser Firebase Authentication dans React pour authentifier les utilisateurs à l'aide d'un e-mail et d'un mot de passe. Vous stockerez les données utilisateur collectées dans Firestore, une base de données cloud NoSQL également issue de Firebase.

Notez que ce tutoriel utilise Firebase v9 et React Router v6.

Créer une application Firebase

Pour connecter votre application à Base de feu, enregistrez votre application auprès de Firebase pour obtenir un objet de configuration. C'est ce que vous utiliserez pour initialiser Firebase dans votre application React.

Pour créer une application firebase, suivez les étapes suivantes.

1. Dirigez-vous vers le Console Firebase et cliquez Créez un projet.
2. Donnez un nom à votre projet et cliquez sur créer pour démarrer le processus.
instagram viewer
3. Clique sur le la toile icône (
4. Donnez à votre application un nom de votre choix et cliquez sur Enregistrer l'application. Vous n'avez pas besoin d'activer l'hébergement Firebase.
5. Copiez l'objet de configuration sous Ajouter le SDK Firebase.

Créer une application réactive

Utiliser créer-réagir-app pour échafauder une application React.

npx créer-réagir-app réagir-auth-firebase

Accédez au dossier et démarrez l'application.

cd réagir-auth-firebase
démarrage de l'exécution npm

Authentifier les utilisateurs avec les fonctions Firebase

Avant d'utiliser Firebase, installez-le.

npm je firebase

Créer un nouveau fichier, firebase.js, et initialisez Firebase.

importer { initializeApp } depuis "firebase/app" ;
const firebaseConfig = {
 clé API: ,
 authDomain : ,
 ID de projet: ,
 compartiment de stockage: ,
 messageSenderId: ,
 ID d'application: 
};
// Initialiser Firebase
const app = initializeApp (firebaseConfig);

Utilisez l'objet de configuration que vous avez copié lors de l'enregistrement de l'application.

Importez ensuite les modules Firebase que vous utiliserez.

importer {
 getAuth,
 createUserWithEmailAndPassword,
 se connecterAvecEmailEtMotDePasse,
 se déconnecter,
} de "firebase/auth" ;
import { getFirestore, addDoc, collection } de "firebase/firestore" ;
const db = getFirestore();
const auth = getAuth();

Pour authentifier les utilisateurs, vous devez créer trois fonctions: signUp, signIn et signOut.

le S'inscrire la fonction transmet l'e-mail et le mot de passe à createUserWithEmailAndPassword pour enregistrer un nouvel utilisateur. createUserWithEmailAndPassword renvoie les données de l'utilisateur que vous utiliserez pour créer un nouvel enregistrement d'utilisateur dans la base de données.

const signUp = async (email, mot de passe) => {
 essayer {
 const userCredential = attendre createUserWithEmailAndPassword(
 authentification,
 e-mail,
 le mot de passe
 );
 utilisateur constant = userCredential.user ;
 attendre addDoc (collection (db, "utilisateurs"), {
 uid: utilisateur.uid,
 email: utilisateur.email,
 });
 retourner vrai
 } capture (erreur) {
 renvoie {erreur: erreur.message}
 }
};

Notez que vous ne vérifiez pas si l'e-mail est déjà utilisé avant l'enregistrement, car Firebase s'en charge pour vous.

Ensuite, dans le s'identifier fonction passe l'email et le mot de passe au Se connecterAvecEmailEtMotDePasse fonction pour se connecter à un utilisateur enregistré.

const signIn = async (email, mot de passe) => {
 essayer {
 const userCredential = attendre signInWithEmailAndPassword(
 authentification,
 e-mail,
 le mot de passe
 );
 utilisateur constant = userCredential.user ;
 retourner vrai
 } capture (erreur) {
 renvoie {erreur: erreur.message}
 }
};

Les fonctions signUp et signOut renvoient true si elles réussissent et un message d'erreur si une erreur se produit.

La fonction signOut est assez simple. Il appelle le se déconnecter() fonction de Firebase.

const déconnexion = async() => {
 essayer {
 attendre la déconnexion (authentification)
 retourner vrai
 } capture (erreur) {
 retourner faux
 }
};

Créer des formulaires de réaction

Les formulaires de connexion et d'inscription collecteront l'adresse e-mail et le mot de passe de l'utilisateur.

Créer un nouveau composant Inscription.js et ajoutez ce qui suit.

importer { useState } de "réagir" ;
importer {Lien} à partir de "react-router-dom" ;
importer {signUp} depuis "./firebase" ;
const Inscription = () => {
 const [email, setEmail] = useState("");
 const [mot de passe, setPassword] = useState("");
 const [erreur, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 si (mot de passe !== mot de passe2) {
 seterror("Les mots de passe ne correspondent pas");
 } autre {
 setEmail("");
 setPassword("");
 const res = attendre l'inscription (email, mot de passe);
 si (res.error) seterror (res.error)
 }
 };
 retourner (
 <>
S'inscrire



 {Erreur? 
{Erreur}
: nul}


 type="e-mail"
 nom="email"
 valeur={e-mail}
 placeholder="Votre e-mail"
 obligatoire
 onChange={(e) => setEmail (e.target.value)}
 />
 type="mot de passe"
 nom="mot de passe"
 valeur={mot de passe}
 placeholder="Votre mot de passe"
 obligatoire
 onChange={(e) => setPassword (e.target.value)}
 />
Nous faire parvenir




 déjà enregistré? Connexion





 );
};
exporter l'inscription par défaut ;

Ici, vous créez un formulaire d'inscription et gardez une trace de l'e-mail et du mot de passe en utilisant l'état. Une fois que vous soumettez le formulaire, le onSubmit l'événement déclenche la handleSubmit() fonction qui appelle le S'inscrire() fonction de firebase.js. Si la fonction renvoie une erreur, mettez à jour l'état d'erreur et affichez le message d'erreur.

Pour le formulaire de connexion, créez Connexion.js et ajoutez ce qui suit.

importer { useState } de "réagir" ;
import { signIn } depuis "./firebase" ;
const Connexion = () => {
 const [email, setEmail] = useState("");
 const [mot de passe, setPassword] = useState("");
 const [erreur, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 setPassword("");
 const res = attendre la connexion (email, mot de passe);
 if (res.error) seterror (res.error);
 };
 retourner (
 <>
 {Erreur? 
{Erreur}
: nul}


 type="texte"
 nom="email"
 valeur={e-mail}
 placeholder="Votre e-mail"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="mot de passe"
 nom="mot de passe"
 valeur={mot de passe}
 placeholder="Votre mot de passe"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
exporter la connexion par défaut ;

Le formulaire de connexion est assez similaire à la page d'inscription sauf que la soumission appelle le s'identifier() une fonction.

Enfin, créez la page Profil. Il s'agit de la page vers laquelle l'application redirigera les utilisateurs après une authentification réussie.

Créer Profil.js et ajoutez ce qui suit.

importer {signOut} de "./firebase" ;
Profil const = () => {
 const handleLogout = async () => {
 attendre la déconnexion();
 };
 retourner (
 <>
Profil

Se déconnecter
 );
};
exporter le profil par défaut ;

Dans ce composant, vous avez la rubrique Profil et le bouton de déconnexion. le sur clic gestionnaire sur le bouton déclenche le handleLogout fonction qui déconnecte l'utilisateur.

Créer des routes d'authentification

Pour diffuser les pages que vous avez créées dans le navigateur, configurez react-routeur-dom.

Installer réagir-routeur-dom:

npm je réagis-routeur-dom

Dans index.js, configurer réagir-routeur-dom:

importer React depuis "react" ;
importer ReactDOM depuis "react-dom" ;
import { BrowserRouter, Routes, Route } de "react-router-dom" ;
importer l'application depuis "./App" ;
importer la connexion depuis "./Login" ;
importer le profil depuis "./Profile" ;
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("racine")
);

Jusqu'à présent, l'application peut enregistrer un utilisateur, l'inscrire et le déconnecter. Alors, comment savoir si un utilisateur est connecté ou non ?

Dans la section suivante de ce didacticiel, vous verrez comment vous pouvez utiliser le contexte React pour suivre le statut d'authentification d'un utilisateur dans l'application.

Gérer l'authentification avec l'API React Context

React Context est un outil de gestion d'état qui simplifie le partage de données entre les applications. C'est une meilleure alternative au forage d'accessoires, où les données sont transmises dans l'arbre du parent à l'enfant jusqu'à ce qu'elles atteignent le composant qui en a besoin.

Créer un contexte d'authentification

Dans le src dossier, ajouter AuthContext.js fichier et créer et exporter AuthContext.

importer { createContext } de "réagir" ;
const AuthContext = createContext();
exporter le AuthContext par défaut ;

Ensuite, créez le fournisseur dans AuthProvider.js. Cela permettra aux composants d'utiliser AuthContext.

import { getAuth, onAuthStateChanged } de "firebase/auth" ;
import { useState, useEffect } de 'réagir' ;
importer AuthContext depuis './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ enfants }) => {
 const [utilisateur, setUser] = useState (null);
 useEffet(() => {
 onAuthStateChanged (auth, (utilisateur) => {
 setUser (utilisateur)
 })
 }, []);
retourner (
{enfants}
 );
 };

Ici, vous obtenez la valeur utilisateur en utilisant le onAuthStateChanged() méthode de Firebase. Cette méthode renvoie un objet utilisateur si elle authentifie l'utilisateur et null si elle ne le peut pas. En utilisant le crochet useEffect(), la valeur utilisateur est mise à jour chaque fois que l'état d'authentification change.

Dans index.js, enveloppez les itinéraires avec Fournisseur d'authentification pour s'assurer que tous les composants accèdent à l'utilisateur dans le contexte :

import { AuthProvider } de "./AuthProvider" ;
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById("racine")
);

Créer des itinéraires protégés

Pour protéger les routes sensibles, vérifiez l'état d'authentification d'un utilisateur essayant d'accéder à une page protégée telle que la page de profil.

Modifier Profil.js pour rediriger un utilisateur s'il n'est pas authentifié.

importer { useContext } de "réagir" ;
importer AuthContext depuis "./AuthContext" ;
import { useNavigate, Navigate } de "react-router-dom" ;
importer {signOut} de "./firebase" ;
Profil const = () => {
 const { utilisateur } = useContext (AuthContext);
 const naviguer = useNavigate();
 const handleLogout = async () => {
 attendre la déconnexion();
 };
 si (!utilisateur) {
 retourner ;
 }
 retourner (
 <>
Profil

Se déconnecter
 );
};
exporter le profil par défaut ;

L'application rend conditionnellement la page de profil en redirigeant l'utilisateur vers la page de connexion s'il n'est pas authentifié.

Aller plus loin avec l'authentification Firebase

Dans ce didacticiel, vous avez utilisé Firebase pour authentifier les utilisateurs à l'aide de leur adresse e-mail et de leur mot de passe. Vous avez également créé des enregistrements d'utilisateurs dans Firestore. Firebase fournit des fonctions permettant de travailler avec des fournisseurs d'authentification tels que Google, Facebook et Twitter.

10 bonnes pratiques de réaction que vous devez suivre en 2022

Lire la suite

A propos de l'auteur