Firebase tilbyr autentiseringstjenester som lar deg enkelt registrere og logge på brukere. Du kan bruke e-post, passord, telefonnumre og identitetsleverandører som Google og Facebook.

I denne opplæringen lærer du hvordan du kan bruke Firebase-autentisering i React for å autentisere brukere ved hjelp av e-post og passord. Du vil lagre brukerdataene som samles inn i Firestore, en NoSQL-skydatabase også fra Firebase.

Merk at denne opplæringen bruker Firebase v9 og React Router v6.

Opprett en Firebase-applikasjon

For å koble applikasjonen din til Firebase, registrer appen din hos Firebase for å få et konfigurasjonsobjekt. Dette er hva du skal bruke for å initialisere Firebase i React-applikasjonen din.

Følg trinnene nedenfor for å opprette en firebase-applikasjon.

1. Gå over til Firebase-konsoll og klikk Lag et prosjekt.
2. Gi prosjektet ditt et navn og klikk skape for å starte prosessen.
3. Klikk på Web ikon (
4. Gi appen et navn du ønsker og klikk Registrer app. Du trenger ikke å aktivere Firebase Hosting.
5. Kopier konfigurasjonsobjektet under Legg til Firebase SDK.

Opprett en React-applikasjon

Bruk lag-reager-app for å stillasere en React-app.

npx create-react-app react-auth-firebase

Naviger til mappen og start programmet.

cd react-auth-firebase
npm kjøre start

Autentiser brukere med Firebase-funksjoner

Installer den før du bruker Firebase.

npm i firebase

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

importer { initializeApp } fra "firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 prosjekt-ID: ,
 lagringsbøtte: ,
 messagingSenderId: ,
 appId: 
};
// Initialiser Firebase
const app = initializeApp (firebaseConfig);

Bruk konfigurasjonsobjektet du kopierte da du registrerte appen.

Importer deretter Firebase-modulene du skal bruke.

import {
 getAuth,
 createUserWithEmailAndPassword,
 signInWithEmailAndPassword,
 Logg ut,
} fra "firebase/auth";
importer { getFirestore, addDoc, collection } fra "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Til autentisere brukere, må du opprette tre funksjoner: SignUp, SignIn og SignOut.

De melde deg på funksjon sender e-post og passord til opprette BrukerMedE-postOgPassord for å registrere en ny bruker. opprette BrukerMedE-postOgPassord returnerer brukerdataene som du skal bruke til å opprette en ny brukerpost i databasen.

const signUp = async (e-post, passord) => {
 prøv {
 const userCredential = vent createUserWithEmailAndPassword(
 auth,
 e-post,
 passord
 );
 const bruker = userCredential.user;
 vent addDoc (samling (db, "brukere"), {
 uid: bruker.uid,
 e-post: bruker.e-post,
 });
 returnere sant
 } catch (feil) {
 returner {error: error.message}
 }
};

Merk at du ikke sjekker om e-posten allerede er i bruk før registrering fordi Firebase håndterer det for deg.

Neste, i Logg inn funksjon gi e-post og passord til logInWithEmailAndPassword funksjon for å logge på en registrert bruker.

const signIn = async (e-post, passord) => {
 prøv {
 const userCredential = vent signInWithEmailAndPassword(
 auth,
 e-post,
 passord
 );
 const bruker = userCredential.user;
 returnere sant
 } catch (feil) {
 returner {error: error.message}
 }
};

Både signUp- og SignOut-funksjonene returnerer true hvis vellykket og en feilmelding hvis det oppstår en feil.

SignOut-funksjonen er ganske grei. Den kaller Logg ut() funksjon fra Firebase.

const signOut = async() => {
 prøv {
 venter på utlogging (auth)
 returnere sant
 } catch (feil) {
 returner falsk
 }
};

Lag reaksjonsskjemaer

Påloggings- og registreringsskjemaene vil samle inn e-post og passord fra brukeren.

Opprett en ny komponent Signup.js og legg til følgende.

importer { useState } fra "react";
importer { Link } fra "react-router-dom";
importer { signUp } fra "./firebase";
const Registrering = () => {
 const [email, setEmail] = useState("");
 const [passord, setPassword] = useState("");
 const [feil, seterror] = useState("");
 const handleSubmit = asynkron (e) => {
 e.preventDefault();
 if (passord !== passord2) {
 seterror("Passord stemmer ikke");
 } annet {
 setEmail("");
 lag et passord("");
 const res = avvente registrering (e-post, passord);
 if (res.error) seterror (res.error)
 }
 };
 komme tilbake (
 <>
Melde deg på



 {feil? 
{feil}
: null}


 type="e-post"
 name="e-post"
 verdi={email}
 placeholder="Din e-post"
 nødvendig
 onChange={(e) => setEmail (e.target.value)}
 />
 type="passord"
 name="passord"
 verdi={passord}
 placeholder="Ditt passord"
 nødvendig
 onChange={(e) => setPassword (e.target.value)}
 />
Sende inn




 allerede registrert? Logg Inn





 );
};
eksport standard registrering;

Her lager du et registreringsskjema og holder styr på e-post og passord ved hjelp av state. Når du har sendt inn skjemaet, ved innsending hendelsen utløser handleSubmit() funksjon som kaller melde deg på() funksjon fra firebase.js. Hvis funksjonen returnerer en feil, oppdater feiltilstanden og vis feilmeldingen.

For påloggingsskjemaet, opprett Signin.js og legg til følgende.

importer { useState } fra "react";
importer { signIn } fra "./firebase";
const Logg inn = () => {
 const [email, setEmail] = useState("");
 const [passord, setPassword] = useState("");
 const [feil, seterror] = useState("");
 const handleSubmit = asynkron (e) => {
 e.preventDefault();
 setEmail("");
 lag et passord("");
 const res = avvent pålogging (e-post, passord);
 if (res.error) seterror (res.error);
 };
 komme tilbake (
 <>
 {feil? 
{feil}
: null}


 type="tekst"
 name="e-post"
 verdi={email}
 placeholder="Din e-post"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="passord"
 name="passord"
 verdi={passord}
 placeholder="Ditt passord"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
eksport standard pålogging;

Påloggingsskjemaet er ganske likt registreringssiden bortsett fra at innsending kaller Logg inn() funksjon.

Til slutt oppretter du profilsiden. Dette er siden appen vil omdirigere brukere til etter vellykket autentisering.

Skape Profile.js og legg til følgende.

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

Logg ut
 );
};
eksporter standardprofil;

I denne komponenten har du profiloverskriften og utloggingsknappen. De ved trykk handler på knappen utløser handleLogg ut funksjon som logger ut brukeren.

Lag autentiseringsruter

For å vise sidene du opprettet til nettleseren, sett opp react-router-dom.

Installere reagere-ruter-dom:

npm jeg reagerer-ruter-dom

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

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




} />
} />
} />



,
 document.getElementById("root")
);

Frem til dette punktet kan applikasjonen registrere en bruker, registrere dem og logge dem ut. Så hvordan vet du om en bruker er pålogget eller ikke?

I neste del av denne opplæringen vil du se hvordan du kan bruke React-kontekst for å holde styr på en brukers autentiseringsstatus på tvers av applikasjonen.

Administrer autentisering med React Context API

React Context er et tilstandsadministrasjonsverktøy som forenkler datadeling på tvers av apper. Det er et bedre alternativ til propellboring, der data går nedover treet fra foreldre til barn til de når komponenten som trenger det.

Opprett autentiseringskontekst

I src mappe, legg til AuthContext.js fil og opprett og eksporter AuthContext.

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

Deretter oppretter du leverandøren AuthProvider.js. Det vil tillate komponenter å bruke AuthContext.

importer { getAuth, onAuthStateChanged } fra "firebase/auth";
importer { useState, useEffect } fra 'react';
importer AuthContext fra './AuthContext'
const auth = getAuth()
eksport const AuthProvider = ({ barn }) => {
 const [bruker, settBruker] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(bruker) => {
 setUser (bruker)
 })
 }, []);
komme tilbake (
{barn}
 );
 };

Her får du brukerverdien ved å bruke onAuthStateChanged() metode fra Firebase. Denne metoden returnerer et brukerobjekt hvis det autentiserer brukeren og null hvis det ikke kan det. Ved å bruke useEffect() krok, oppdateres brukerverdien hver gang autentiseringsstatusen endres.

I index.js, pakk rutene med AuthProvider for å sikre at alle komponentene får tilgang til brukeren i konteksten:

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




} />
} />
} />



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

Lag beskyttede ruter

Til beskytte sensitive ruter, sjekk autentiseringsstatusen til en bruker som prøver å navigere til en beskyttet side som profilsiden.

Endre Profile.js for å omdirigere en bruker hvis de ikke er autentisert.

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

Logg ut
 );
};
eksporter standardprofil;

Appen gjengir betinget profilsiden ved å omdirigere brukeren til påloggingssiden hvis de ikke er autentisert.

Gå videre med Firebase-autentisering

I denne opplæringen brukte du Firebase til å autentisere brukere ved å bruke e-post og passord. Du opprettet også brukerposter i Firestore. Firebase tilbyr funksjoner for å jobbe med autentiseringsleverandører som Google, Facebook og Twitter.

10 beste fremgangsmåter du må følge i 2022

Les Neste

Om forfatteren