Firebase bietet Authentifizierungsdienste, mit denen Sie Benutzer einfach registrieren und anmelden können. Sie können E-Mail, Passwörter, Telefonnummern und Identitätsanbieter wie Google und Facebook verwenden.
In diesem Tutorial erfahren Sie, wie Sie die Firebase-Authentifizierung in React verwenden können, um Benutzer mit einer E-Mail und einem Passwort zu authentifizieren. Sie speichern die gesammelten Benutzerdaten in Firestore, einer NoSQL-Cloud-Datenbank, ebenfalls von Firebase.
Beachten Sie, dass dieses Tutorial Firebase v9 und React Router v6 verwendet.
Erstellen Sie eine Firebase-Anwendung
Um Ihre Anwendung zu verbinden Firebase, registrieren Sie Ihre App bei Firebase, um ein Konfigurationsobjekt zu erhalten. Damit initialisieren Sie Firebase in Ihrer React-Anwendung.
Führen Sie die folgenden Schritte aus, um eine Firebase-Anwendung zu erstellen.
- Gehen Sie zu den Firebase-Konsole und klicken Erstellen Sie ein Projekt.
- Geben Sie Ihrem Projekt einen Namen und klicken Sie schaffen um den Prozess zu starten.
- Klicken Sie auf die Netz Symbol (
- Geben Sie Ihrer App einen Namen Ihrer Wahl und klicken Sie App registrieren. Sie müssen Firebase Hosting nicht aktivieren.
- Kopieren Sie das Konfigurationsobjekt unter Fügen Sie das Firebase-SDK hinzu.
Erstellen Sie eine React-Anwendung
Verwenden Erstellen-Reagieren-App um eine React-App zu rüsten.
npx Create-React-App React-Auth-Firebase
Navigieren Sie zum Ordner und starten Sie die Anwendung.
cd reagieren-auth-firebase
npm-Lauf starten
Authentifizieren Sie Benutzer mit Firebase-Funktionen
Installieren Sie es, bevor Sie Firebase verwenden.
npm i firebase
Erstellen Sie eine neue Datei, firebase.js, und initialisieren Sie Firebase.
importiere { initializeApp } aus "firebase/app";
const firebaseConfig = {
API-Schlüssel: ,
authDomain: ,
Projekt-ID: ,
SpeicherEimer: ,
MessagingSenderId: ,
appId:
};
// Firebase initialisieren
const app = initializeApp (firebaseConfig);
Verwenden Sie das Konfigurationsobjekt, das Sie kopiert haben, als Sie die App registriert haben.
Importieren Sie als Nächstes die Firebase-Module, die Sie verwenden werden.
importieren {
getAuth,
createUserWithEmailAndPassword,
AnmeldenMitE-MailUndPasswort,
austragen,
} von "firebase/auth";
import { getFirestore, addDoc, collection } aus „firebase/firestore“;
const db = getFirestore();
const auth = getAuth();Zu Benutzer authentifizierenmüssen Sie drei Funktionen erstellen: signUp, signIn und signOut.
Die Anmeldung Funktion übergibt die E-Mail und das Passwort an createUserWithEmailAndPassword um einen neuen Benutzer zu registrieren. createUserWithEmailAndPassword gibt die Benutzerdaten zurück, die Sie zum Erstellen eines neuen Benutzerdatensatzes in der Datenbank verwenden.
const signUp = async (E-Mail, Passwort) => {
Versuchen {
const userCredential = warte auf createUserWithEmailAndPassword(
Authentifizierung,
Email,
Passwort
);
const user = userCredential.user;
await addDoc (Sammlung (db, "Benutzer"), {
uid: user.uid,
E-Mail: Benutzer.E-Mail,
});
Rückgabe wahr
} Fang (Fehler) {
return {error: error.message}
}
};
Beachten Sie, dass Sie vor der Registrierung nicht prüfen, ob die E-Mail-Adresse bereits verwendet wird, da Firebase dies für Sie übernimmt.
Als nächstes im Anmelden Funktion übergeben Sie die E-Mail und das Passwort an die AnmeldenMitE-MailUndPasswort Funktion zum Anmelden eines registrierten Benutzers.
const signIn = async (E-Mail, Passwort) => {
Versuchen {
const userCredential = warte auf signInWithEmailAndPassword(
Authentifizierung,
Email,
Passwort
);
const user = userCredential.user;
Rückgabe wahr
} Fang (Fehler) {
return {error: error.message}
}
};
Sowohl die signUp- als auch die signOut-Funktion geben bei Erfolg „true“ und eine Fehlermeldung zurück, wenn ein Fehler auftritt.
Die signOut-Funktion ist recht einfach. Es ruft die austragen() Funktion von Firebase.
const signOut = async() => {
Versuchen {
Abmeldung abwarten (auth)
Rückgabe wahr
} Fang (Fehler) {
falsch zurückgeben
}
};
Reaktionsformulare erstellen
Die Anmelde- und Registrierungsformulare erfassen die E-Mail-Adresse und das Passwort des Benutzers.
Erstellen Sie eine neue Komponente Signup.js und füge folgendes hinzu.
importiere { useState } aus "reagieren";
importiere { Link } aus "react-router-dom";
importiere { signUp } aus "./firebase";
const Anmeldung = () => {
const [E-Mail, setE-Mail] = useState("");
const [Passwort, setPassword] = useState("");
const [error, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
if (Passwort !== Passwort2) {
seterror("Passwörter stimmen nicht überein");
} anders {
setEmail("");
Passwort festlegen("");
const res = Anmeldung abwarten (E-Mail, Passwort);
if (res.error) seterror (res.error)
}
};
Rückkehr (
<>
Anmeldung
{Error? {Error}: Null}
bereits registriert? Anmeldung
);
};
Standardanmeldung exportieren;
Hier erstellen Sie ein Anmeldeformular und verfolgen die E-Mail-Adresse und das Passwort mithilfe des Status. Sobald Sie das Formular absenden, wird die onSubmit Ereignis löst die aus handleSubmit() Funktion, die die aufruft Anmeldung() Funktion ab firebase.js. Wenn die Funktion einen Fehler zurückgibt, aktualisieren Sie den Fehlerstatus und zeigen Sie die Fehlermeldung an.
Erstellen Sie für das Anmeldeformular Signin.js und füge folgendes hinzu.
importiere { useState } aus "reagieren";
importiere { signIn } aus "./firebase";
const Login = () => {
const [E-Mail, setE-Mail] = useState("");
const [Passwort, setPassword] = useState("");
const [error, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
setEmail("");
Passwort festlegen("");
const res = Anmeldung abwarten (E-Mail, Passwort);
if (res.error) seterror (res.error);
};
Rückkehr (
<>
{Error? {Error}: Null}
);
};
Standard-Login exportieren;
Das Anmeldeformular ist der Anmeldeseite ziemlich ähnlich, außer dass die Übermittlung die aufruft Anmelden() Funktion.
Erstellen Sie zuletzt die Profilseite. Dies ist die Seite, auf die die App Benutzer nach erfolgreicher Authentifizierung umleitet.
Schaffen Profil.js und füge folgendes hinzu.
importiere {signOut} aus "./firebase";
konstantes Profil = () => {
const handleLogout = async () => {
warte auf signOut();
};
Rückkehr (
<>
Profil
);
};
Standardprofil exportieren;
In dieser Komponente haben Sie die Überschrift Profil und die Schaltfläche Abmelden. Die onClick Handler auf der Schaltfläche löst die aus handleLogout Funktion, die den Benutzer abmeldet.
Authentifizierungsrouten erstellen
Um die von Ihnen erstellten Seiten dem Browser bereitzustellen, richten Sie r einEact-Router-Dom.
Installieren reagieren-router-dom:
npm ich reagiere-router-dom
Im index.js, konfigurieren reagieren-router-dom:
Reagieren von "Reagieren" importieren;
importiere ReactDOM von "react-dom";
importiere {BrowserRouter, Routes, Route} aus "react-router-dom";
App aus "./App" importieren;
Login aus "./Login" importieren;
Profil aus "./Profile" importieren;
ReactDOM.render(
} />
} />
} />
document.getElementById("root")
);
Bis zu diesem Punkt kann die Anwendung einen Benutzer registrieren, ihn anmelden und ihn abmelden. Woher wissen Sie also, ob ein Benutzer angemeldet ist oder nicht?
Im nächsten Abschnitt dieses Tutorials erfahren Sie, wie Sie den React-Kontext verwenden können, um den Authentifizierungsstatus eines Benutzers in der gesamten Anwendung zu verfolgen.
Verwalten Sie die Authentifizierung mit der React Context API
React Context ist ein Zustandsverwaltungstool, das den Datenaustausch zwischen Apps vereinfacht. Es ist eine bessere Alternative zum Prop Drilling, bei dem Daten den Baum von übergeordneten zu untergeordneten Elementen weitergeben, bis sie die Komponente erreichen, die sie benötigt.
Authentifizierungskontext erstellen
In dem Quelle Ordner, hinzufügen AuthContext.js Datei und erstellen und exportieren AuthContext.
importiere { createContext } aus "reagieren";
const AuthContext = createContext();
Standard-AuthContext exportieren;
Erstellen Sie als Nächstes den Anbieter in AuthProvider.js. Es ermöglicht die Verwendung von Komponenten AuthContext.
import { getAuth, onAuthStateChanged } aus "firebase/auth";
import { useState, useEffect } from 'react';
AuthContext aus './AuthContext' importieren
const auth = getAuth()
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState (null);
useEffect(() => {
onAuthStateChanged (auth, (Benutzer) => {
setUser (Benutzer)
})
}, []);
Rückkehr ({Kinder}
);
};
Hier erhalten Sie den Benutzerwert, indem Sie die verwenden onAuthStateChanged() Methode von Firebase. Diese Methode gibt ein Benutzerobjekt zurück, wenn sie den Benutzer authentifiziert, und null, wenn dies nicht möglich ist. Durch die Verwendung der useEffect()-Hook, wird der Benutzerwert jedes Mal aktualisiert, wenn sich der Authentifizierungsstatus ändert.
Im index.js, wickeln Sie die Routen mit ein AuthProvider um sicherzustellen, dass alle Komponenten auf den Benutzer im Kontext zugreifen:
importiere { AuthProvider } aus "./AuthProvider";
ReactDOM.render(
} />
} />
} />
,
document.getElementById("root")
);
Erstellen Sie geschützte Routen
Zu empfindliche Strecken schützen, überprüfen Sie den Authentifizierungsstatus eines Benutzers, der versucht, zu einer geschützten Seite wie der Profilseite zu navigieren.
Ändern Profil.js um einen Benutzer umzuleiten, wenn er nicht authentifiziert ist.
importiere {useContext} aus "reagieren";
AuthContext aus "./AuthContext" importieren;
importiere { useNavigate, Navigate } aus "react-router-dom";
importiere {signOut} aus "./firebase";
konstantes Profil = () => {
const { user } = useContext (AuthContext);
const navigation = useNavigate();
const handleLogout = async () => {
warte auf signOut();
};
if (!Benutzer) {
Rückkehr ;
}
Rückkehr (
<>
Profil
);
};
Standardprofil exportieren;Die App bedingt macht die Profilseite, indem der Benutzer auf die Anmeldeseite umgeleitet wird, wenn er nicht authentifiziert ist.
Weiter geht es mit der Firebase-Authentifizierung
In diesem Tutorial haben Sie Firebase verwendet, um Benutzer mit ihrer E-Mail-Adresse und ihrem Passwort zu authentifizieren. Sie haben auch Benutzerdatensätze in Firestore erstellt. Firebase bietet Funktionen für die Zusammenarbeit mit Authentifizierungsanbietern wie Google, Facebook und Twitter.
10 Best Practices für Reagieren, die Sie im Jahr 2022 befolgen müssen
Lesen Sie weiter
Verwandte Themen
- Programmierung
- Reagieren
- Programmierung
- JavaScript
Über den Autor
Mary Gathoni ist eine Softwareentwicklerin mit einer Leidenschaft für die Erstellung technischer Inhalte, die nicht nur informativ, sondern auch ansprechend sind. Wenn sie nicht gerade programmiert oder schreibt, trifft sie sich gerne mit Freunden und ist draußen.
Abonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich anzumelden
