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.

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

Trop long; Pour lire

@pictureinthenoise

Credibility

HISTOIRES CONNEXES