Firebase oferă servicii de autentificare care vă permit să vă înregistrați și să vă conectați cu ușurință utilizatorilor. Puteți utiliza e-mail, parole, numere de telefon și furnizori de identitate precum Google și Facebook.

În acest tutorial, veți afla cum puteți utiliza Firebase Authentication în React pentru a autentifica utilizatorii folosind un e-mail și o parolă. Veți stoca datele utilizatorului colectate în Firestore, o bază de date cloud NoSQL tot de la Firebase.

Rețineți că acest tutorial folosește Firebase v9 și React Router v6.

Creați o aplicație Firebase

Pentru a vă conecta aplicația la Firebase, înregistrați-vă aplicația cu Firebase pentru a obține un obiect de configurare. Acesta este ceea ce veți folosi pentru a inițializa Firebase în aplicația dvs. React.

Pentru a crea o aplicație Firebase, urmați pașii următori.

1. Îndreptați-vă spre Consola Firebase și faceți clic Creați un proiect.
2. Dați un nume proiectului și faceți clic crea pentru a începe procesul.
3. Faceți clic pe Web pictograma (
instagram viewer
4. Dați aplicației dvs. un nume la alegere și faceți clic Înregistrați aplicația. Nu trebuie să activați Firebase Hosting.
5. Copiați obiectul de configurare sub Adăugați setul SDK Firebase.

Creați o aplicație React

Utilizare create-react-app pentru a monta o aplicație React.

npx create-react-app react-auth-firebase

Navigați la folder și porniți aplicația.

cd react-auth-firebase
npm run start

Autentificați utilizatorii cu funcții Firebase

Înainte de a utiliza Firebase, instalați-l.

npm i firebase

Creați un fișier nou, firebase.js, și inițializați Firebase.

import { initializeApp } din „firebase/app”;
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 projectId: ,
 găleată de stocare: ,
 messagingSenderId: ,
 appId: 
};
// Inițializați Firebase
const app = initializeApp (firebaseConfig);

Utilizați obiectul de configurare pe care l-ați copiat când ați înregistrat aplicația.

Apoi importați modulele Firebase pe care le veți folosi.

import {
 getAuth,
 createUserWithEmailAndPassword,
 loginWithEmailAndPassword,
 Sign out,
} din „firebase/auth”;
import { getFirestore, addDoc, collection } din „firebase/firestore”;
const db = getFirestore();
const auth = getAuth();

La autentificarea utilizatorilor, trebuie să creați trei funcții: signUp, signIn și signOut.

The Inscrie-te funcția transmite e-mailul și parola către createUserWithEmailAndPassword pentru a înregistra un utilizator nou. createUserWithEmailAndPassword returnează datele utilizatorului pe care le veți folosi pentru a crea o nouă înregistrare de utilizator în baza de date.

const signUp = asincron (e-mail, parolă) => {
 încerca {
 const userCredential = așteptați createUserWithEmailAndPassword(
 auth,
 e-mail,
 parola
 );
 const user = userCredential.user;
 await addDoc (colecție (db, „utilizatori”), {
 uid: user.uid,
 e-mail: user.email,
 });
 returnează adevărat
 } captură (eroare) {
 returnează {eroare: error.message}
 }
};

Rețineți că nu verificați dacă e-mailul este deja utilizat înainte de înregistrare, deoarece Firebase se ocupă de asta pentru dvs.

În continuare, în conectare funcția transmite e-mailul și parola către loginWithEmailAndPassword funcția de conectare a unui utilizator înregistrat.

const signIn = asincron (e-mail, parolă) => {
 încerca {
 const userCredential = așteaptă signInWithEmailAndPassword(
 auth,
 e-mail,
 parola
 );
 const user = userCredential.user;
 returnează adevărat
 } captură (eroare) {
 returnează {eroare: error.message}
 }
};

Atât funcțiile signUp, cât și signOut returnează true dacă au succes și un mesaj de eroare dacă apare o eroare.

Funcția de deconectare este destul de simplă. Se numeste Sign out() funcția din Firebase.

const signOut = async() => {
 încerca {
 așteaptă deconectare (auth)
 returnează adevărat
 } captură (eroare) {
 returnează fals
 }
};

Creați formulare React

Formularele de conectare și înscriere vor colecta e-mailul și parola de la utilizator.

Creați o nouă componentă Signup.js și adăugați următoarele.

import { useState } din „react”;
import { Link } din "react-router-dom";
import { signUp } din „./firebase”;
const Înregistrare = () => {
 const [email, setEmail] = useState("");
 const [parola, setPassword] = useState("");
 const [eroare, seterror] = useState("");
 const handleSubmit = asincron (e) => {
 e.preventDefault();
 if (parolă !== parola2) {
 seterror("Parolele nu se potrivesc");
 } altfel {
 setEmail("");
 Seteaza parola("");
 const res = await signUp (e-mail, parola);
 if (res.error) seterror (res.error)
 }
 };
 întoarcere (
 <>
Inscrie-te



 {eroare? 
{eroare}
: nul}


 tip="e-mail"
 name="email"
 valoare={e-mail}
 placeholder="Adresa ta de e-mail"
 necesar
 onChange={(e) => setEmail (e.target.value)}
 />
 tip="parolă"
 nume="parolă"
 valoare={parolă}
 placeholder="Parola ta"
 necesar
 onChange={(e) => setPassword (e.target.value)}
 />
Trimite




 deja înregistrat? Autentificare





 );
};
export implicit Înregistrare;

Aici creați un formular de înscriere și urmăriți e-mailul și parola folosind starea. Odată ce ați trimis formularul, onSubmit evenimentul declanșează handleSubmit() funcția care apelează Inscrie-te() functia de la firebase.js. Dacă funcția returnează o eroare, actualizați starea de eroare și afișați mesajul de eroare.

Pentru formularul de conectare, creați Signin.js și adăugați următoarele.

import { useState } din „react”;
import { signIn } din „./firebase”;
const Login = () => {
 const [email, setEmail] = useState("");
 const [parola, setPassword] = useState("");
 const [eroare, seterror] = useState("");
 const handleSubmit = asincron (e) => {
 e.preventDefault();
 setEmail("");
 Seteaza parola("");
 const res = await signIn (e-mail, parola);
 if (res.error) seterror (res.error);
 };
 întoarcere (
 <>
 {eroare? 
{eroare}
: nul}


 tip="text"
 name="email"
 valoare={e-mail}
 placeholder="Adresa ta de e-mail"
 onChange={(e) => setEmail (e.target.value)}
 />
 tip="parolă"
 nume="parolă"
 valoare={parolă}
 placeholder="Parola ta"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
export implicit Login;

Formularul de conectare este destul de similar cu pagina de înscriere, cu excepția faptului că trimiterea apelează la conectare() funcţie.

În cele din urmă, creați pagina de profil. Aceasta este pagina către care aplicația va redirecționa utilizatorii după autentificarea cu succes.

Crea Profile.js și adăugați următoarele.

import { signOut } din „./firebase”;
const Profil = () => {
 const handleLogout = asincron () => {
 așteaptă signOut();
 };
 întoarcere (
 <>
Profil

Deconectare
 );
};
export implicit Profil;

În această componentă, aveți antetul Profil și butonul de deconectare. The onClick manipulatorul de pe butonul declanșează handleLogout funcție care deconectează utilizatorul.

Creați rute de autentificare

Pentru a difuza paginile pe care le-ați creat în browser, configurați react-router-dom.

Instalare reacţionează-router-dom:

npm i react-router-dom

În index.js, configurați reacţionează-router-dom:

import React din "react";
import ReactDOM din "react-dom";
import { BrowserRouter, Routes, Route } din „react-router-dom”;
importați aplicația din „./App”;
import Login din „./Login”;
import Profil din „./Profile”;
ReactDOM.render(




} />
} />
} />



,
 document.getElementById(„rădăcină”)
);

Până în acest moment, aplicația poate înregistra un utilizator, îl poate înregistra și îl poate deconecta. Deci, de unde știi dacă un utilizator este conectat sau nu?

În următoarea secțiune a acestui tutorial, veți vedea cum puteți utiliza contextul React pentru a urmări starea de autentificare a unui utilizator în aplicație.

Gestionați autentificarea cu API-ul React Context

React Context este un instrument de gestionare a stării care simplifică partajarea datelor între aplicații. Este o alternativă mai bună la forajul cu prop, în care datele trec în arbore de la părinte la copil până ajung la componenta care are nevoie de ele.

Creați context de autentificare

În src folder, adaugă AuthContext.js fișier și creați și exportați AuthContext.

import { createContext } din „react”;
const AuthContext = createContext();
export implicit AuthContext;

Apoi, creați furnizorul în AuthProvider.js. Acesta va permite utilizarea componentelor AuthContext.

import { getAuth, onAuthStateChanged } din „firebase/auth”;
import { useState, useEffect } din 'react';
importați AuthContext din „./AuthContext”
const auth = getAuth()
export const AuthProvider = ({ copii }) => {
 const [utilizator, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (utilizator)
 })
 }, []);
întoarcere (
{copii}
 );
 };

Aici, obțineți valoarea utilizatorului utilizând onAuthStateChanged() metoda de la Firebase. Această metodă returnează un obiect utilizator dacă autentifică utilizatorul și null dacă nu poate. Prin folosirea useEffect() cârlig, valoarea utilizatorului este actualizată de fiecare dată când starea de autentificare se modifică.

În index.js, înfășurați traseele cu AuthProvider pentru a se asigura că toate componentele accesează utilizatorul în context:

import { AuthProvider } din „./AuthProvider”;
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById(„rădăcină”)
);

Creați rute protejate

La protejarea rutelor sensibile, verificați starea de autentificare a unui utilizator care încearcă să navigheze la o pagină protejată, cum ar fi pagina de profil.

Modifica Profile.js pentru a redirecționa un utilizator dacă nu este autentificat.

import { useContext } din „react”;
importați AuthContext din „./AuthContext”;
import { useNavigate, Navigate } din „react-router-dom”;
import { signOut } din „./firebase”;
const Profil = () => {
 const { utilizator } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = asincron () => {
 așteaptă signOut();
 };
 dacă (!utilizator) {
 întoarcere ;
 }
 întoarcere (
 <>
Profil

Deconectare
 );
};
export implicit Profil;

Aplicația redă condiționat pagina de profil prin redirecționarea utilizatorului către pagina de autentificare dacă acesta nu este autentificat.

Mergând mai departe cu autentificarea Firebase

În acest tutorial, ați folosit Firebase pentru a autentifica utilizatorii folosind adresa de e-mail și parola lor. De asemenea, ați creat înregistrări de utilizator în Firestore. Firebase oferă funcții pentru a lucra cu furnizori de autentificare precum Google, Facebook și Twitter.

10 React Cele mai bune practici pe care trebuie să le urmați în 2022

Citiți în continuare

Despre autor