Authentification des utilisateurs avec Firebase & React

Firebase propose des solutions d’authentification qui vous permettent d’enregistrer et de connecter facilement des personnes. Vous pouvez utiliser l’e-mail, les mots de passe, le numéro de contact, ainsi que les fournisseurs d’identité tels que Google et Facebook.

Dans ce didacticiel, vous découvrirez exactement comment vous pouvez utiliser Firebase Authentication dans React pour vérifier les clients à l’aide d’un e-mail et d’un mot de passe. Vous conserverez les informations individuelles recueillies dans Firestore, une base de données cloud NoSQL également de Firebase.

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

Créer une application Firebase

Pour lier votre application à Base de feu , enregistrez votre application auprès de Firebase pour obtenir un objet de configuration. C’est ce dont vous vous servirez 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 aussi Créez un projet.
2. Donnez un nom à votre projet et cliquez créer pour commencer le processus.
3. Clique sur le la toile l’icône (<) sur la page Web de révision de votre projet pour vous inscrire à l'application.
4. Donnez à votre application un nom de votre option et cliquez sur Inscrivez-vous . Vous n’avez pas besoin d’autoriser l’hébergement Firebase.
5. Copiez l’élément de configuration sous Ajouter le SDK Firebase .

Créer une application réactive

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

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

Authentifier les utilisateurs avec les fonctions Firebase

Avant d’utiliser Firebase, installez-le.

Créer une nouvelle donnée, base de feu. js, et démarrez Firebase.

Utilisez les éléments de configuration que vous avez copiés lors de l’enregistrement de l’application.

Importez ensuite les composants Firebase que vous utiliserez.

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

le S’inscrire fonction transmet l’e-mail et le mot de passe à createUserWithEmailAndPassword pour enregistrer un tout nouveau client. createUserWithEmailAndPassword renvoie les informations utilisateur dont vous vous servirez pour développer une toute nouvelle fiche individuelle dans la base de données.

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

Ensuite, dans le s’identifier fonctionnalité transmettre l’e-mail ainsi que le mot de passe au Se connecterAvecEmailEtMotDePasse fonction pour enregistrer un client enregistré.

Les fonctionnalités d’inscription et de déconnexion renvoient la valeur true si elle est effective et un message d’erreur en cas d’erreur.

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

Créer des formulaires de réaction

Les types de connexion et d’inscription collecteront l’e-mail ainsi que le mot de passe du client.

Créer un nouveau composant S’inscrire. js ainsi que les éléments suivants.

Ici, vous développez un type d’inscription tout en gardant un œil sur l’e-mail et le mot de passe en utilisant l’état. Dès que vous envoyez le formulaire, le onSubmit événement déclenche la handleSubmit() fonction qui appelle le S’inscrire() fonction de base de feu. js . Si la fonction renvoie une erreur, mettez à jour l’état d’erreur et affichez le message d’erreur.

Pour le type de connexion, développez S’identifier. js et ajouter le collant à.

Le type de connexion est assez similaire à la page Web d’inscription, sauf que la soumission appelle le s’identifier() caractéristique.

Enfin, développez la page Web Profil. Il s’agit de la page vers laquelle l’application redirigera certainement les clients après une authentification réussie.

Créer Profil. js ainsi que d’ajouter la conformité avec.

Dans cet élément, vous avez la rubrique Profil ainsi que le bouton de déconnexion. le sur clic gestionnaire sur le bouton active le handleLogout fonction qui déconnecte l’individu.

Créer des routes d’authentification

Pour diffuser les pages que vous avez créées sur le navigateur Internet, configurez r eact-routeur-dom.

Installer réagir-routeur-dom :

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

Jusqu’à présent, l’application peut inscrire un utilisateur, l’autoriser et également le déconnecter. Alors, comment savoir si un client est visité ou non ?

Dans la partie suivante de ce didacticiel, vous verrez certainement comment vous pouvez utiliser le contexte React pour surveiller la condition d’authentification d’un individu dans l’application.

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

React Context est un outil de surveillance d’état qui simplifie le partage de données entre les applications. C’est une meilleure alternative à l’exploration d’accessoires, où les informations transmettent l’arbre du parent au jeune jusqu’à ce qu’il atteigne le composant qui le nécessite.

Créer un contexte d’authentification

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

Ensuite, développez le fournisseur dans AuthProvider. js . Cela permettra certainement aux éléments d’utiliser AuthContext .

Ici, vous obtenez la valeur de l’utilisateur en utilisant le onAuthStateChanged() technique de Firebase. Cette technique renvoie un objet individuel s’il confirme l’utilisateur et null s’il ne le peut pas. En utilisant le crochet useEffect(), la valeur individuelle est mise à jour chaque fois que la condition de vérification change.

Dans indice. js couvrir les chemins avec Fournisseur d’authentification pour garantir l’accès de toutes les pièces au client dans le cadre :

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

Pour protéger les itinéraires délicats, inspectez la qualité d’authentification d’un client essayant de naviguer vers une page sécurisée comme la page Web de profil.

Modifier Profil. js pour rediriger un client s’il n’est pas confirmé.

L’application crée conditionnellement la page Web du profil en redirigeant l’individu vers la page de connexion s’il n’est pas confirmé.

Aller plus loin avec l’authentification Firebase

Dans ce didacticiel, vous avez utilisé Firebase pour valider les clients utilisant leur adresse e-mail et leur mot de passe. Vous avez également créé des documents individuels dans Firestore. Firebase offre des fonctions permettant de travailler avec des sociétés de vérification telles que Google, Facebook et Twitter.