Firebase poskytuje ověřovací služby, které umožňují snadnou registraci a přihlašování uživatelů. Můžete použít e-mail, hesla, telefonní čísla a poskytovatele identity, jako je Google a Facebook.

V tomto tutoriálu se dozvíte, jak můžete použít Firebase Authentication v Reactu k ověřování uživatelů pomocí e-mailu a hesla. Uživatelská data shromážděná ve Firestore, cloudové databázi NoSQL, budete ukládat také z Firebase.

Všimněte si, že tento tutoriál používá Firebase v9 a React Router v6.

Vytvořte aplikaci Firebase

Pro připojení vaší aplikace k Firebase, zaregistrujte svou aplikaci ve Firebase, abyste získali konfigurační objekt. To je to, co použijete k inicializaci Firebase ve vaší aplikaci React.

Chcete-li vytvořit aplikaci Firebase, postupujte podle následujících kroků.

1. Zamiřte k konzole Firebase a klikněte Vytvořte projekt.
2. Pojmenujte svůj projekt a klikněte vytvořit k zahájení procesu.
3. Klikněte na Web ikona (
4. Pojmenujte aplikaci podle svého výběru a klikněte Registrovat aplikaci. Firebase Hosting není nutné aktivovat.
5. Zkopírujte konfigurační objekt pod Přidejte Firebase SDK.

Vytvořte aplikaci React

Použití create-react-app k vytvoření lešení aplikace React.

npx create-react-app reakce-auth-firebase

Přejděte do složky a spusťte aplikaci.

cd reagovat-auth-firebase
npm spuštění běhu

Ověřování uživatelů pomocí funkcí Firebase

Před použitím Firebase ji nainstalujte.

npm i firebase

Vytvořte nový soubor, firebase.js, a inicializujte Firebase.

import { initializeApp } z "firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 ID projektu: ,
 úložný kbelík: ,
 messagingSenderId: ,
 appId: 
};
// Inicializace Firebase
const app = initializeApp (firebaseConfig);

Použijte konfigurační objekt, který jste zkopírovali při registraci aplikace.

Dále importujte moduly Firebase, které budete používat.

import {
 getAuth,
 createUserWithEmailAndPassword,
 přihlásit se e-mailem a heslem,
 odhlásit se,
} z "firebase/auth";
import { getFirestore, addDoc, kolekce } z "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Na ověřovat uživatele, musíte vytvořit tři funkce: přihlášení, přihlášení a odhlášení.

The Přihlásit se funkce předá e-mail a heslo createUserWithEmailAndPassword pro registraci nového uživatele. createUserWithEmailAndPassword vrátí uživatelská data, která použijete k vytvoření nového uživatelského záznamu v databázi.

const signUp = async (e-mail, heslo) => {
 Snaž se {
 const userCredential = wait createUserWithEmailAndPassword(
 auth,
 e-mailem,
 Heslo
 );
 const user = userCredential.user;
 wait addDoc (kolekce (db, "users"), {
 uid: user.uid,
 email: user.email,
 });
 vrátit true
 } catch (chyba) {
 return {error: error.message}
 }
};

Upozorňujeme, že před registrací nekontrolujete, zda je e-mail již používán, protože to za vás zpracovává Firebase.

Dále v přihlásit se funkce předat e-mail a heslo na přihlásit se e-mailem a heslem funkce pro přihlášení registrovaného uživatele.

const signIn = async (e-mail, heslo) => {
 Snaž se {
 const userCredential = čekat na přihlášeníWithEmailAndPassword(
 auth,
 e-mailem,
 Heslo
 );
 const user = userCredential.user;
 vrátit true
 } catch (chyba) {
 return {error: error.message}
 }
};

Obě funkce signUp a signOut vrátí hodnotu true, pokud jsou úspěšné, a chybovou zprávu, pokud dojde k chybě.

Funkce odhlášení je poměrně jednoduchá. Volá to odhlásit se() funkce z Firebase.

const signOut = async() => {
 Snaž se {
 čekat na odhlášení (auth)
 vrátit true
 } catch (chyba) {
 vrátit false
 }
};

Vytvořte formuláře React

Přihlašovací a registrační formuláře shromáždí e-mail a heslo od uživatele.

Vytvořte novou komponentu Signup.js a přidejte následující.

import { useState } z "reagovat";
import { Link } z "react-router-dom";
import { signUp } z "./firebase";
const Registrace = () => {
 const [e-mail, setEmail] = useState("");
 const [heslo, setPassword] = useState("");
 const [chyba, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (heslo !== heslo2) {
 seterror("Hesla se neshodují");
 } jinak {
 setEmail("");
 nastavit heslo("");
 const res = čekat na přihlášení (e-mail, heslo);
 if (res.error) seterror (res.error)
 }
 };
 vrátit se (
 <>
Přihlásit se



 {chyba? 
{chyba}
: nula}


 type="e-mail"
 name="e-mail"
 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)}
 />
Předložit




 již zaregistrované? Přihlásit se





 );
};
exportovat výchozí registraci;

Zde vytváříte registrační formulář a sledujete e-mail a heslo pomocí stavu. Jakmile formulář odešlete, na Odeslat událost spouští handleSubmit() funkce, která volá Přihlásit se() funkce od firebase.js. Pokud funkce vrátí chybu, aktualizujte chybový stav a zobrazte chybovou zprávu.

Pro přihlašovací formulář vytvořte Signin.js a přidejte následující.

import { useState } z "reagovat";
import { přihlášení } z "./firebase";
const Login = () => {
 const [e-mail, setEmail] = useState("");
 const [heslo, setPassword] = useState("");
 const [chyba, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 nastavit heslo("");
 const res = čekat na přihlášení (e-mail, heslo);
 if (res.error) seterror (res.error);
 };
 vrátit se (
 <>
 {chyba? 
{chyba}
: nula}


 type="text"
 name="e-mail"
 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)}
 />




 );
};
exportovat výchozí přihlášení;

Přihlašovací formulář je velmi podobný přihlašovací stránce, kromě toho, že odeslání volá přihlásit se() funkce.

Nakonec vytvořte stránku Profil. Toto je stránka, na kterou aplikace přesměruje uživatele po úspěšném ověření.

Vytvořit Profile.js a přidejte následující.

import { signOut } z "./firebase";
const Profil = () => {
 const handleLogout = async () => {
 čekat na odhlášení();
 };
 vrátit se (
 <>
Profil

Odhlásit se
 );
};
exportovat výchozí profil;

V této komponentě máte záhlaví Profil a tlačítko pro odhlášení. The při kliknutí manipulátor na tlačítku spouští handleLogout funkce, která uživatele odhlásí.

Vytvořte ověřovací cesty

Chcete-li zobrazit stránky, které jste vytvořili, do prohlížeče, nastavte react-router-dom.

Nainstalujte reagovat-router-dom:

npm i reagovat-router-dom

v index.js, konfigurovat reagovat-router-dom:

import Reagovat z "reagovat";
importovat ReactDOM z "react-dom";
import { BrowserRouter, Routes, Route } z "react-router-dom";
importovat aplikaci z "./App";
importovat Přihlášení z "./Login";
importovat profil z "./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Do této chvíle může aplikace registrovat uživatele, přihlašovat je a odhlašovat. Jak tedy poznáte, zda je uživatel přihlášen nebo ne?

V další části tohoto kurzu uvidíte, jak můžete použít kontext React ke sledování stavu ověření uživatele v aplikaci.

Spravujte ověřování pomocí React Context API

React Context je nástroj pro správu stavu, který zjednodušuje sdílení dat mezi aplikacemi. Je to lepší alternativa k prop drillingu, kde data přecházejí stromem z rodiče na potomka, dokud se nedostanou ke komponentě, která je potřebuje.

Vytvořte kontext ověřování

V src složku, přidat AuthContext.js soubor a vytvořit a exportovat AuthContext.

import { createContext } z "react";
const AuthContext = createContext();
exportovat výchozí AuthContext;

Dále vytvořte poskytovatele v AuthProvider.js. Umožní použití komponent AuthContext.

import { getAuth, onAuthStateChanged } z "firebase/auth";
import { useState, useEffect } z 'react';
importovat AuthContext z './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ děti }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (uživatel)
 })
 }, []);
vrátit se (
{děti}
 );
 };

Zde získáte uživatelskou hodnotu pomocí onAuthStateChanged() metoda z Firebase. Tato metoda vrací objekt uživatele, pokud ověřuje uživatele, a null, pokud nemůže. Pomocí háček useEffect()., uživatelská hodnota se aktualizuje pokaždé, když se změní stav ověřování.

v index.js, zabalte cesty s AuthProvider zajistit, aby všechny komponenty přistupovaly k uživateli v kontextu:

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




} />
} />
} />



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

Vytvořte chráněné trasy

Na chránit citlivé cesty, zkontrolujte stav ověření uživatele, který se pokouší přejít na chráněnou stránku, jako je stránka profilu.

Modifikovat Profile.js k přesměrování uživatele, pokud není ověřen.

import { useContext } z "reagovat";
import 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 () => {
 čekat na odhlášení();
 };
 if (!user) {
 vrátit se ;
 }
 vrátit se (
 <>
Profil

Odhlásit se
 );
};
exportovat výchozí profil;

aplikace podmíněně vykresluje stránku profilu přesměrováním uživatele na přihlašovací stránku, pokud není ověřen.

Jdeme dále s ověřováním Firebase

V tomto kurzu jste použili Firebase k ověření uživatelů pomocí jejich e-mailu a hesla. Ve Firestore jste také vytvořili uživatelské záznamy. Firebase poskytuje funkce pro spolupráci s poskytovateli ověřování, jako jsou Google, Facebook a Twitter.

10 React Best Practices, které musíte dodržovat v roce 2022

Přečtěte si další

O autorovi