Firebase poskytuje autentifikačné služby, ktoré vám umožňujú jednoducho registrovať a prihlasovať používateľov. Môžete použiť e-mail, heslá, telefónne čísla a poskytovateľov identity, ako sú Google a Facebook.

V tomto návode sa dozviete, ako môžete použiť Firebase Authentication v Reacte na autentifikáciu používateľov pomocou e-mailu a hesla. Používateľské údaje zhromaždené vo Firestore, cloudovej databáze NoSQL, budete ukladať aj z Firebase.

Upozorňujeme, že tento návod používa Firebase v9 a React Router v6.

Vytvorte aplikáciu Firebase

Ak chcete pripojiť vašu aplikáciu Firebase, zaregistrujte svoju aplikáciu na Firebase, aby ste získali konfiguračný objekt. To je to, čo použijete na inicializáciu Firebase vo svojej aplikácii React.

Ak chcete vytvoriť aplikáciu Firebase, postupujte podľa nasledujúcich krokov.

1. Zamierte k konzola Firebase a kliknite Vytvorte projekt.
2. Pomenujte svoj projekt a kliknite vytvoriť na spustenie procesu.
3. Klikni na Web ikona (
4. Pomenujte svoju aplikáciu podľa vlastného výberu a kliknite Zaregistrujte aplikáciu. Firebase Hosting nemusíte povoliť.
instagram viewer
5. Skopírujte konfiguračný objekt pod Pridajte súpravu Firebase SDK.

Vytvorte aplikáciu React

Použite create-react-app na lešenie aplikácie React.

npx create-react-app response-auth-firebase

Prejdite do priečinka a spustite aplikáciu.

cd response-auth-firebase
spustenie chodu npm

Overte používateľov pomocou funkcií Firebase

Pred použitím Firebase ju nainštalujte.

npm a firebase

Vytvorte nový súbor, firebase.js, a inicializujte Firebase.

import { initializeApp } z "firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 projectId: ,
 úložný priestor: ,
 messagingSenderId: ,
 appId: 
};
// Inicializujte Firebase
const app = initializeApp (firebaseConfig);

Použite konfiguračný objekt, ktorý ste skopírovali pri registrácii aplikácie.

Potom importujte moduly Firebase, ktoré budete používať.

importovať {
 getAuth,
 createUserWithEmailAndPassword,
 prihlásiť sa pomocou e-mailu a hesla,
 Odhlásiť Sa,
} z "firebase/auth";
import { getFirestore, addDoc, collection } z "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Komu autentifikovať používateľov, musíte vytvoriť tri funkcie: prihlásenie, prihlásenie a odhlásenie.

The Prihlásiť Se funkcia odošle e-mail a heslo createUserWithEmailAndPassword na registráciu nového užívateľa. createUserWithEmailAndPassword vráti používateľské údaje, ktoré použijete na vytvorenie nového používateľského záznamu v databáze.

const signUp = async (e-mail, heslo) => {
 skúste {
 const userCredential = wait createUserWithEmailAndPassword(
 auth,
 email,
 heslo
 );
 const user = userCredential.user;
 wait addDoc (kolekcia (db, "users"), {
 uid: user.uid,
 email: user.email,
 });
 vrátiť true
 } catch (chyba) {
 return {error: error.message}
 }
};

Upozorňujeme, že pred registráciou nekontrolujete, či sa e-mail už používa, pretože to za vás rieši Firebase.

Ďalej v Prihlásiť sa funkcie odovzdať e-mail a heslo na prihlásiť sa pomocou e-mailu a hesla funkcia na prihlásenie registrovaného užívateľa.

const signIn = async (e-mail, heslo) => {
 skúste {
 const userCredential = čaká na prihlásenieWithEmailAndPassword(
 auth,
 email,
 heslo
 );
 const user = userCredential.user;
 vrátiť true
 } catch (chyba) {
 return {error: error.message}
 }
};

Funkcie signUp aj signOut vrátia hodnotu true, ak sú úspešné, a chybové hlásenie, ak sa vyskytne chyba.

Funkcia odhlásenia je celkom jednoduchá. Volá to Odhlásiť Sa() funkciu z Firebase.

const signOut = async() => {
 skúste {
 čakať na odhlásenie (auth)
 vrátiť true
 } catch (chyba) {
 vrátiť nepravdu
 }
};

Vytvorte formuláre reakcie

Prihlasovacie a registračné formuláre zhromaždia e-mail a heslo od používateľa.

Vytvorte nový komponent Signup.js a pridajte nasledujúce.

import { useState } z "reagovať";
import { Link } z "react-router-dom";
import { signUp } z "./firebase";
const Registrácia = () => {
 const [e-mail, setEmail] = useState("");
 const [heslo, setPassword] = useState("");
 const [chyba, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (heslo !== heslo2) {
 seterror("Heslá sa nezhodujú");
 } inak {
 setEmail("");
 nastaviť heslo("");
 const res = čaká na registráciu (e-mail, heslo);
 if (res.error) seterror (res.error)
 }
 };
 vrátiť (
 <>
Prihlásiť Se



 {chyba? 
{chyba}
: nulový}


 type="e-mail"
 name="email"
 value={email}
 placeholder="Váš email"
 požadovaný
 onChange={(e) => setEmail (e.target.value)}
 />
 type="heslo"
 name="heslo"
 value={password}
 placeholder="Vaše heslo"
 požadovaný
 onChange={(e) => setPassword (e.target.value)}
 />
Predložiť




 už zaregistrované? Prihlásiť sa





 );
};
exportovať predvolenú registráciu;

Tu vytvárate prihlasovací formulár a sledujete e-mail a heslo pomocou stavu. Po odoslaní formulára sa onOdoslať udalosť spúšťa handleSubmit() funkciu, ktorá volá Prihlásiť Se() funkcia od firebase.js. Ak funkcia vráti chybu, aktualizujte chybový stav a zobrazte chybové hlásenie.

Pre prihlasovací formulár vytvorte Signin.js a pridajte nasledujúce.

import { useState } z "reagovať";
import { prihlásenie } z "./firebase";
const Login = () => {
 const [e-mail, setEmail] = useState("");
 const [heslo, setPassword] = useState("");
 const [chyba, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 nastaviť heslo("");
 const res = čakať na prihlásenie (e-mail, heslo);
 if (res.error) seterror (res.error);
 };
 vrátiť (
 <>
 {chyba? 
{chyba}
: nulový}


 type="text"
 name="email"
 value={email}
 placeholder="Váš email"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="heslo"
 name="heslo"
 value={password}
 placeholder="Vaše heslo"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
exportovať predvolené prihlásenie;

Prihlasovací formulár je dosť podobný registračnej stránke okrem toho, že odoslanie volá Prihlásiť sa() funkciu.

Nakoniec vytvorte profilovú stránku. Toto je stránka, na ktorú aplikácia presmeruje používateľov po úspešnej autentifikácii.

Vytvorte Profile.js a pridajte nasledujúce.

import { signOut } z "./firebase";
const Profil = () => {
 const handleLogout = async () => {
 čakať na odhlásenie();
 };
 vrátiť (
 <>
Profil

Odhlásiť sa
 );
};
exportovať predvolený profil;

V tomto komponente máte nadpis Profil a tlačidlo odhlásenia. The po kliknutí ovládač na tlačidle spustí handleLogout funkcia, ktorá odhlási používateľa.

Vytvorte autentifikačné cesty

Ak chcete do prehliadača zobrazovať stránky, ktoré ste vytvorili, nastavte react-router-dom.

Inštalácia reagovať-smerovač-dom:

npm i reagovat-router-dom

In index.js, konfigurovať reagovať-smerovač-dom:

import Reagovať z "reagovať";
importovať ReactDOM z "react-dom";
import { BrowserRouter, Routes, Route } z "react-router-dom";
importovať aplikáciu z "./App";
importovať Prihlásenie z "./Login";
importovať profil z "./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Do tohto momentu môže aplikácia registrovať užívateľa, registrovať ho a odhlasovať. Ako teda zistíte, či je používateľ prihlásený alebo nie?

V ďalšej časti tohto tutoriálu uvidíte, ako môžete použiť kontext React na sledovanie stavu overenia používateľa v aplikácii.

Spravujte autentifikáciu pomocou React Context API

React Context je nástroj na správu stavu, ktorý zjednodušuje zdieľanie údajov medzi aplikáciami. Je to lepšia alternatíva k vŕtaniu podpier, kde údaje prechádzajú stromom z rodiča na dieťa, kým sa nedostanú ku komponentu, ktorý ich potrebuje.

Vytvorte kontext overenia

V src priečinok, pridať AuthContext.js súbor a vytvorte a exportujte AuthContext.

import { createContext } z "reagovať";
const AuthContext = createContext();
exportovať predvolený AuthContext;

Ďalej vytvorte poskytovateľa v AuthProvider.js. Umožní použitie komponentov AuthContext.

import { getAuth, onAuthStateChanged } z "firebase/auth";
import { useState, useEffect } from 'react';
importovať AuthContext z './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ deti }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (používateľ)
 })
 }, []);
vrátiť (
{deti}
 );
 };

Tu získate užívateľskú hodnotu pomocou onAuthStateChanged() metóda z Firebase. Táto metóda vráti objekt používateľa, ak overí používateľa, a hodnotu null, ak to nedokáže. Pomocou háčik useEffect()., užívateľská hodnota sa aktualizuje pri každej zmene stavu overenia.

In index.js, obalte cesty s AuthProvider na zabezpečenie prístupu všetkých komponentov k používateľovi v kontexte:

import { AuthProvider } z "./AuthProvider";
ReactDOM.render(




} />
} />
} />



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

Vytvorte chránené trasy

Komu chrániť citlivé cesty, skontrolujte stav overenia používateľa, ktorý sa pokúša prejsť na chránenú stránku, ako je stránka profilu.

Upraviť Profile.js na presmerovanie používateľa, ak nie je overený.

import { useContext } z "reagovať";
importovať AuthContext z "./AuthContext";
import { useNavigate, Navigate } z "react-router-dom";
import { signOut } z "./firebase";
const Profil = () => {
 const { user } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = async () => {
 čakať na odhlásenie();
 };
 if (!user) {
 vrátiť ;
 }
 vrátiť (
 <>
Profil

Odhlásiť sa
 );
};
exportovať predvolený profil;

Aplikácia podmienečne vykresľuje stránku profilu presmerovaním používateľa na prihlasovaciu stránku, ak nie je overený.

Ideme ďalej s autentifikáciou Firebase

V tomto návode ste použili Firebase na overenie používateľov pomocou ich e-mailu a hesla. Vo Firestore ste tiež vytvorili záznamy používateľov. Firebase poskytuje funkcie na spoluprácu s poskytovateľmi overenia, ako sú Google, Facebook a Twitter.

10 najlepších postupov, ktoré musíte dodržiavať v roku 2022

Prečítajte si ďalej

O autorovi