So richten Sie die passwortlose Firebase-Authentifizierung mit einer React-Webanwendung ein

Einführung

Dieses Handbuch ist eine Ergänzung zu „So richten Sie die Firebase-Authentifizierung mit einer React-Webanwendung ein“ . In der Einleitung dieses Leitfadens habe ich darauf hingewiesen, dass Firebase über die grundlegende E-Mail-/Passwort-Authentifizierung hinaus noch andere Authentifizierungsschemata bietet. Eine dieser Alternativen ist die passwortlose Authentifizierung .

Die passwortlose Authentifizierung ist eine attraktive Option beim Erstellen von Anwendungen. Es vereinfacht die Benutzererfahrung, da Ihre Benutzer sich ihre Passwörter nicht merken müssen und sich daher auch keine Sorgen machen müssen, sie zu verlieren. Es erleichtert auch die Entwicklungserfahrung, da keine Passworterfassungs- oder Verwaltungslogik entworfen werden muss.

In dieser Anleitung erstellen Sie einen einfachen Anmelde-/Bestätigungs-/Profil-/Abmelde-Workflow, der die passwortlose Authentifizierung von Firebase implementiert.

Bevor Sie beginnen

Google legt verschiedene Limits für die Firebase-Authentifizierung fest. Wenn Sie den kostenlosen Spark- Plan nutzen, beachten Sie, dass Sie auf 5 Anmeldelink-E-Mails pro Tag beschränkt sind. Während der Spark-Plan für Testzwecke ausreichend sein kann, müssen Sie ein Upgrade auf den nutzungsbasierten Blaze- Plan durchführen, um dieses Limit zu überschreiten.

Voraussetzungen

In dieser Anleitung beziehe ich mich auf die Anleitung „So richten Sie die Firebase-Authentifizierung mit einer React-Webanwendung ein“ als Voraussetzungsanleitung und auf das zugehörige Projekt als Voraussetzungsprojekt .

Um diesen Leitfaden auszufüllen, benötigen Sie Folgendes:

• Den Leitfaden zu den Voraussetzungen einschließlich aller Voraussetzungen abgeschlossen haben.

Schritt 1 – Aktivieren der passwortlosen Authentifizierung mit Ihrem Firebase-Projekt

Im Leitfaden zu den Voraussetzungen haben Sie ein neues Firebase-Projekt für die grundlegende E-Mail-/Passwort-Authentifizierung erstellt. Jetzt aktivieren Sie dasselbe Projekt für die passwortlose Authentifizierung. Melden Sie sich bei Ihrem Firebase-Konto an und klicken Sie auf „Zur Konsole gehen“ .

1. Klicken Sie auf Ihr Authentifizierungsprojekt, das im Firebase-Projekt-Dashboard aufgeführt ist. In diesem Handbuch wird der Projektname my-auth-test verwendet.

2. Klicken Sie im linken Bereichsmenü auf Authentifizierung .

3. Klicken Sie im Hauptfenster auf die Registerkarte Anmeldemethode .

4. Aufgrund Ihrer Arbeit im Leitfaden zu den Voraussetzungen sollte in der Tabelle „Anmeldeanbieter“ in der Spalte „ Anbieter “ bereits „E-Mail/Passwort“ mit dem Status „ Aktiviert “ angezeigt werden. Klicken Sie auf das Stiftsymbol, um das Konfigurationsfenster für den E-Mail-/Passwort- Anbieter zu öffnen.

5. Klicken Sie auf den Schalter, um den E-Mail-Link (passwortlose Anmeldung) zu aktivieren.

6. Klicken Sie auf Speichern .

   
   

Ihr Firebase-Projekt ist jetzt für die Unterstützung der passwortlosen Authentifizierung konfiguriert.

Schritt 2 – Erstellen eines neuen React-Projekts und Installieren von Paketen

Schritt 2a – Erstellen eines neuen Reaktionsprojekts

Erstellen Sie ein neues React-Projekt mit dem gewünschten Anwendungsnamen. Dieses Handbuch verwendet passwordless-auth .

 npx create-react-app passwordless-auth

Schritt 2b – Pakete installieren

Für diese Anleitung ist die Installation von 3 Node.js-Paketen erforderlich:

• Firebase : Das Firebase SDK.
• React Router DOM : Für das Routing.
• Bootstrap : Zum Stylen.

Installieren Sie jedes der drei oben genannten Pakete über npm :

 npm install firebase

 npm install react-router-dom

 npm install bootstrap

Schritt 3 – Kopieren Sie firebase.js aus dem Prerequisite-Projekt

Im vorausgesetzten Projekt haben Sie eine Datei firebase.js erstellt, die Ihre Firebase-Projektkonfigurationsdaten verwendet, um eine Instanz des Firebase-Authentifizierungsdienstes zu erstellen. Ihre Datei firebase.js sollte die folgende Struktur mit den Konfigurationswerten Ihres Firebase-Projekts haben:

 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 }

Kopieren Sie firebase.js in Ihren neuen React-Projektordner.

Schritt 4 – Erstellen der React-Anwendung

Schritt 4a – Übersicht über die React-Anwendungskomponenten

Die React-Anwendung besteht aus 5 Komponenten: App , Layout , Login , Confirm und Profile .

App

• Die App Komponente definiert die gesamte Anwendungsstruktur, einschließlich Routing.

Layout

• Die Layout Komponente gibt das Anwendungs-Markup an, das über alle Routen hinweg konsistent bleibt.

Login

• Der Einstiegspunkt des Benutzers in die Anwendung ist das Anmeldeformular.
• Wenn ein Benutzer versucht, sich über seine E-Mail-Adresse anzumelden, wird eine E-Mail mit einem Anmeldelink an seine E-Mail-Adresse gesendet.

Confirm

• Der Benutzer wird zur Confirm weitergeleitet, wenn er auf einen Anmeldelink klickt.
• Die Seite fordert den Benutzer auf, die E-Mail-Adresse zu bestätigen, die er bei der Anmeldung verwendet hat.

Profile

• Nach der Bestätigung seiner E-Mail-Adresse wird der Benutzer zur Profile weitergeleitet.
• Der Benutzer kann auf der Profile auf die Schaltfläche „Abmelden“ klicken, um sich von seinem Konto abzumelden.

Das endgültige src Verzeichnis enthält die folgenden Dateien:

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

Schritt 4b – Bereinigen der React-Projektvorlage und Kopieren von Dateien aus dem Voraussetzungsprojekt

1. Sie können dieselben Dateien aus der React-Projektvorlage löschen, wie in Schritt 5b.1 des Leitfadens zu den Voraussetzungen beschrieben. Löschen Sie die folgenden Dateien aus Ihrem React-Projekt:

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

2. Kopieren Sie index.js aus dem erforderlichen Projekt in Ihren neuen Projektordner. Dieses Handbuch verwendet dieselbe Datei. Wenn Sie index.js neu erstellen müssen, lesen Sie Schritt 5b.2 des Leitfadens zu den Voraussetzungen oder kopieren Sie den Codeblock unten.

3. Kopieren Sie Layout.jsx aus dem erforderlichen Projekt in Ihren neuen Projektordner. Dieses Handbuch verwendet dieselbe Datei. Wenn Sie Layout.jsx neu erstellen müssen, lesen Sie Schritt 5d des Leitfadens zu den Voraussetzungen oder kopieren Sie den Codeblock unten. Optional können Sie den Projekttext im <p> -Tag von Layout.jsx auf React With Firebase Passwordless Authentication oder einen anderen Titel aktualisieren, den Sie bevorzugen.

   
   

Ihre index.js und Layout.jsx Dateien sollten wie folgt aussehen:

 // 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

Schritt 4c – Erstellen App.js

Die App.js Datei ist weitgehend dieselbe wie im vorausgesetzten Projekt, mit Änderungen in nur zwei Zeilen. Um das Erstellen der Datei zu erleichtern, kopieren Sie App.js aus dem erforderlichen Projekt in Ihren neuen Projektordner.

1. Löschen Sie die folgende import aus der Datei und ersetzen Sie sie wie unten gezeigt:

   
   

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

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

2. Löschen Sie die folgende <Route> aus der Datei und ersetzen Sie sie wie unten gezeigt:

   
   

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

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

3. Speichern Sie App.js

   
   

Die vollständige Datei sollte nun wie folgt aussehen:

 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

Beachten Sie, dass die Login Komponente wieder die Ausgangsroute der Anwendung ist, wie es beim vorausgesetzten Projekt der Fall war.

Schritt 4d – Erstellen von Login.jsx

Bei der passwortlosen Authentifizierung müssen Sie natürlich kein Passwortfeld einschließen und auch den Status für die Passworteingabe nicht verwalten. Das Anmeldeformular muss also nur die E-Mail-Adresse des Benutzers erfassen.

1. Erstellen Sie eine neue Login.jsx Datei im src Verzeichnis.

2. Fügen Sie den folgenden Code hinzu:

   
   

 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. Speichern Sie Login.jsx .

Nach der Erfassung der E-Mail-Adresse des Benutzers sendet das Login.jsx Formular über die sendSignInLinkToEmail Methode von Firebase eine E-Mail mit einem Anmeldelink an seine Adresse. Bei Erfolg wird der Benutzer benachrichtigt, dass die E-Mail gesendet wurde. Beachten Sie, dass das actionCodeSettings Objekt als Parameter an die sendSignInLinkToEmail -Methode übergeben wird und die URL enthält, zu der der Benutzer weitergeleitet wird, wenn er auf den per E-Mail gesendeten Anmeldelink klickt. In diesem Fall wird die URL der in App.js angegebenen Route /confirm zugeordnet.

Schritt 4e – Erstellen von Confirm.jsx .

signInWithEmailLink Methode von Firebase wird verwendet, um einen Benutzer anzumelden, der auf einen Anmeldelink geklickt hat. Wie Sie gleich sehen werden, benötigt die Methode einen email Parameter und der Wert von email muss mit der E-Mail-Adresse übereinstimmen, die der Benutzer bei der Anmeldung über das Anmeldeformular verwendet hat. Confirm.jsx zeigt dem Benutzer ein Formular zur Bestätigung seiner E-Mail-Adresse an und versucht anschließend, den Benutzer anzumelden.

1. Erstellen Sie eine neue Datei Confirm.jsx im Verzeichnis src .

2. Fügen Sie den folgenden Code hinzu:

   
   

 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. Speichern Sie Confirm.jsx .

Die Methode isSignInWithEmailLink prüft zunächst, ob der vom Benutzer verwendete Anmeldelink gültig ist. Wenn dies der Fall ist, wird die Methode signInWithEmailLink aufgerufen, um den Benutzer anzumelden. Um es noch einmal zu betonen: Der an die Methode signInWithEmailLink übergebene E- email Wert muss mit der E-Mail-Adresse übereinstimmen, die der Benutzer im Anmeldeformular verwendet hat. Beachten Sie, dass Firebase den Benutzer automatisch im Firebase-Authentifizierungsspeicher erstellt, wenn es sich um einen neuen Benutzer handelt (d. h. wenn er sich zum ersten Mal anmeldet). Dies ist ein weiteres Beispiel für die vereinfachte Erfahrung, die die passwortlose Authentifizierung bietet: Die Kontoerstellung für neue Benutzer erfolgt automatisch.

Schritt 4f – Erstellen von Profile.jsx

Die letzte Komponente, die Sie erstellen werden, ist Profile.jsx . Benutzer werden zu dieser Komponente weitergeleitet, wenn sie sich erfolgreich über Confirm.jsx anmelden. Die Route begrüßt den Benutzer mit seiner E-Mail-Adresse und bietet eine Schaltfläche zum Abmelden. Beim Abmelden wird der Benutzer zurück zur Login weitergeleitet.

1. Erstellen Sie eine neue Profile.jsx Datei im src Verzeichnis.

2. Fügen Sie den folgenden Code hinzu:

   
   

 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. Speichern Sie Profile.jsx .

Schritt 5 – Testen der Anwendung

1. Starten Sie die React-Anwendung:

   
   

 npm start

2. Navigieren Sie in Ihrem Browser zu locahost:3000 , wenn Ihr Browser nicht automatisch startet. Sie sollten das Login sehen.

3. Geben Sie die E-Mail-Adresse ein, mit der Sie sich anmelden möchten, und klicken Sie auf „Senden“ . Wenn die Übermittlung erfolgreich war, wird eine Benachrichtigung angezeigt, dass eine E-Mail mit einem Anmeldelink an Ihre E-Mail-Adresse gesendet wurde.

   
   

4. Melden Sie sich bei Ihrem E-Mail-Konto an und suchen Sie nach der E-Mail mit dem Firebase-Anmeldelink. Die Betreffzeile sollte ähnlich wie Sign in to project-1078604952662 sein, wobei die 13-stellige Zahlenfolge die messagingSenderId Ihres Firebase-Projekts darstellt (siehe Schritt 3 dieser Anleitung). Im optionalen Abschnitt unten erkläre ich, wie Sie den Namen Ihres Firebase-Projekts ändern können, um in E-Mails mit Anmeldelinks einen „benutzerfreundlichen“ Namen anzuzeigen. Öffnen Sie zunächst die E-Mail mit dem Anmeldelink und klicken Sie auf den Anmeldelink. Sie werden zum Confirm weitergeleitet.

5. Geben Sie im Confirm die E-Mail-Adresse ein, die Sie bei der Anmeldung verwendet haben. Klicken Sie auf Bestätigen . Wenn die Bestätigung erfolgreich ist, werden Sie zur Profile weitergeleitet.

   
   

6. Klicken Sie auf der Profile auf die Schaltfläche „Abmelden“ , um sich abzumelden. Wenn die Abmeldung erfolgreich ist, werden Sie zum Login zurückgeleitet.

   
   

Die oben genannten Schritte erfassen den Workflow für die Anwendung.

Optional: Ändern Sie Ihren Projektnamen

Sie können Ihren Projektnamen ändern, sodass von Firebase gesendete Anmeldelink-E-Mails einen „benutzerfreundlichen“ Namen anstelle von beispielsweise project-1078604952662 anzeigen. Melden Sie sich bei Ihrem Firebase-Konto an und klicken Sie auf „Zur Konsole gehen“ .

1. Klicken Sie auf Ihr Authentifizierungsprojekt, das im Firebase-Projekt-Dashboard aufgeführt ist.
2. Klicken Sie im linken Bedienfeldmenü auf das Zahnradsymbol neben „Projektübersicht“ . Die Registerkarte „Allgemein“ sollte bereits ausgewählt sein.
3. Scrollen Sie im Abschnitt „Ihr Projekt“ nach unten zur Option „Öffentlich zugänglicher Name“ .
4. Klicken Sie auf das Stiftsymbol und ändern Sie Ihren Projektnamen wie gewünscht.
5. Klicken Sie auf Speichern . In Ihren Anmeldelink-E-Mails wird nun der aktualisierte Projektname angezeigt.

Fazit und nächste Schritte

Die passwortlose Authentifizierung scheint bei Anwendungsentwicklern eine immer beliebtere Wahl zu sein, und das ist verständlich. Neben dem offensichtlichen Vorteil, dass die Verwaltung von Passwörtern entfällt, ist auch keine E-Mail-Verifizierung erforderlich, da der Vorgang des Sendens des Anmeldelinks eine Verifizierung an sich ist.

Wie beim vorausgesetzten Projekt ist die Implementierung hier grundlegend. Sie könnten einfache Verbesserungen in Betracht ziehen, wie zum Beispiel:

• Blockieren/Blacklisting bestimmter E-Mail-Adressdomänen (z. B. häufig vorkommende Spam-E-Mail-Domänen).

• Lokales Speichern der vom Benutzer auf der Login eingegebenen E-Mail-Adresse und Überprüfung der Existenz der E-Mail-Adresse auf der Confirm . Wenn der Benutzer bei diesem Ansatz auf demselben Gerät, auf dem er auf die Login zugegriffen hat, auf einen Anmeldelink klickt, muss er seine E-Mail-Adresse nicht erneut auf der Confirm eingeben, da diese wiederhergestellt wird aus dem lokalen Speicher. Dies sorgt für ein noch reibungsloseres Benutzererlebnis.

  
  

Weitere Informationen zur passwortlosen Firebase-Authentifizierung finden Sie in der offiziellen Dokumentation .