Så här skapar du en Firebase-inloggning och registrerar dig i React

Firebase är ett system som erbjuder många plattformar för utvecklare att bygga webbappar. En av de väsentliga elementen i en app är att skapa användare och låta dem logga in. Låt oss se hur vi kan skriva en Firebase-inloggning som är komplett men ändå väldigt enkel att implementera.

Skapa din Firebase-app

Du måste först skapa ett Firebase-appprojekt så gå över till Firebase-konsolen och lägg till ett nytt projekt. Du lägger till appen här.

https://console.firebase.google.com/

Det kommer att starta en assistent som frågar dig namnet på projektet.

Nästa skärm kommer att fråga dig om du vill aktivera analys. Stäng av den och klicka på knappen Skapa projekt . Det kommer att ta ett tag att tillhandahålla ditt projekt och efter det får du en knapp för att fortsätta som tar dig till projektöversikten.

Du måste nu lägga till en Firebase-app i Firebase-projektet. Är vettigt? Ett Firebase-projekt låter dig innehålla flera Firebase-appar för iOS, Android, Web och Unity. Låt oss nu skapa en webbapp eftersom vi kommer att använda React för att skapa vår Firebase-inloggning.

Du kommer att bli ombedd att namnge den här appen och du kommer att få nycklarna som du behöver använda för att ansluta till Firebase. De kommer att se ut ungefär så här:

var firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "1234567890",
};

Vi kommer att använda dessa nycklar i vår React- app för att konfigurera en leverantör som tillåter oss att komma åt Firebase i vilken komponent som helst under leverantören.

Slutligen, gå till Autentisering i det vänstra sidofältet, fliken Inloggningsmetod och aktivera e- post-/lösenordsautentisering.

Du är redo!

Installera Firebase-beroenden

Firebase är tillgängligt för olika stackar, inklusive JavaScript och Node.js vilket är vad vi ska använda nu. Vi kommer bara att installera två beroenden med npm:

• firebase, som ger oss tillgång till saker som authbiblioteket, som vi kommer att använda för att utföra inloggningen och även skapa en ny användare
• reactfire, en samling användbara verktyg för att arbeta med Firebase i React. Vi använder dem useFirebaseAppför att ansluta till sammanhanget och komma åt Firebase

Låt oss installera dem med

npm i firebase reactfire

Strukturen för React- appen kommer att vara mycket enkel, enligt följande:

|-- index.js
|-- App.js
|-- FirebaseUser
    |-- index.js

och de kommer att vara relaterade enligt följande:

index.js --import--> ./App.js --import--> ./FirebaseUser

Konfigurera Firebase-leverantören

Låt oss skriva den första filen för Firebase-inloggning och registrering! Vi behöver faktiskt inte skriva det, eftersom detta bör läggas till i filen där du utfärdar ReactDOM.render(), i vårt fall blir det index.js:

import { FirebaseAppProvider } from 'reactfire';

const firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "925199572988",
    appId: "1:123456789:web:12a34b56c78d90e"
};

Detta importerar FirebaseAppProvideroch lägger till konfigurationsnycklarna du skickar till den. Du kan nu slå in rotkomponenten, som i vårt fall är Apphos leverantören:

ReactDOM.render(, document.getElementById('root')
);

Bra! Nu kommer alla komponenterna nedan att kunna komma åt Firebase!

Använd Firebase-inloggnings- och registreringskomponenten

Låt oss nu skriva Appkomponenten där vi ska importera och använda FirebaseUserkomponenten för att skapa och logga in en användare. Det finns inget riktigt Firebase – relaterat här. Vi kommer att implementera en inloggning och registrering med samma komponent så att du kan se hur vi kan återanvända koden, så i den här komponenten kommer vi att implementera ett par knappar som när de klickas, återger FirebaseUseri ett inloggningsläge eller en registreringsläge:

import React, { useState } from 'react';
import FirebaseUser from './FirebaseUser';

function App() {
  const [ signInOrUp, setSignInOrUp ] = useState( '' );
  return (Firebase login
      {
        signInOrUp?(): (<>
             setSignInOrUp( 'signin') } >Log in with existing user
             setSignInOrUp( 'signup') } >Create a new user) }

  );
}

export default App;

Konfigurera Firebase-inloggningen och registrera dig

Vi skapar en komponent för detta. Vi måste först importera några moduler:

import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';

Vi tar useStatenågra saker, från att veta om användaren är autentiserad till att ställa in fel. Vi kommer att använda useFirebaseAppkroken för att komma åt Firebase-anslutningen. Detta är bara möjligt eftersom vi konfigurerade Firebase-leverantören i föregående steg, och den är endast tillgänglig under hierarkin där den lades till. Slutligen kommer vi att importera authbiblioteket så att vi kan anropa Firebase-metoderna för att skapa användare och logga in. Detta är ett effektivt sätt eftersom vi bara laddar det här biblioteket, och inte andra som firestoreför NoSQL-databasen eller messagingför meddelanden och aviseringar.

Därefter lägger vi till en snabbkrok för att hantera våra inmatningsfält:

const useField =() => {
    const [ value, setValue ] = useState( '' );
    return { value, onChange: x => setValue( 'string' === typeof x? x: x.target.value) };
};

Och slutligen hela komponenten, som vi kommer att dela upp nedan för att peka på de mest intressanta delarna, de som är relaterade till Firebase-inloggningen och registreringen.

function FirebaseUser ({ action = 'signin' }) {
    const email = useField();
    const password = useField();
    const [ auth, setAuth ] = useState( null );
    const [ error, setError ] = useState( '' );
    const firebase = useFirebaseApp();
    const setReceivedData = data => setAuth( data );
    const setReceivedError = error => setError( error.message );

    const signIn = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
    };

    const signUp = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .createUserWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
    };

    const manage = 'signin' === action? {
            success: `Logged in as ${ auth?.user.email ?? '' }`,
            method: signIn,
            label: 'Sign In'
        }: {
            success: `Signed up as ${ auth?.user.email ?? '' }`,
            method: signUp,
            label: 'Sign Up'
        };

    return ({
                auth? ({ manage.success }
                ): (<>

                            { manage.label }
                            {
                                error && { error }
                            }) }

    );
}

export default FirebaseUser;

Först kopplar vi till Firebase-instansen:

const firebase = useFirebaseApp();

Som nämnts tidigare är detta möjligt eftersom vi tidigare slog in Appkomponenten med Firebase-leverantören. Nu när vi är anslutna till Firebase kan vi använda authfunktionen och anropa signInWithEmailAndPassword:

const signIn = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
};

När det lyckas kommer det att ställa in de returnerade data och formulärfälten kommer att ersättas med

Logged in as ${ auth?.user.email ?? '' }

Den data som returneras är ett stort objekt med mycket intressanta egenskaper så det är värt att lägga till en console.log()i vår setReceivedData()funktion för att se vad mer den innehåller.

Processen för att skapa en användare är liknande, förutom att vi använder funktionen createUserWithEmailAndPassword().

Slutsats

För att testa vår Firebase-inloggning och registrera dig kan du testa att logga in för en användare som inte finns så att du kan se felen. Därefter skapar du en användare och loggar sedan in som användare.

Demo av Firebase-inloggningen och registrera dig.
Kul fakta: Chrome klagar över att lösenordet 123456 som jag använder för testning är äventyrat, vilket är sant.

Om du nu går tillbaka till Firebase-appen > Autentisering > Användare ser du den nya användaren (du kan behöva använda uppdateringsknappen bredvid Lägg till användare).

För att sammanfatta är de väsentliga stegen för att integrera Firebase i vår React-app:

• ställ in Firebase-leverantören och slå in rotkomponenten (eller roten i hierarkin där du vill använda den)
• koppla till Firebase-leverantören med hjälp avuseFirebaseApp
• använd autentiseringsfunktionerna!

Kontrollera GitHub-förrådet på https://github.com/eliorivero/firebase-login-sign-up. Den enda skillnaden med den här är att jag laddar nycklarna för att konfigurera Firebase från en .env-fil för att undvika att exponera dem offentligt.

Om du har några frågor, låt mig veta i kommentarerna nedan!