Firebase zapewnia usługi uwierzytelniania, które umożliwiają łatwe rejestrowanie i logowanie użytkowników. Możesz korzystać z poczty e-mail, haseł, numerów telefonów i dostawców tożsamości, takich jak Google i Facebook.

W tym samouczku dowiesz się, jak używać uwierzytelniania Firebase w React do uwierzytelniania użytkowników za pomocą adresu e-mail i hasła. Będziesz przechowywać dane użytkowników zebrane w Firestore, bazie danych NoSQL w chmurze również z Firebase.

Pamiętaj, że ten samouczek używa Firebase v9 i React Router v6.

Utwórz aplikację Firebase

Aby połączyć aplikację z Firebase, zarejestruj swoją aplikację w Firebase, aby uzyskać obiekt konfiguracji. To jest to, czego użyjesz do zainicjowania Firebase w swojej aplikacji React.

Aby utworzyć aplikację Firebase, wykonaj następujące kroki.

1. Udaj się do Konsola Firebase i kliknij Utwórz projekt.
2. Nadaj nazwę swojemu projektowi i kliknij Stwórz aby rozpocząć proces.
3. Kliknij na Sieć Ikona (
4. Nadaj swojej aplikacji wybraną nazwę i kliknij Zarejestruj aplikację. Nie musisz włączać Hostingu Firebase.
instagram viewer
5. Skopiuj obiekt konfiguracyjny pod Dodaj pakiet SDK Firebase.

Utwórz aplikację React

Stosowanie aplikacja-stwórz-reaguj do tworzenia szkieletów aplikacji React.

npx create-react-app react-auth-firebase

Przejdź do folderu i uruchom aplikację.

CD-Auth-React-Auth-firebase
uruchomienie npm

Uwierzytelnij użytkowników za pomocą funkcji Firebase

Przed użyciem Firebase zainstaluj go.

npm i baza ogniowa

Utwórz nowy plik, firebase.js, i zainicjuj Firebase.

importuj { initializeApp } z „firebase/app”;
const firebaseConfig = {
 Klucz API: ,
 authDomain: ,
 identyfikator projektu: ,
 Wiaderko do przechowywania: ,
 MessageSenderId: ,
 identyfikator aplikacji: 
};
// Zainicjuj Firebase
const app = initializeApp (firebaseConfig);

Użyj obiektu konfiguracji skopiowanego podczas rejestracji aplikacji.

Następnie zaimportuj moduły Firebase, których będziesz używać.

import {
 uzyskaćAuth,
 utwórzUserWithEmailAndPassword,
 logowanie za pomocą adresu e-mail i hasła,
 Wyloguj się,
} z "firebase/auth";
import { getFirestore, addDoc, kolekcja } z "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

W celu uwierzytelniaj użytkowników, musisz utworzyć trzy funkcje: signUp, signIn i signOut.

ten Zapisz się funkcja przekazuje e-mail i hasło do createUserWithEmailAndPassword aby zarejestrować nowego użytkownika. createUserWithEmailAndPassword zwraca dane użytkownika, których użyjesz do utworzenia nowego rekordu użytkownika w bazie danych.

const signUp = async (e-mail, hasło) => {
 próbować {
 const userCredential = await createUserWithEmailAndPassword(
 autoryzować,
 e-mail,
 hasło
 );
 const user = userCredential.user;
 await addDoc (kolekcja (db, "użytkownicy"), {
 uid: użytkownik.uid,
 email: użytkownik.email,
 });
 zwróć prawdę
 } złapać (błąd) {
 return {błąd: komunikat o błędzie}
 }
};

Pamiętaj, że przed rejestracją nie sprawdzasz, czy adres e-mail jest już używany, ponieważ Firebase zajmuje się tym za Ciebie.

Następnie w Zaloguj się funkcja przekaż e-mail i hasło do zaloguj się za pomocą e-maila i hasła funkcja logowania zarejestrowanego użytkownika.

const signIn = async (e-mail, hasło) => {
 próbować {
 const userCredential = await signInWithEmailAndPassword(
 autoryzować,
 e-mail,
 hasło
 );
 const user = userCredential.user;
 zwróć prawdę
 } złapać (błąd) {
 return {błąd: komunikat o błędzie}
 }
};

Obie funkcje signUp i signOut zwracają wartość true, jeśli się powiedzie, oraz komunikat o błędzie, jeśli wystąpi błąd.

Funkcja wylogowania jest dość prosta. Nazywa Wyloguj się() funkcja z Firebase.

const signOut = async() => {
 próbować {
 czekaj na wylogowanie (auth)
 zwróć prawdę
 } złapać (błąd) {
 zwróć fałsz
 }
};

Twórz formularze reakcji

Formularze logowania i rejestracji pobiorą adres e-mail i hasło od użytkownika.

Utwórz nowy komponent Zarejestruj się.js i dodaj następujące.

importuj { useState } z "react";
importuj { Link } z "react-router-dom";
importuj { rejestracja } z "./firebase";
const Rejestracja = () => {
 const [e-mail, setEmail] = useState("");
 const [hasło, setPassword] = useState("");
 const [błąd, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.zapobiecDomyślnie();
 if (hasło !== hasło2) {
 seterror("Hasła nie pasują");
 } w przeciwnym razie {
 setEmail("");
 Ustaw hasło("");
 const res = czekaj na rejestrację (e-mail, hasło);
 if (res.error) seterror (res.error)
 }
 };
 powrót (
 <>
Zapisać się



 {błąd? 
{błąd}
: zero}


 type="e-mail"
 name="e-mail"
 wartość={e-mail}
 placeholder="Twój e-mail"
 wymagany
 onChange={(e) => setEmail (e.target.value)}
 />
 type="hasło"
 name="hasło"
 wartość={hasło}
 placeholder="Twoje hasło"
 wymagany
 onChange={(e) => setPassword (e.target.value)}
 />
Składać




 już zarejestrowany? Zaloguj sie





 );
};
eksportuj domyślną rejestrację;

Tutaj tworzysz formularz rejestracyjny i śledzisz adres e-mail i hasło za pomocą stanu. Po przesłaniu formularza, onSubmit zdarzenie uruchamia obsługujWyślij() funkcja, która wywołuje Zapisz się() funkcja z firebase.js. Jeśli funkcja zwraca błąd, zaktualizuj stan błędu i wyświetl komunikat o błędzie.

W przypadku formularza logowania utwórz Zaloguj.js i dodaj następujące.

importuj { useState } z "react";
importuj { logowanie } z "./firebase";
const Login = () => {
 const [e-mail, setEmail] = useState("");
 const [hasło, setPassword] = useState("");
 const [błąd, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.zapobiecDomyślnie();
 setEmail("");
 Ustaw hasło("");
 const res = czekaj na logowanie (e-mail, hasło);
 if (res.error) seterror (res.error);
 };
 powrót (
 <>
 {błąd? 
{błąd}
: zero}


 type="tekst"
 name="e-mail"
 wartość={e-mail}
 placeholder="Twój e-mail"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="hasło"
 name="hasło"
 wartość={hasło}
 placeholder="Twoje hasło"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
eksportuj domyślny login;

Formularz logowania jest dość podobny do strony rejestracji, z wyjątkiem tego, że zgłoszenie wywołuje Zaloguj się() funkcjonować.

Na koniec utwórz stronę Profil. To jest strona, do której aplikacja przekieruje użytkowników po pomyślnym uwierzytelnieniu.

Tworzyć Profil.js i dodaj następujące.

importuj { wyloguj } z "./firebase";
const Profil = () => {
 const handleLogout = async () => {
 czekaj na wylogowanie();
 };
 powrót (
 <>
Profil

Wyloguj
 );
};
eksportuj domyślny profil;

W tym komponencie masz nagłówek Profil i przycisk wylogowania. ten na kliknięcie uchwyt na przycisku wyzwala uchwytWyloguj funkcja wylogowująca użytkownika.

Twórz trasy uwierzytelniania

Aby wyświetlać utworzone strony w przeglądarce, skonfiguruj react-router-dom.

zainstalować React-router-dom:

npm i reagują-router-dom

w index.js, skonfigurować React-router-dom:

importuj React z „react”;
importować ReactDOM z "react-dom";
importuj { BrowserRouter, Routes, Route } z "react-router-dom";
importuj aplikację z "./App";
importuj Login z "./Login";
importuj Profil z "./Profil";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Do tego momentu aplikacja może zarejestrować użytkownika, zarejestrować go i wylogować. Skąd więc wiesz, czy użytkownik jest zalogowany, czy nie?

W następnej sekcji tego samouczka zobaczysz, jak używać kontekstu React do śledzenia statusu uwierzytelnienia użytkownika w aplikacji.

Zarządzaj uwierzytelnianiem za pomocą React Context API

React Context to narzędzie do zarządzania stanem, które upraszcza udostępnianie danych między aplikacjami. Jest to lepsza alternatywa dla prop drill, gdzie dane są przekazywane w dół drzewa od rodzica do dziecka, aż dotrą do komponentu, który tego potrzebuje.

Utwórz kontekst uwierzytelniania

w src folder, dodaj AuthContext.js plik i tworzenie i eksport AuthContext.

import { createContext } z "react";
const AuthContext = utwórzKontekst();
eksportuj domyślny AuthContext;

Następnie utwórz dostawcę w AuthProvider.js. Pozwoli to na użycie komponentów AuthContext.

import { getAuth, onAuthStateChanged } z "firebase/auth";
import { useState, useEffect } z 'react';
importuj AuthContext z „./AuthContext”
const auth = getAuth()
export const AuthProvider = ({ dzieci }) => {
 const [użytkownik, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (użytkownik)
 })
 }, []);
powrót (
{dzieci}
 );
 };

Tutaj otrzymujesz wartość użytkownika za pomocą onAuthStateChanged() metoda z Firebase. Ta metoda zwraca obiekt użytkownika, jeśli uwierzytelnia użytkownika i null, jeśli nie może. Używając hak useEffect(), wartość użytkownika jest aktualizowana za każdym razem, gdy zmienia się stan uwierzytelniania.

w index.js, owiń trasy w Dostawca uwierzytelniania aby upewnić się, że wszystkie komponenty mają dostęp do użytkownika w kontekście:

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




} />
} />
} />



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

Twórz chronione trasy

W celu chronić wrażliwe trasy, sprawdź stan uwierzytelniania użytkownika próbującego przejść do chronionej strony, takiej jak strona profilu.

Modyfikować Profil.js przekierować użytkownika, jeśli nie jest uwierzytelniony.

import { useContext } z "react";
importuj AuthContext z "./AuthContext";
import { useNavigate, Navigate } z "react-router-dom";
importuj { wyloguj } z "./firebase";
const Profil = () => {
 const { użytkownik } = useContext (AuthContext);
 const nawigacja = useNavigate();
 const handleLogout = async () => {
 czekaj na wylogowanie();
 };
 jeśli (!użytkownik) {
 powrót ;
 }
 powrót (
 <>
Profil

Wyloguj
 );
};
eksportuj domyślny profil;

Aplikacja renderuje warunkowo stronę profilu poprzez przekierowanie użytkownika na stronę logowania, jeśli nie jest on uwierzytelniony.

Idź dalej z uwierzytelnianiem Firebase

W tym samouczku użyłeś Firebase do uwierzytelniania użytkowników przy użyciu ich adresu e-mail i hasła. Utworzyłeś także rekordy użytkowników w Firestore. Firebase udostępnia funkcje do współpracy z dostawcami uwierzytelniania, takimi jak Google, Facebook i Twitter.

10 najlepszych praktyk Reaguj, których musisz przestrzegać w 2022 r.

Czytaj dalej

O autorze