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 handledningen 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 du samlar 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 ansluta din app till Firebase, registrera din app hos Firebase för att ta emot konfigurationsobjekt. Det här är vad du skulle använda för att initiera Firebase i din React-applikation.
Följ dessa steg för att skapa en Firebase-applikation.
För att autentisera användare måste du skapa tre funktioner: registrering, logga in och utloggning.
Registreringsfunktionen skickar e-post och lösenord till createUserWithEmailAndPassword för att registrera en ny användare. createUserWithEmailAndPassword returnerar användardata som du kommer att använda för att skapa en ny användarpost i databasen.
Observera att du inte kontrollerar om e-postmeddelandet redan används innan du registrerar dig eftersom Firebase hanterar det åt dig.
Skicka sedan e-postadressen och lösenordet till funktionen signInWithEmailAndPassword för att logga in som en registrerad användare i funktionen Logga in.
Både registrerings- och utloggningsfunktionerna returnerar sant om det lyckas och ett felmeddelande om ett fel uppstår.
SignOut-funktionen är ganska enkel. Den anropar funktionen signOut() från Firebase.
Skapa feedbackformulär
Inloggnings- och registreringsformulär samlar in e-post och lösenord från användaren.
Skapa en ny komponent Signup.js och lägg till följande.
Här skapar du ett registreringsformulär och håller reda på e-post och lösenord med hjälp av status. När du har skickat formuläret utlöser onsubmit-händelsen funktionen handleSubmit() som anropar signup()-funktionen från Firebase.js. Om funktionen returnerar ett fel, uppdatera felstatusen och visa felmeddelandet.
Skapa Signin.js för inloggningsformuläret och lägg till följande.
Inloggningsformuläret är mycket likt registreringssidan, förutom att inlämningen anropar signIn()-funktionen.
Slutligen, skapa en profilsida. Efter framgångsrik autentisering är detta sidan som appen kommer att omdirigera användarna till.
Skapa Profile.js och lägg till följande.
I den här komponenten har du en profiltitel och en utloggningsknapp. Onclick-hanteraren på knappen utlöser handleLogout-funktionen som loggar ut användaren.
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?
I nästa del av den här handledningen kommer du att se hur du kan använda React Context för att hålla reda på en användares autentiseringsstatus i hela applikationen.
Hantera autentisering med React Context API
ReactContext är ett tillståndshanteringsverktyg som förenklar datadelning mellan appar. Detta är ett bättre alternativ till propellborrning, där data skickas ner i trädet från förälder till barn tills den når den komponent som behöver den.
Här får du användarvärdet från Firebase med metoden onAuthStateChanged(). Denna metod returnerar ett användarobjekt om det autentiserar användaren och null om det inte kan. Med hjälp av useEffect()-kroken uppdateras användarvärdet varje gång autentiseringstillståndet ändras.
Appen återger profilsidan villkorligt genom att omdirigera användaren till inloggningssidan om de inte är autentiserade.
fortsätter 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 har också skapat användarposter i Firestore. Firebase tillhandahåller funktioner för att arbeta med autentiseringsleverantörer som Google, Facebook och Twitter.