Firebase biedt authenticatieservices waarmee u eenvoudig gebruikers kunt registreren en aanmelden. U kunt e-mail, wachtwoorden, telefoonnummers en identiteitsproviders zoals Google en Facebook gebruiken.
In deze zelfstudie leert u hoe u Firebase-verificatie in React kunt gebruiken om gebruikers te verifiëren met een e-mailadres en wachtwoord. U slaat de verzamelde gebruikersgegevens op in Firestore, een NoSQL-clouddatabase, ook van Firebase.
Merk op dat deze tutorial Firebase v9 en React Router v6 gebruikt.
Een Firebase-toepassing maken
Om uw applicatie te koppelen aan: Firebase, registreer uw app bij Firebase om een configuratieobject te krijgen. Dit is wat u gaat gebruiken om Firebase in uw React-toepassing te initialiseren.
Volg de volgende stappen om een Firebase-toepassing te maken.
- Ga naar de Firebase-console en klik Maak een project.
- Geef je project een naam en klik op creëren om het proces te starten.
- Klik op de Web icoon (
- Geef je app een naam naar keuze en klik op Registreer app. U hoeft Firebase Hosting niet in te schakelen.
- Kopieer het configuratie-object onder Firebase-SDK toevoegen.
Een React-toepassing maken
Gebruiken maak-reageer-app om een React-app te ondersteunen.
npx create-react-app react-auth-firebase
Navigeer naar de map en start de applicatie.
cd react-auth-firebase
npm run start
Gebruikers verifiëren met Firebase-functies
Installeer Firebase voordat u Firebase gebruikt.
npm ik vuurbasis
Maak een nieuw bestand, firebase.js, en initialiseer Firebase.
importeer { initializeApp } van "firebase/app";
const firebaseConfig = {
API sleutel: ,
authDomein: ,
project-ID: ,
opbergemmer: ,
messagingSenderId: ,
app-ID:
};
// Firebase initialiseren
const app = initializeApp (firebaseConfig);
Gebruik het configuratieobject dat u hebt gekopieerd toen u de app registreerde.
Importeer vervolgens de Firebase-modules die u gaat gebruiken.
importeren {
getAuth,
createUserWithEmailAndPassword,
aanmelden met e-mail en wachtwoord,
afmelden,
} van "firebase/auth";
importeer { getFirestore, addDoc, collection } van "firebase/firestore";
const db = getFirestore();
const auth = getAuth();Naar gebruikers authenticeren, moet u drie functies maken: aanmelden, aanmelden en afmelden.
De aanmelden functie geeft het e-mailadres en wachtwoord door aan: createUserWithEmailAndPassword om een nieuwe gebruiker te registreren. createUserWithEmailAndPassword geeft de gebruikersgegevens terug die u gaat gebruiken om een nieuw gebruikersrecord in de database aan te maken.
const signUp = async (e-mail, wachtwoord) => {
poging {
const userCredential = wacht createUserWithEmailAndPassword(
authentificatie,
e-mail,
wachtwoord
);
const gebruiker = userCredential.user;
wacht addDoc (verzameling (db, "gebruikers"), {
uid: gebruiker.uid,
e-mail: gebruiker.e-mail,
});
retourneer waar
} vangst (fout) {
retourneer {fout: error.message}
}
};
Houd er rekening mee dat u vóór de registratie niet controleert of de e-mail al in gebruik is, omdat Firebase dat voor u afhandelt.
Vervolgens, in de aanmelden functie geef het e-mailadres en wachtwoord door aan de signInWithEmailAndPassword functie om een geregistreerde gebruiker aan te melden.
const signIn = async (e-mail, wachtwoord) => {
poging {
const userCredential = wacht op signInWithEmailAndPassword(
authentificatie,
e-mail,
wachtwoord
);
const gebruiker = userCredential.user;
retourneer waar
} vangst (fout) {
retourneer {fout: error.message}
}
};
Zowel de signUp- als signOut-functies retourneren true als dit is gelukt en een foutbericht als er een fout optreedt.
De uitlogfunctie is vrij eenvoudig. Het noemt de afmelden() functie van Firebase.
const signOut = async() => {
poging {
wacht uitloggen (auth)
retourneer waar
} vangst (fout) {
return false
}
};
Reactieformulieren maken
De aanmeldings- en aanmeldingsformulieren verzamelen het e-mailadres en wachtwoord van de gebruiker.
Een nieuw onderdeel maken Aanmelden.js en voeg het volgende toe.
importeer { useState } van "reageren";
importeer { Link } van "react-router-dom";
importeer { aanmelden } van "./firebase";
const Aanmelden = () => {
const [e-mail, setEmail] = useState("");
const [wachtwoord, setPassword] = useState("");
const [fout, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
if (wachtwoord !== wachtwoord2) {
seterror("Wachtwoorden komen niet overeen");
} anders {
setE-mail("");
stel een wachtwoord in("");
const res = wacht op aanmelding (e-mail, wachtwoord);
if (res.error) seterror (res.error)
}
};
opbrengst (
<>
Aanmelden
{fout? {fout}: nul}
al geregistreerd? Log in
);
};
export standaard Aanmelden;
Hier maakt u een aanmeldingsformulier aan en houdt u het e-mailadres en wachtwoord bij met behulp van de status. Nadat u het formulier heeft verzonden, opVerzenden gebeurtenis activeert de handvatSubmit() functie die de. aanroept aanmelden() functie van firebase.js. Als de functie een fout retourneert, werkt u de foutstatus bij en geeft u het foutbericht weer.
Maak voor het aanmeldingsformulier Aanmelden.js en voeg het volgende toe.
importeer { useState } van "reageren";
importeer {aanmelden} van "./firebase";
const Inloggen = () => {
const [e-mail, setEmail] = useState("");
const [wachtwoord, setPassword] = useState("");
const [fout, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
setE-mail("");
stel een wachtwoord in("");
const res = wacht op aanmelding (e-mail, wachtwoord);
if (res.error) seterror (res.error);
};
opbrengst (
<>
{fout? {fout}: nul}
);
};
export standaard Login;
Het aanmeldingsformulier lijkt veel op de aanmeldingspagina, behalve dat inzending de aanmelden() functie.
Maak ten slotte de profielpagina aan. Dit is de pagina waarnaar de app gebruikers zal omleiden na succesvolle authenticatie.
Creëren Profile.js en voeg het volgende toe.
importeer { uitloggen } van "./firebase";
const Profiel = () => {
const handleLogout = async () => {
wacht afmelding();
};
opbrengst (
<>
Profiel
);
};
standaardprofiel exporteren;
In dit onderdeel heb je de profielkop en de uitlogknop. De bij klikken handler op de knop activeert de handvatUitloggen functie die de gebruiker uitlogt.
Authenticatieroutes maken
Om de pagina's die u hebt gemaakt naar de browser te sturen, stelt u r. ineact-router-dom.
Installeren reageren-router-dom:
npm ik reageer-router-dom
In index.js, configureren reageren-router-dom:
import Reageren vanuit "reageren";
importeer ReactDOM van "react-dom";
importeer {BrowserRouter, Routes, Route} van "react-router-dom";
importeer app van "./App";
import Login van "./Login";
importeer Profiel van "./Profiel";
ReactDOM.render(
} />
} />
} />
document.getElementById("root")
);
Tot nu toe kan de applicatie een gebruiker registreren, aanmelden en uitloggen. Dus hoe weet u of een gebruiker is ingelogd of niet?
In het volgende gedeelte van deze zelfstudie ziet u hoe u React-context kunt gebruiken om de authenticatiestatus van een gebruiker in de toepassing bij te houden.
Verificatie beheren met React Context API
React Context is een tool voor statusbeheer die het delen van gegevens tussen apps vereenvoudigt. Het is een beter alternatief voor het boren van een prop, waarbij gegevens door de boom worden doorgegeven van ouder naar kind totdat het de component bereikt die het nodig heeft.
Verificatiecontext maken
In de src map, voeg toe AuthContext.js bestand en maken en exporteren AuthContext.
importeer { createContext } van "reageren";
const AuthContext = createContext();
export standaard AuthContext;
Maak vervolgens de provider in AuthProvider.js. Hiermee kunnen componenten worden gebruikt AuthContext.
import {getAuth, onAuthStateChanged} van "firebase/auth";
importeer { useState, useEffect } van 'react';
importeer AuthContext van './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ kinderen }) => {
const [gebruiker, setGebruiker] = useState (null);
gebruikEffect(() => {
onAuthStateChanged (auth,(gebruiker) => {
setGebruiker (gebruiker)
})
}, []);
opbrengst ({kinderen}
);
};
Hier krijgt u de gebruikerswaarde door gebruik te maken van de onAuthStateChanged() methode van Firebase. Deze methode retourneert een gebruikersobject als het de gebruiker verifieert en null als dit niet kan. Door gebruik te maken van de useEffect() haak, wordt de gebruikerswaarde bijgewerkt telkens wanneer de authenticatiestatus verandert.
In index.js, sluit de routes af met AuthProvider om ervoor te zorgen dat alle componenten toegang hebben tot de gebruiker in de context:
importeer { AuthProvider } van "./AuthProvider";
ReactDOM.render(
} />
} />
} />
,
document.getElementById("root")
);
Beveiligde routes maken
Naar gevoelige routes beschermen, controleer de authenticatiestatus van een gebruiker die probeert te navigeren naar een beveiligde pagina zoals de profielpagina.
Bewerken Profile.js om een gebruiker om te leiden als deze niet is geverifieerd.
importeer { useContext } van "reageren";
importeer AuthContext van "./AuthContext";
importeer { useNavigate, Navigate } van "react-router-dom";
importeer { uitloggen } van "./firebase";
const Profiel = () => {
const {gebruiker} = useContext (AuthContext);
const navigatie = useNavigate();
const handleLogout = async () => {
wacht afmelding();
};
als (!gebruiker) {
opbrengst ;
}
opbrengst (
<>
Profiel
);
};
standaardprofiel exporteren;De app voorwaardelijk weergegeven de profielpagina door de gebruiker om te leiden naar de inlogpagina als ze niet zijn geverifieerd.
Verder gaan met Firebase-verificatie
In deze zelfstudie hebt u Firebase gebruikt om gebruikers te verifiëren met hun e-mailadres en wachtwoord. U hebt ook gebruikersrecords gemaakt in Firestore. Firebase biedt functies om te werken met authenticatieproviders zoals Google, Facebook en Twitter.
10 Reageer best practices die u in 2022 moet volgen
Lees volgende
Gerelateerde onderwerpen
- Programmeren
- Reageer
- Programmeren
- JavaScript
Over de auteur
Mary Gathoni is een softwareontwikkelaar met een passie voor het maken van technische inhoud die niet alleen informatief maar ook boeiend is. Als ze niet aan het coderen of schrijven is, gaat ze graag met vrienden om en is ze graag buiten.
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren