Introduction  Ce guide est un supplément à   . 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   . Comment configurer l'authentification Firebase avec une application Web React 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   d'authentification Firebase. Si vous utilisez le forfait   gratuit, notez que vous serez   à 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   par répartition pour dépasser cette limite. limites Spark limité Blaze  Conditions préalables  Tout au long de ce guide, je ferai référence au guide   comme   et au projet associé comme   . Comment configurer l'authentification Firebase avec une application Web React guide prérequis 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   et cliquez sur   . compte Firebase Go to Console  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  Cliquez sur   dans le menu du panneau de gauche. authentification  Cliquez sur l'onglet   dans la fenêtre principale. Méthode de connexion  D'après votre travail dans le guide des prérequis, le tableau   devrait déjà afficher   sous la colonne   avec le statut   . Cliquez sur l'icône en forme de crayon pour ouvrir le panneau de configuration du fournisseur   . Fournisseurs de connexion E-mail/Mot de passe Fournisseurs Enabled d'e-mail/mot de passe  Cliquez sur le bouton pour activer le   . lien E-mail (connexion sans mot de passe)  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 :    : Le SDK Firebase. Firebase    : Pour le routage. React Router DOM    : Pour le style. Bootstrap  Installez chacun des trois packages ci-dessus via   : npm   npm install firebase   npm install react-router-dom   npm install bootstrap  Étape 3 - Copiez   à partir du projet préalable firebase.js  Dans le projet préalable, vous avez créé un fichier   qui utilise les données de configuration de votre projet Firebase pour créer une instance du service d'authentification Firebase. Votre fichier   doit avoir la structure suivante avec les valeurs de configuration   projet Firebase : firebase.js firebase.js de votre   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   dans votre nouveau dossier de projet React. firebase.js  Si vous devez revoir la configuration de votre projet Firebase, cliquez sur l'icône d'engrenage à côté de   dans le menu du panneau de gauche. L'onglet   devrait déjà être sélectionné. Faites défiler jusqu'à la section   contenant le panneau   . L'option   dans le panneau   doit déjà être sélectionnée. Les valeurs de configuration de votre projet seront répertoriées dans le bloc de code affiché. Présentation du projet Général Vos applications Applications Web npm des applications Web  Étape 4 - Création de l'application React  Étape 4a - Présentation des composants de l'application React  L'application React comprendra 5 composants :   ,   ,   ,   et   . App Layout Login Confirm Profile   App  Le composant   définit la structure globale de l'application, y compris le routage. App   Layout  Le composant   spécifie le balisage de l'application qui reste cohérent sur toutes les routes. Layout   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   lorsqu'il clique sur un lien de connexion. Confirm  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   après avoir confirmé son adresse e-mail. Profile  L'utilisateur peut cliquer sur un bouton de déconnexion sur la page   pour se déconnecter de son compte. Profile  Le répertoire   final contiendra les fichiers suivants : src   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  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  Copiez   du projet prérequis vers votre nouveau dossier de projet. Ce guide utilise le même fichier. Si vous devez reconstruire   , consultez l'étape 5b.2 du guide des prérequis ou copiez le bloc de code ci-dessous. index.js index.js  Copiez   du projet prérequis vers votre nouveau dossier de projet. Ce guide utilise le même fichier. Si vous devez reconstruire   , 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   de   pour   ou quel que soit le titre que vous préférez. Layout.jsx Layout.jsx <p> Layout.jsx React With Firebase Passwordless Authentication  Vos fichiers   et   doivent être les suivants : index.js Layout.jsx   // 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   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   du projet prérequis vers votre nouveau dossier de projet. App.js App.js  Supprimez la ligne   suivante du fichier et remplacez-la comme indiqué ci-dessous : import   // Delete this line: import Signup from "./Signup";   // Replace it with: import Confirm from "./Confirm";  Supprimez le   suivant du fichier et remplacez-le comme indiqué ci-dessous : <Route>   // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>   // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>  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   est à nouveau la route d'accueil de l'application comme c'était le cas avec le projet prérequis. Login  É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.  Créez un nouveau fichier   dans le répertoire   . Login.jsx src  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 = "name@example.com" 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> ) }  Enregistrez   . Login.jsx  Lors de la capture de l'adresse e-mail de l'utilisateur, le formulaire   envoie un e-mail avec un lien de connexion à son adresse via la méthode   de Firebase. En cas de succès, l'utilisateur est informé que l'e-mail a été envoyé. Notez que l'objet   est transmis en tant que paramètre à la méthode   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   spécifiée dans   . Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail /confirm App.js  Étape 4e - Création  Confirm.jsx  La méthode   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   , et la valeur de   doit correspondre à l'adresse e-mail que l'utilisateur a utilisée lors de sa connexion via le formulaire de connexion.   présente à l'utilisateur un formulaire pour confirmer son adresse e-mail et tente ensuite de connecter l'utilisateur. signInWithEmailLink email email Confirm.jsx  Créez un nouveau fichier   dans le répertoire   . Confirm.jsx src  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 = "name@example.com" 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  Enregistrez   . Confirm.jsx  La méthode   vérifie d’abord si le lien de connexion utilisé par l’utilisateur est valide. Si tel est le cas, la méthode   est appelée pour connecter l’utilisateur. Pour réitérer, la valeur   transmise à la méthode   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. isSignInWithEmailLink signInWithEmailLink email signInWithEmailLink  Étape 4f - Création  Profile.jsx  Le dernier composant que vous allez créer est   . Les utilisateurs sont redirigés vers ce composant lorsqu'ils se connectent avec succès via   . 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   . Profile.jsx Confirm.jsx Login  Créez un nouveau fichier   dans le répertoire   . Profile.jsx src  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  Enregistrez   . Profile.jsx  Étape 5 - Test de l'application  Démarrez l'application React :   npm start  Accédez à   dans votre navigateur si votre navigateur ne se lance pas automatiquement. Vous devriez voir le formulaire   .  locahost:3000 Login  Entrez l'e-mail que vous souhaitez utiliser pour vous connecter et cliquez sur   . 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.  Soumettre  Connectez-vous à votre compte de messagerie et recherchez l'e-mail du lien de connexion Firebase. Il doit avoir une ligne d'objet similaire à   , où la séquence numérique à 13 chiffres représente le   de votre projet Firebase (voir l'étape 3 de ce guide). Dans la section   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   .  Sign in to project-1078604952662 messagingSenderId facultative Confirm  Saisissez l'adresse e-mail que vous avez utilisée lors de votre connexion sur le formulaire   . Cliquez sur   . Si la confirmation réussit, vous serez redirigé vers la page   .  Confirm Confirmer Profile  Cliquez sur le bouton   sur la page   pour vous déconnecter. Si la déconnexion réussit, vous serez redirigé vers le formulaire   . Déconnexion Profile 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,   . Connectez-vous à votre   et cliquez sur   . project-1078604952662 compte Firebase Go to Console  Cliquez sur votre projet d'authentification répertorié dans le tableau de bord des projets Firebase.  Cliquez sur l'icône d'engrenage à côté de   dans le menu du panneau de gauche. L'onglet   devrait déjà être sélectionné. Présentation du projet Général  Faites défiler jusqu'à l'option   dans la section   . Nom destiné au public Votre projet  Cliquez sur l'icône en forme de crayon et modifiez le nom de votre projet comme vous le souhaitez.  Cliquez sur   . Vos e-mails de lien de connexion afficheront désormais le nom du projet mis à jour. Enregistrer  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   et vérifier l'existence de l'adresse e-mail sur la page   . 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   , il n'aura pas besoin de saisir à nouveau son adresse e-mail sur la page   car elle sera récupérée. du stockage local. Cela permet une expérience utilisateur encore plus fluide. Login Confirm Login Confirm  Vous pouvez en savoir plus sur l'authentification sans mot de passe Firebase via la   . documentation officielle

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Télégramme : le pont de Crypto Island vers le continent

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Télégramme : le pont de Crypto Island vers le continent

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps