Firebase fornisce servizi di autenticazione che ti consentono di registrare e accedere facilmente agli utenti. Puoi utilizzare e-mail, password, numeri di telefono e provider di identità come Google e Facebook.

In questo tutorial imparerai come utilizzare l'autenticazione Firebase in React per autenticare gli utenti utilizzando un'e-mail e una password. Memorizzerai i dati utente raccolti in Firestore, un database cloud NoSQL anche da Firebase.

Nota che questo tutorial utilizza Firebase v9 e React Router v6.

Crea un'applicazione Firebase

Per collegare la tua applicazione a Base di fuoco, registra la tua app con Firebase per ottenere un oggetto di configurazione. Questo è ciò che utilizzerai per inizializzare Firebase nella tua applicazione React.

Per creare un'applicazione Firebase, attenersi alla seguente procedura.

1. Dirigiti verso il Console Firebase e fare clic Crea un progetto.
2. Assegna un nome al tuo progetto e fai clic creare per avviare il processo.
3. Clicca sul ragnatela icona (
4. Assegna alla tua app un nome a tua scelta e fai clic
   instagram viewer
   Registrati app. Non è necessario abilitare Firebase Hosting.
5. Copia l'oggetto di configurazione in Aggiungi Firebase SDK.

Crea un'applicazione di reazione

Utilizzo creare-reagire-app per impalcare un'app React.

npx create-react-app react-auth-firebase

Passare alla cartella e avviare l'applicazione.

cd react-auth-firebase
npm avvio della corsa

Autentica gli utenti con le funzioni Firebase

Prima di utilizzare Firebase, installalo.

npm i firebase

Crea un nuovo file, firebase.js, e inizializzare Firebase.

import { initializeApp } da "firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 ID progetto: ,
 Secchio di stoccaggio: ,
 messagingSenderId: ,
 appId: 
};
// Inizializza Firebase
const app = initializeApp (firebaseConfig);

Utilizza l'oggetto di configurazione che hai copiato al momento della registrazione dell'app.

Quindi importa i moduli Firebase che utilizzerai.

importa {
 getAuth,
 createUserWithEmailAndPassword,
 accedi con e-mail e password,
 disconnessione,
} da "firebase/auth";
import { getFirestore, addDoc, collection } da "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

a autenticare gli utenti, devi creare tre funzioni: signUp, signIn e signOut.

Il iscrizione la funzione passa l'e-mail e la password a createUserWithEmailAndPassword per registrare un nuovo utente. createUserWithEmailAndPassword restituisce i dati utente che verranno utilizzati per creare un nuovo record utente nel database.

const signUp = asincrono (e-mail, password) => {
 Tentativo {
 const userCredential = attendi createUserWithEmailAndPassword(
 autorizzazione,
 e-mail,
 parola d'ordine
 );
 const utente = userCredential.user;
 await addDoc (raccolta (db, "utenti"), {
 uid: user.uid,
 e-mail: utente.e-mail,
 });
 restituisce vero
 } cattura (errore) {
 ritorno {errore: errore.messaggio}
 }
};

Nota che non stai controllando se l'e-mail è già in uso prima della registrazione perché Firebase lo gestisce per te.

Successivamente, nel registrazione funzione passare l'e-mail e la password al signInWithEmailAndPassword funzione per accedere a un utente registrato.

const signIn = asincrono (e-mail, password) => {
 Tentativo {
 const userCredential = await signInWithEmailAndPassword(
 autorizzazione,
 e-mail,
 parola d'ordine
 );
 const utente = userCredential.user;
 restituisce vero
 } cattura (errore) {
 ritorno {errore: errore.messaggio}
 }
};

Entrambe le funzioni signUp e signOut restituiscono true in caso di esito positivo e un messaggio di errore se si verifica un errore.

La funzione di disconnessione è abbastanza semplice. Chiama il disconnessione() funzione da Firebase.

const signOut = async() => {
 Tentativo {
 attendi disconnessione (autenticazione)
 restituisce vero
 } cattura (errore) {
 restituisce falso
 }
};

Crea moduli di reazione

I moduli di accesso e registrazione raccoglieranno l'e-mail e la password dall'utente.

Crea un nuovo componente Iscriviti.js e aggiungi quanto segue.

importa {useState} da "reagire";
import { Link } da "react-router-dom";
importa {registrazione} da "./firebase";
const Iscrizione = () => {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");
 const [errore, seterror] = useState("");
 const handleSubmit = asincrono (e) => {
 e.preventDefault();
 if (password !== password2) {
 seterror("Le password non corrispondono");
 } altro {
 setEmail("");
 impostare la password("");
 const res = attendi la registrazione (e-mail, password);
 if (res.error) seterror (res.error)
 }
 };
 Restituzione (
 <>
Iscrizione



 {errore? 
{errore}
: nullo}


 digita = "e-mail"
 nome="e-mail"
 valore={email}
 placeholder="La tua email"
 necessario
 onChange={(e) => setEmail (e.target.value)}
 />
 digita = "password"
 nome = "password"
 valore={password}
 placeholder="La tua password"
 necessario
 onChange={(e) => setPassword (e.target.value)}
 />
Invia




 già registrato? Login





 );
};
Esporta registrazione predefinita;

Qui stai creando un modulo di registrazione e tieni traccia dell'e-mail e della password utilizzando lo stato. Una volta inviato il modulo, il onSubmit evento attiva il handleSubmit() funzione che chiama il iscrizione() funzione da firebase.js. Se la funzione restituisce un errore, aggiornare lo stato di errore e visualizzare il messaggio di errore.

Per il modulo di accesso, crea Signin.js e aggiungi quanto segue.

importa {useState} da "reagire";
import { signIn } da "./firebase";
const Accesso = () => {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");
 const [errore, seterror] = useState("");
 const handleSubmit = asincrono (e) => {
 e.preventDefault();
 setEmail("");
 impostare la password("");
 const res = attendi l'accesso (e-mail, password);
 if (res.error) seterror (res.error);
 };
 Restituzione (
 <>
 {errore? 
{errore}
: nullo}


 digita = "testo"
 nome="e-mail"
 valore={email}
 placeholder="La tua email"
 onChange={(e) => setEmail (e.target.value)}
 />
 digita = "password"
 nome = "password"
 valore={password}
 placeholder="La tua password"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
esporta login predefinito;

Il modulo di accesso è abbastanza simile alla pagina di registrazione, tranne per il fatto che l'invio chiama il registrazione() funzione.

Infine, crea la pagina Profilo. Questa è la pagina a cui l'app reindirizzerà gli utenti dopo l'autenticazione.

Creare Profile.js e aggiungi quanto segue.

import { signOut } da "./firebase";
const Profilo = () => {
 const handleLogout = async () => {
 attendi disconnessione();
 };
 Restituzione (
 <>
Profilo

Disconnettersi
 );
};
esporta profilo predefinito;

In questo componente hai l'intestazione Profilo e il pulsante di disconnessione. Il al clic gestore sul pulsante attiva il handleLogout funzione che disconnette l'utente.

Crea percorsi di autenticazione

Per servire le pagine che hai creato al browser, imposta react-router-dom.

Installare reagire-router-dom:

npm io reagisco-router-dom

Nel index.js, configurare reagire-router-dom:

import React da "react";
importa ReactDOM da "react-dom";
importa { BrowserRouter, Rotte, Rotta } da "react-router-dom";
importa App da "./App";
importa Login da "./Login";
importa Profilo da "./Profilo";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Fino a questo punto, l'applicazione può registrare un utente, registrarlo e disconnetterlo. Quindi, come fai a sapere se un utente ha effettuato l'accesso o meno?

Nella prossima sezione di questo tutorial, vedrai come utilizzare il contesto React per tenere traccia dello stato di autenticazione di un utente nell'applicazione.

Gestisci l'autenticazione con l'API React Context

React Context è uno strumento di gestione dello stato che semplifica la condivisione dei dati tra le app. È un'alternativa migliore alla perforazione dell'elica, in cui i dati passano dall'albero da genitore a figlio fino a raggiungere il componente che ne ha bisogno.

Crea contesto di autenticazione

Nel src cartella, aggiungi AuthContext.js file e creare ed esportare AuthContext.

importa { createContext } da "reagire";
const AuthContext = createContext();
esporta AuthContext predefinito;

Quindi, crea il provider in AuthProvider.js. Consentirà l'utilizzo dei componenti AuthContext.

import { getAuth, onAuthStateChanged } da "firebase/auth";
import {useState, useEffect} da 'react';
importa AuthContext da './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ bambini }) => {
 const [utente, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(utente) => {
 setUser (utente)
 })
 }, []);
Restituzione (
{bambini}
 );
 };

Qui stai ottenendo il valore dell'utente usando il onAuthStateChanged() metodo da Firebase. Questo metodo restituisce un oggetto utente se autentica l'utente e null se non può. Utilizzando il hook useEffect(), il valore utente viene aggiornato ogni volta che cambia lo stato di autenticazione.

Nel index.js, avvolgi i percorsi con AuthProvider per garantire che tutti i componenti accedano all'utente nel contesto:

importa {AuthProvider} da "./AuthProvider";
ReactDOM.render(




} />
} />
} />



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

Crea percorsi protetti

a proteggere le rotte sensibili, controlla lo stato di autenticazione di un utente che tenta di navigare in una pagina protetta come la pagina del profilo.

Modificare Profile.js per reindirizzare un utente se non è autenticato.

import {useContext} da "reagire";
importa AuthContext da "./AuthContext";
import {useNavigate, Navigate} da "react-router-dom";
import { signOut } da "./firebase";
const Profilo = () => {
 const {utente} = useContext (AuthContext);
 const navigare = useNavigate();
 const handleLogout = async () => {
 attendi disconnessione();
 };
 se (! utente) {
 Restituzione ;
 }
 Restituzione (
 <>
Profilo

Disconnettersi
 );
};
esporta profilo predefinito;

L'applicazione rende condizionatamente la pagina del profilo reindirizzando l'utente alla pagina di accesso se non è autenticato.

Andare oltre con l'autenticazione Firebase

In questo tutorial, hai utilizzato Firebase per autenticare gli utenti utilizzando la loro e-mail e password. Hai anche creato record utente in Firestore. Firebase fornisce funzioni per lavorare con provider di autenticazione come Google, Facebook e Twitter.

10 migliori pratiche di reazione che devi seguire nel 2022

Leggi Avanti

Circa l'autore