Comment configurer l'authentification sans mot de passe Firebase avec une application Web React

Introduction

Ce guide est un supplément à Comment configurer l'authentification Firebase avec une application Web React . Dans l'introduction de ce guide, j'ai noté que Firebase propose d'autres systèmes d'authentification au-delà de l'authentification de base par e-mail/mot de passe. L'une de ces alternatives est l'authentification sans mot de passe .

L'authentification sans mot de passe est une option intéressante lors de la création d'applications. Cela simplifie l'expérience utilisateur puisque vos utilisateurs n'ont pas besoin de se souvenir de leur(s) mot(s) de passe et n'ont donc jamais non plus à craindre de les perdre. Cela facilite également l’expérience de développement puisqu’il n’est pas nécessaire de concevoir une logique de capture ou de gestion de mot de passe.

Dans ce guide, vous allez créer un flux de travail simple de connexion/confirmation/profil/déconnexion qui implémente l'authentification sans mot de passe de Firebase.

Avant que tu commences

Google définit diverses limites d'authentification Firebase. Si vous utilisez le forfait Spark gratuit, notez que vous serez limité à 5 e-mails de lien de connexion par jour. Bien que le plan Spark puisse être suffisant à des fins de test, vous devrez passer au plan Blaze par répartition pour dépasser cette limite.

Conditions préalables

Tout au long de ce guide, je ferai référence au guide Comment configurer l'authentification Firebase avec une application Web React comme guide prérequis et au projet associé comme projet prérequis .

Pour compléter ce guide, vous aurez besoin d'avoir :

• Vous avez terminé le guide des prérequis, y compris tous ses prérequis.

Étape 1 - Activation de l'authentification sans mot de passe avec votre projet Firebase

Dans le guide des conditions préalables, vous avez créé un nouveau projet Firebase pour l'authentification de base par e-mail/mot de passe. Maintenant, vous allez activer ce même projet pour l'authentification sans mot de passe. Connectez-vous à votre compte Firebase et cliquez sur Go to Console .

1. Cliquez sur votre projet d'authentification répertorié dans le tableau de bord des projets Firebase. Ce guide utilise le nom du projet my-auth-test .

2. Cliquez sur authentification dans le menu du panneau de gauche.

3. Cliquez sur l'onglet Méthode de connexion dans la fenêtre principale.

4. D'après votre travail dans le guide des prérequis, le tableau Fournisseurs de connexion devrait déjà afficher E-mail/Mot de passe sous la colonne Fournisseurs avec le statut Enabled . Cliquez sur l'icône en forme de crayon pour ouvrir le panneau de configuration du fournisseur d'e-mail/mot de passe .

5. Cliquez sur le bouton pour activer le lien E-mail (connexion sans mot de passe) .

6. Cliquez sur Enregistrer .

   
   

Votre projet Firebase est désormais configuré pour prendre en charge l'authentification sans mot de passe.

Étape 2 - Création d'un nouveau projet React et installation des packages

Étape 2a - Création d'un nouveau projet React

Créez un nouveau projet React en utilisant le nom de l'application souhaitée. Ce guide utilise passwordless-auth .

 npx create-react-app passwordless-auth

Étape 2b - Installation des packages

Ce guide nécessite l'installation de 3 packages Node.js :

• Firebase : Le SDK Firebase.
• React Router DOM : Pour le routage.
• Bootstrap : Pour le style.

Installez chacun des trois packages ci-dessus via npm :

 npm install firebase

 npm install react-router-dom

 npm install bootstrap

Étape 3 - Copiez firebase.js à partir du projet préalable

Dans le projet préalable, vous avez créé un fichier firebase.js qui utilise les données de configuration de votre projet Firebase pour créer une instance du service d'authentification Firebase. Votre fichier firebase.js doit avoir la structure suivante avec les valeurs de configuration de votre projet Firebase :

 import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth }

Copiez firebase.js dans votre nouveau dossier de projet React.

Étape 4 - Création de l'application React

Étape 4a - Présentation des composants de l'application React

L'application React comprendra 5 composants : App , Layout , Login , Confirm et Profile .

App

• Le composant App définit la structure globale de l'application, y compris le routage.

Layout

• Le composant Layout spécifie le balisage de l'application qui reste cohérent sur toutes les routes.

Login

• Le point d'entrée de l'utilisateur dans l'application est le formulaire de connexion.
• Lorsqu'un utilisateur tente de se connecter via son adresse e-mail, un e-mail contenant un lien de connexion est envoyé à son adresse e-mail.

Confirm

• L'utilisateur est redirigé vers la page Confirm lorsqu'il clique sur un lien de connexion.
• La page demande à l'utilisateur de confirmer l'adresse e-mail utilisée lors de sa connexion.

Profile

• L'utilisateur est redirigé vers la page Profile après avoir confirmé son adresse e-mail.
• L'utilisateur peut cliquer sur un bouton de déconnexion sur la page Profile pour se déconnecter de son compte.

Le répertoire src final contiendra les fichiers suivants :

 src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx

Étape 4b - Nettoyage du modèle de projet React et copie des fichiers du projet prérequis

1. Vous pouvez supprimer les mêmes fichiers du modèle de projet React comme décrit à l'étape 5b.1 du guide des prérequis. Supprimez les fichiers suivants de votre projet React :

• reportWebVitals.js
• setupTests.js
• logo.svg
• index.css
• App.css
• App.test.js

2. Copiez index.js du projet prérequis vers votre nouveau dossier de projet. Ce guide utilise le même fichier. Si vous devez reconstruire index.js , consultez l'étape 5b.2 du guide des prérequis ou copiez le bloc de code ci-dessous.

3. Copiez Layout.jsx du projet prérequis vers votre nouveau dossier de projet. Ce guide utilise le même fichier. Si vous devez reconstruire Layout.jsx , consultez l'étape 5d du guide des prérequis ou copiez le bloc de code ci-dessous. Vous pouvez éventuellement mettre à jour le texte du projet dans la balise <p> de Layout.jsx pour React With Firebase Passwordless Authentication ou quel que soit le titre que vous préférez.

   
   

Vos fichiers index.js et Layout.jsx doivent être les suivants :

 // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

 // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( <div className = "container-fluid"> <div className = "row justify-content-center mt-3"> <div className = "col-md-4 text-center"> <p className = "lead">React With Firebase Passwordless Authentication</p> </div> <Outlet /> </div> </div> ) } export default Layout

Étape 4c - Création App.js

Le fichier App.js est en grande partie le même que dans le projet prérequis, avec des modifications sur seulement deux lignes. Pour faciliter la création du fichier, copiez App.js du projet prérequis vers votre nouveau dossier de projet.

1. Supprimez la ligne import suivante du fichier et remplacez-la comme indiqué ci-dessous :

   
   

 // Delete this line: import Signup from "./Signup";

 // Replace it with: import Confirm from "./Confirm";

2. Supprimez le <Route> suivant du fichier et remplacez-le comme indiqué ci-dessous :

   
   

 // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>

 // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>

3. Enregistrez App.js .

   
   

Le dossier complet devrait maintenant être le suivant :

 import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( <BrowserRouter> <Routes> <Route path = "/" element = { <Layout></Layout> }> <Route index element = { <Login></Login> }></Route> <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> <Route path = "/profile" element = { <Profile></Profile> } ></Route> </Route> </Routes> </BrowserRouter> ) } export default App

Notez que le composant Login est à nouveau la route d'accueil de l'application comme c'était le cas avec le projet prérequis.

Étape 4d - Création Login.jsx

Dans le cas d'une authentification sans mot de passe, vous n'avez évidemment pas besoin d'inclure un champ de mot de passe, ni de gérer l'état de saisie du mot de passe. Ainsi, le formulaire de connexion n'a besoin que de capturer l'adresse e-mail de l'utilisateur.

1. Créez un nouveau fichier Login.jsx dans le répertoire src .

2. Ajoutez le code suivant :

   
   

 import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button> </div> </form> </div> </div> ) }

3. Enregistrez Login.jsx .

Lors de la capture de l'adresse e-mail de l'utilisateur, le formulaire Login.jsx envoie un e-mail avec un lien de connexion à son adresse via la méthode sendSignInLinkToEmail de Firebase. En cas de succès, l'utilisateur est informé que l'e-mail a été envoyé. Notez que l'objet actionCodeSettings est transmis en tant que paramètre à la méthode sendSignInLinkToEmail et inclut l'URL vers laquelle l'utilisateur sera redirigé lorsqu'il cliquera sur le lien de connexion envoyé par e-mail. Dans ce cas, l'URL correspond à la route /confirm spécifiée dans App.js .

Étape 4e - Création Confirm.jsx

La méthode signInWithEmailLink de Firebase est utilisée pour connecter un utilisateur qui a cliqué sur un lien de connexion. Comme vous le verrez dans un instant, la méthode prend un paramètre email , et la valeur de email doit correspondre à l'adresse e-mail que l'utilisateur a utilisée lors de sa connexion via le formulaire de connexion. Confirm.jsx présente à l'utilisateur un formulaire pour confirmer son adresse e-mail et tente ensuite de connecter l'utilisateur.

1. Créez un nouveau fichier Confirm.jsx dans le répertoire src .

2. Ajoutez le code suivant :

   
   

 import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button> </div> </form> </div> </div> ) } export default Confirm

3. Enregistrez Confirm.jsx .

La méthode isSignInWithEmailLink vérifie d’abord si le lien de connexion utilisé par l’utilisateur est valide. Si tel est le cas, la méthode signInWithEmailLink est appelée pour connecter l’utilisateur. Pour réitérer, la valeur email transmise à la méthode signInWithEmailLink doit correspondre à l'adresse e-mail utilisée par l'utilisateur avec le formulaire de connexion. Notez que si l'utilisateur est un nouvel utilisateur (c'est-à-dire qu'il se connecte pour la première fois), Firebase créera automatiquement l'utilisateur dans le magasin d'authentification Firebase. Ceci est un autre exemple de l'expérience simplifiée offerte par l'authentification sans mot de passe : la création de compte pour les nouveaux utilisateurs est gérée automatiquement.

Étape 4f - Création Profile.jsx

Le dernier composant que vous allez créer est Profile.jsx . Les utilisateurs sont redirigés vers ce composant lorsqu'ils se connectent avec succès via Confirm.jsx . L'itinéraire accueille l'utilisateur avec son adresse e-mail et propose un bouton pour se déconnecter. Lors de la déconnexion, l'utilisateur est redirigé vers le composant Login .

1. Créez un nouveau fichier Profile.jsx dans le répertoire src .

2. Ajoutez le code suivant :

   
   

 import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( <div className = "container"> <div className = "row justify-content-center"> <div className = "col-md-4 text-center"> <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p> <div className = "d-grid gap-2"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button> </div> </div> </div> </div> ) } export default Profile

3. Enregistrez Profile.jsx .

Étape 5 - Test de l'application

1. Démarrez l'application React :

   
   

 npm start

2. Accédez à locahost:3000 dans votre navigateur si votre navigateur ne se lance pas automatiquement. Vous devriez voir le formulaire Login .

3. Entrez l'e-mail que vous souhaitez utiliser pour vous connecter et cliquez sur Soumettre . Si la soumission réussit, une notification s'affichera indiquant qu'un e-mail avec un lien de connexion a été envoyé à votre adresse e-mail.

   
   

4. Connectez-vous à votre compte de messagerie et recherchez l'e-mail du lien de connexion Firebase. Il doit avoir une ligne d'objet similaire à Sign in to project-1078604952662 , où la séquence numérique à 13 chiffres représente le messagingSenderId de votre projet Firebase (voir l'étape 3 de ce guide). Dans la section facultative ci-dessous, j'expliquerai comment vous pouvez modifier le nom de votre projet Firebase pour afficher un nom « convivial » dans les e-mails de lien de connexion. Pour l'instant, ouvrez l'e-mail du lien de connexion et cliquez sur le lien de connexion. Vous serez redirigé vers le formulaire Confirm .

5. Saisissez l'adresse e-mail que vous avez utilisée lors de votre connexion sur le formulaire Confirm . Cliquez sur Confirmer . Si la confirmation réussit, vous serez redirigé vers la page Profile .

   
   

6. Cliquez sur le bouton Déconnexion sur la page Profile pour vous déconnecter. Si la déconnexion réussit, vous serez redirigé vers le formulaire Login .

   
   

Les étapes ci-dessus capturent le flux de travail de l'application.

Facultatif : modification du nom de votre projet

Vous pouvez modifier le nom de votre projet afin que les e-mails de lien de connexion envoyés par Firebase affichent un nom « convivial » au lieu, par exemple, project-1078604952662 . Connectez-vous à votre compte Firebase et cliquez sur Go to Console .

1. Cliquez sur votre projet d'authentification répertorié dans le tableau de bord des projets Firebase.
2. Cliquez sur l'icône d'engrenage à côté de Présentation du projet dans le menu du panneau de gauche. L'onglet Général devrait déjà être sélectionné.
3. Faites défiler jusqu'à l'option Nom destiné au public dans la section Votre projet .
4. Cliquez sur l'icône en forme de crayon et modifiez le nom de votre projet comme vous le souhaitez.
5. Cliquez sur Enregistrer . Vos e-mails de lien de connexion afficheront désormais le nom du projet mis à jour.

Conclusion et prochaines étapes

L’authentification sans mot de passe semble être un choix de plus en plus populaire parmi les développeurs d’applications, et c’est compréhensible. Au-delà de l’avantage évident d’éliminer la nécessité de gérer les mots de passe, il n’est pas non plus nécessaire de vérifier les e-mails puisque le processus d’envoi du lien de connexion est une vérification en soi.

Comme pour le projet préalable, la mise en œuvre ici est basique. Vous pourriez envisager des améliorations simples telles que :

• Bloquer/mettre sur liste noire des domaines d'adresses e-mail particuliers (c'est-à-dire les domaines de courrier indésirable courants).

• Stocker localement l'adresse e-mail saisie par l'utilisateur sur la page Login et vérifier l'existence de l'adresse e-mail sur la page Confirm . Avec cette approche, si l'utilisateur clique sur un lien de connexion sur le même appareil sur lequel il a accédé à la page Login , il n'aura pas besoin de saisir à nouveau son adresse e-mail sur la page Confirm car elle sera récupérée. du stockage local. Cela permet une expérience utilisateur encore plus fluide.

  
  

Vous pouvez en savoir plus sur l'authentification sans mot de passe Firebase via la documentation officielle .