Firebase leverer godkendelsestjenester, der giver dig mulighed for nemt at registrere og logge på brugere. Du kan bruge e-mail, adgangskoder, telefonnumre og identitetsudbydere som Google og Facebook.

I dette selvstudie lærer du, hvordan du kan bruge Firebase-godkendelse i React til at godkende brugere ved hjælp af en e-mail og adgangskode. Du vil gemme de indsamlede brugerdata i Firestore, en NoSQL cloud-database også fra Firebase.

Bemærk, at denne vejledning bruger Firebase v9 og React Router v6.

Opret en Firebase-applikation

For at forbinde din applikation til Firebase, skal du registrere din app hos Firebase for at få et konfigurationsobjekt. Dette er, hvad du vil bruge til at initialisere Firebase i din React-applikation.

Følg nedenstående trin for at oprette en firebase-applikation.

1. Gå over til Firebase-konsol og klik Opret et projekt.
2. Giv dit projekt et navn, og klik skab for at starte processen.
3. Klik på Web ikon (
4. Giv din app et navn efter eget valg, og klik Registrer app. Du behøver ikke at aktivere Firebase Hosting.
5. Kopier konfigurationsobjektet under Tilføj Firebase SDK.

Opret en React-applikation

Brug opret-reager-app at stilladsere en React-app.

npx create-react-app react-auth-firebase

Naviger til mappen og start applikationen.

cd react-auth-firebase
npm løb start

Godkend brugere med Firebase-funktioner

Inden du bruger Firebase, skal du installere det.

npm i firebase

Opret en ny fil, firebase.js, og initialisere Firebase.

importer { initializeApp } fra "firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 projekt-id: ,
 storageBucket: ,
 messagingSenderId: ,
 appId: 
};
// Initialiser Firebase
const app = initializeApp (firebaseConfig);

Brug det konfigurationsobjekt, du kopierede, da du registrerede appen.

Importer derefter de Firebase-moduler, du vil bruge.

import {
 getAuth,
 opretteBrugerMedEmailAndPassword,
 LogInWithEmailAndPassword,
 Log ud,
} fra "firebase/auth";
importer { getFirestore, addDoc, collection } fra "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Til autentificere brugere, skal du oprette tre funktioner: SignUp, SignIn og SignOut.

Det Tilmelde funktion videregiver e-mail og adgangskode til opretteBrugerMedEmailAndPassword for at registrere en ny bruger. opretteBrugerMedEmailAndPassword returnerer de brugerdata, som du vil bruge til at oprette en ny brugerpost i databasen.

const signUp = async (e-mail, adgangskode) => {
 prøve {
 const userCredential = await createUserWithEmailAndPassword(
 auth,
 e-mail,
 adgangskode
 );
 const bruger = userCredential.user;
 afvent addDoc (samling (db, "brugere"), {
 uid: bruger.uid,
 e-mail: bruger.e-mail,
 });
 returnere sandt
 } fange (fejl) {
 returner {error: error.message}
 }
};

Bemærk, at du ikke tjekker, om e-mailen allerede er i brug før registrering, fordi Firebase håndterer det for dig.

Dernæst i Log ind funktion videregive e-mail og adgangskode til logInWithEmailAndPassword funktion for at logge på en registreret bruger.

const logIn = async (e-mail, adgangskode) => {
 prøve {
 const userCredential = await signInWithEmailAndPassword(
 auth,
 e-mail,
 adgangskode
 );
 const bruger = userCredential.user;
 returnere sandt
 } fange (fejl) {
 returner {error: error.message}
 }
};

Både signUp- og SignOut-funktionerne returnerer true, hvis det lykkedes, og en fejlmeddelelse, hvis der opstår en fejl.

SignOut-funktionen er ret ligetil. Det kalder Log ud() funktion fra Firebase.

const signOut = async() => {
 prøve {
 afvente udmelding (godkendt)
 returnere sandt
 } fange (fejl) {
 returnere falsk
 }
};

Opret reaktionsformularer

Log-in og tilmeldingsformularerne vil indsamle e-mail og adgangskode fra brugeren.

Opret en ny komponent Signup.js og tilføje følgende.

importer { useState } fra "react";
importer { Link } fra "react-router-dom";
importer { signUp } fra "./firebase";
const Tilmelding = () => {
 const [email, setEmail] = useState("");
 const [adgangskode, sætPassword] = useState("");
 const [fejl, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (adgangskode !== adgangskode2) {
 seterror("Adgangskoder stemmer ikke overens");
 } andet {
 setEmail("");
 sætPassword("");
 const res = afvent tilmelding (e-mail, adgangskode);
 if (res.error) seterror (res.error)
 }
 };
 Vend tilbage (
 <>
Tilmelde



 {fejl? 
{fejl}
: nul}


 type="e-mail"
 name="e-mail"
 værdi={e-mail}
 placeholder="Din e-mail"
 påkrævet
 onChange={(e) => sætE-mail (e.target.value)}
 />
 type="adgangskode"
 name="adgangskode"
 værdi={adgangskode}
 placeholder="Dit kodeord"
 påkrævet
 onChange={(e) => sætPassword (e.target.value)}
 />
Indsend




 allerede registreret? Log på





 );
};
eksport standard Tilmelding;

Her opretter du en tilmeldingsformular og holder styr på e-mail og adgangskode ved hjælp af tilstand. Når du har indsendt formularen, ved indsend hændelse udløser handleSubmit() funktion, der kalder Tilmelde() funktion fra firebase.js. Hvis funktionen returnerer en fejl, skal du opdatere fejltilstanden og vise fejlmeddelelsen.

Til login-formularen skal du oprette Signin.js og tilføje følgende.

importer { useState } fra "react";
importer { logIn } fra "./firebase";
const Login = () => {
 const [email, setEmail] = useState("");
 const [adgangskode, sætPassword] = useState("");
 const [fejl, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 sætPassword("");
 const res = afvent logIn (e-mail, adgangskode);
 if (res.error) seterror (res.error);
 };
 Vend tilbage (
 <>
 {fejl? 
{fejl}
: nul}


 type="tekst"
 name="e-mail"
 værdi={e-mail}
 placeholder="Din e-mail"
 onChange={(e) => sætE-mail (e.target.value)}
 />
 type="adgangskode"
 name="adgangskode"
 værdi={adgangskode}
 placeholder="Dit kodeord"
 onChange={(e) => sætPassword (e.target.value)}
 />




 );
};
eksport standard Login;

Log-in-formularen er ret lig tilmeldingssiden, bortset fra at indsendelsen kalder Log ind() fungere.

Til sidst skal du oprette profilsiden. Dette er siden, som appen vil omdirigere brugere til efter vellykket godkendelse.

skab Profile.js og tilføje følgende.

importer { signOut } fra "./firebase";
const Profil = () => {
 const handleLogout = asynkron () => {
 vent signOut();
 };
 Vend tilbage (
 <>
Profil

Log ud
 );
};
eksport standardprofil;

I denne komponent har du profiloverskriften og logout-knappen. Det påKlik handler på knappen udløser håndtere Log ud funktion, der logger brugeren ud.

Opret godkendelsesruter

For at vise de sider, du har oprettet til browseren, skal du konfigurere react-router-dom.

Installere reagere-router-dom:

npm jeg reagerer-router-dom

I index.js, konfigurere reagere-router-dom:

import Reager fra "reager";
importere ReactDOM fra "react-dom";
importer { BrowserRouter, Routes, Route } fra "react-router-dom";
importer app fra "./App";
importer Login fra "./Login";
importer profil fra "./Profil";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Indtil dette tidspunkt kan applikationen registrere en bruger, tilmelde vedkommende og logge dem ud. Så hvordan ved du, om en bruger er logget ind eller ej?

I det næste afsnit af denne vejledning vil du se, hvordan du kan bruge React-kontekst til at holde styr på en brugers godkendelsesstatus på tværs af applikationen.

Administrer godkendelse med React Context API

React Context er et tilstandsstyringsværktøj, der forenkler datadeling på tværs af apps. Det er et bedre alternativ til propboring, hvor data går ned i træet fra forælder til barn, indtil den når den komponent, der har brug for det.

Opret godkendelseskontekst

I den src mappe, tilføj AuthContext.js fil og oprette og eksportere AuthContext.

importer { createContext } fra "react";
const AuthContext = createContext();
eksport standard AuthContext;

Opret derefter udbyderen i AuthProvider.js. Det vil tillade komponenter at bruge AuthContext.

importer { getAuth, onAuthStateChanged } fra "firebase/auth";
importer { useState, useEffect } fra 'react';
importer AuthContext fra './AuthContext'
const auth = getAuth()
eksport const AuthProvider = ({ børn }) => {
 const [bruger, sætBruger] = useState (nul);
 useEffect(() => {
 onAuthStateChanged (auth,(bruger) => {
 setUser (bruger)
 })
 }, []);
Vend tilbage (
{børn}
 );
 };

Her får du brugerværdien ved at bruge onAuthStateChanged() metode fra Firebase. Denne metode returnerer et brugerobjekt, hvis det godkender brugeren og nul, hvis det ikke kan. Ved at bruge useEffect() hook, opdateres brugerværdien, hver gang godkendelsesstatus ændres.

I index.js, pakke ruterne ind med AuthProvider for at sikre, at alle komponenter har adgang til brugeren i konteksten:

importer { AuthProvider } fra "./AuthProvider";
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById("root")
);

Opret beskyttede ruter

Til beskytte følsomme ruter, tjek godkendelsesstatussen for en bruger, der forsøger at navigere til en beskyttet side som f.eks. profilsiden.

Modificere Profile.js at omdirigere en bruger, hvis de ikke er godkendt.

importer { useContext } fra "react";
importer AuthContext fra "./AuthContext";
import { useNavigate, Navigate } fra "react-router-dom";
importer { signOut } fra "./firebase";
const Profil = () => {
 const { bruger } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = asynkron () => {
 vent signOut();
 };
 if (!bruger) {
 Vend tilbage ;
 }
 Vend tilbage (
 <>
Profil

Log ud
 );
};
eksport standardprofil;

App'en betinget gengiver profilsiden ved at omdirigere brugeren til login-siden, hvis de ikke er godkendt.

Gå videre med Firebase-godkendelse

I dette selvstudie brugte du Firebase til at godkende brugere ved hjælp af deres e-mail og adgangskode. Du har også oprettet brugerposter i Firestore. Firebase tilbyder funktioner til at arbejde med godkendelsesudbydere såsom Google, Facebook og Twitter.

10 React Best Practices, du skal følge i 2022

Læs Næste

Om forfatteren