Firebase tillhandahåller autentiseringstjänster som gör att du enkelt kan registrera och logga in användare. Du kan använda e-post, lösenord, telefonnummer och identitetsleverantörer som Google och Facebook.
I den här självstudien kommer du att lära dig hur du kan använda Firebase-autentisering i React för att autentisera användare med e-post och lösenord. Du kommer att lagra användardata som samlas in i Firestore, en NoSQL-molndatabas också från Firebase.
Observera att den här handledningen använder Firebase v9 och React Router v6.
Skapa en Firebase-applikation
För att koppla din applikation till Firebase, registrera din app hos Firebase för att få ett konfigurationsobjekt. Det här är vad du kommer att använda för att initiera Firebase i din React-applikation.
För att skapa en firebase-applikation, följ följande steg.
- Gå över till Firebase-konsol och klicka Skapa ett projekt.
- Ge ditt projekt ett namn och klicka skapa för att starta processen.
- Klicka på webb ikon (
- Ge din app ett valfritt namn och klicka Registrera app. Du behöver inte aktivera Firebase Hosting.
- Kopiera konfigurationsobjektet under Lägg till Firebase SDK.
Skapa en React-applikation
Använda sig av skapa-reagera-app för att bygga en React-app.
npx create-react-app react-auth-firebase
Navigera till mappen och starta programmet.
cd react-auth-firebase
npm körstart
Autentisera användare med Firebase-funktioner
Installera den innan du använder Firebase.
npm i firebase
Skapa en ny fil, firebase.js, och initiera Firebase.
importera { initializeApp } från "firebase/app";
const firebaseConfig = {
apiKey: ,
authDomain: ,
projekt-id: ,
storageBucket: ,
messagingSenderId: ,
appId:
};
// Initiera Firebase
const app = initializeApp (firebaseConfig);
Använd konfigurationsobjektet du kopierade när du registrerade appen.
Importera sedan Firebase-modulerna du ska använda.
importera {
getAuth,
skapaUserWithEmailAndPassword,
logga inmed e-postoch lösenord,
logga ut,
} från "firebase/auth";
importera { getFirestore, addDoc, collection } från "firebase/firestore";
const db = getFirestore();
const auth = getAuth();Till autentisera användaremåste du skapa tre funktioner: SignUp, SignIn och SignOut.
De Bli Medlem funktionen skickar e-post och lösenord till skapaUserWithEmailAndPassword för att registrera en ny användare. skapaUserWithEmailAndPassword returnerar användardata som du kommer att använda för att skapa en ny användarpost i databasen.
const signUp = async (e-post, lösenord) => {
Prova {
const userCredential = väntar skapaUserWithEmailAndPassword(
auth,
e-post,
Lösenord
);
const användare = userCredential.user;
await addDoc (samling (db, "users"), {
uid: user.uid,
e-post: användare.e-post,
});
returnera sant
} fånga (fel) {
returnera {error: error.message}
}
};
Observera att du inte kontrollerar om e-postmeddelandet redan används innan registrering eftersom Firebase hanterar det åt dig.
Nästa, i logga in funktionen skicka e-post och lösenord till logga inMed e-postoch lösenord funktion för att logga in en registrerad användare.
const signIn = async (e-post, lösenord) => {
Prova {
const userCredential = await signInWithEmailAndPassword(
auth,
e-post,
Lösenord
);
const användare = userCredential.user;
returnera sant
} fånga (fel) {
returnera {error: error.message}
}
};
Både signUp- och signOut-funktionerna returnerar sant om det lyckas och ett felmeddelande om ett fel uppstår.
SignOut-funktionen är ganska enkel. Den kallar logga ut() funktion från Firebase.
const signOut = async() => {
Prova {
väntar på utloggning (auth)
returnera sant
} fånga (fel) {
returnera falskt
}
};
Skapa reaktionsformulär
Inloggnings- och registreringsformulären samlar in e-post och lösenord från användaren.
Skapa en ny komponent Signup.js och lägg till följande.
importera { useState } från "react";
importera { Link } från "react-router-dom";
importera { signUp } från "./firebase";
const Signup = () => {
const [email, setEmail] = useState("");
const [lösenord, setPassword] = useState("");
const [error, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
if (lösenord !== lösenord2) {
seterror("Lösenorden matchar inte");
} annat {
setEmail("");
Välj lösenord("");
const res = inväntar registrering (e-post, lösenord);
if (res.error) seterror (res.error)
}
};
lämna tillbaka (
<>
Bli Medlem
{fel? {fel}: null}
redan registrerad? Logga in
);
};
export standardregistrering;
Här skapar du ett registreringsformulär och håller reda på e-post och lösenord med hjälp av state. När du har skickat in formuläret, onSubmit händelsen utlöser handleSubmit() funktion som anropar Bli Medlem() funktion från firebase.js. Om funktionen returnerar ett fel, uppdatera feltillståndet och visa felmeddelandet.
För inloggningsformuläret, skapa Signin.js och lägg till följande.
importera { useState } från "react";
importera { signIn } från "./firebase";
const Login = () => {
const [email, setEmail] = useState("");
const [lösenord, setPassword] = useState("");
const [error, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
setEmail("");
Välj lösenord("");
const res = invänta inloggning (e-post, lösenord);
if (res.error) seterror (res.error);
};
lämna tillbaka (
<>
{fel? {fel}: null}
);
};
export standardinloggning;
Inloggningsformuläret är ganska likt registreringssidan förutom att inlämning anropar logga in() fungera.
Slutligen, skapa profilsidan. Det här är sidan som appen kommer att omdirigera användare till efter framgångsrik autentisering.
Skapa Profile.js och lägg till följande.
importera { signOut } från "./firebase";
const Profil = () => {
const handleLogout = async () => {
await signOut();
};
lämna tillbaka (
<>
Profil
);
};
exportera standardprofil;
I den här komponenten har du profilrubriken och utloggningsknappen. De påKlicka hanteraren på knappen utlöser hantera Logga ut funktion som loggar ut användaren.
Skapa autentiseringsrutter
För att visa sidorna du skapade till webbläsaren, ställ in react-router-dom.
Installera reagera-router-dom:
npm jag reagerar-router-dom
I index.js, konfigurera reagera-router-dom:
import Reagera från "reagera";
importera ReactDOM från "react-dom";
importera { BrowserRouter, Routes, Route } från "react-router-dom";
importera app från "./App";
importera inloggning från "./Login";
importera profil från "./Profile";
ReactDOM.render(
} />
} />
} />
document.getElementById("root")
);
Fram till denna punkt kan applikationen registrera en användare, registrera dem och logga ut dem. Så hur vet du om en användare är inloggad eller inte?
I nästa avsnitt av denna handledning kommer du att se hur du kan använda React-kontext för att hålla reda på en användares autentiseringsstatus i hela applikationen.
Hantera autentisering med React Context API
React Context är ett tillståndshanteringsverktyg som förenklar datadelning mellan appar. Det är ett bättre alternativ till propellborrning, där data passerar ner i trädet från förälder till barn tills den når den komponent som behöver det.
Skapa autentiseringskontext
I den src mapp, lägg till AuthContext.js fil och skapa och exportera AuthContext.
importera { createContext } från "react";
const AuthContext = createContext();
export standard AuthContext;
Skapa sedan leverantören i AuthProvider.js. Det kommer att tillåta komponenter att använda AuthContext.
importera { getAuth, onAuthStateChanged } från "firebase/auth";
importera { useState, useEffect } från 'react';
importera AuthContext från './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ barn }) => {
const [användare, setUser] = useState (null);
useEffect(() => {
onAuthStateChanged (auth,(användare) => {
setUser (användare)
})
}, []);
lämna tillbaka ({barn}
);
};
Här får du användarvärdet genom att använda onAuthStateChanged() metod från Firebase. Denna metod returnerar ett användarobjekt om det autentiserar användaren och null om det inte kan. Genom att använda useEffect() krok, uppdateras användarvärdet varje gång autentiseringsstatusen ändras.
I index.js, slå in rutterna med AuthProvider för att säkerställa att alla komponenter kommer åt användaren i sammanhanget:
importera { AuthProvider } från "./AuthProvider";
ReactDOM.render(
} />
} />
} />
,
document.getElementById("root")
);
Skapa skyddade rutter
Till skydda känsliga vägar, kontrollera autentiseringsstatusen för en användare som försöker navigera till en skyddad sida som profilsidan.
Ändra Profile.js för att omdirigera en användare om de inte är autentiserade.
importera { useContext } från "react";
importera AuthContext från "./AuthContext";
importera { useNavigate, Navigate } från "react-router-dom";
importera { signOut } från "./firebase";
const Profil = () => {
const { användare } = useContext (AuthContext);
const navigera = useNavigate();
const handleLogout = async () => {
await signOut();
};
if (!användare) {
lämna tillbaka ;
}
lämna tillbaka (
<>
Profil
);
};
exportera standardprofil;Appen villkorligt återger profilsidan genom att omdirigera användaren till inloggningssidan om de inte är autentiserade.
Gå vidare med Firebase-autentisering
I den här självstudien använde du Firebase för att autentisera användare med deras e-postadress och lösenord. Du skapade också användarposter i Firestore. Firebase tillhandahåller funktioner för att fungera med autentiseringsleverantörer som Google, Facebook och Twitter.
10 React Best Practices du måste följa under 2022
Läs Nästa
Relaterade ämnen
- Programmering
- Reagera
- Programmering
- JavaScript
Om författaren
Mary Gathoni är en mjukvaruutvecklare med en passion för att skapa tekniskt innehåll som inte bara är informativt utan också engagerar. När hon inte kodar eller skriver tycker hon om att umgås med vänner och att vara utomhus.
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
