Come creare un accesso Firebase e registrarsi in React

Firebase è un sistema che offre agli sviluppatori molte piattaforme per creare app web. Uno degli elementi essenziali in un’app è creare utenti e consentire loro di accedere. Vediamo come possiamo scrivere un login Firebase che sia completo ma molto semplice da implementare.

Crea la tua app Firebase

Devi prima creare un progetto di app Firebase, quindi vai alla console Firebase e aggiungi un nuovo progetto. Aggiungerai l’app qui.

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

Verrà avviato un assistente che ti chiederà il nome del progetto.

La schermata successiva ti chiederà se desideri abilitare l’analisi. Disattivalo e fai clic sul pulsante Crea progetto. Ci vorrà del tempo per eseguire il provisioning del tuo progetto, dopodiché riceverai un pulsante per continuare che ti porterà alla panoramica del progetto.

Ora devi aggiungere un’app Firebase al progetto Firebase. Ha senso? Un progetto Firebase ti consente di contenere diverse app Firebase per iOS, Android, Web e Unity. Per ora, creiamo un’app Web poiché utilizzeremo React per creare il nostro login Firebase.

Ti verrà chiesto di nominare questa app e ti verranno fornite le chiavi che dovrai utilizzare per connetterti con Firebase. Sembreranno qualcosa del tipo:

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",
};

Utilizzeremo queste chiavi nella nostra app React per configurare un provider che ci consentirà di accedere a Firebase in qualsiasi componente del provider.

Infine, vai in Autenticazione nella barra laterale sinistra, nella scheda Metodo di accesso, e abilita l’ autenticazione tramite e -mail/password .

Sei a posto!

Installa le dipendenze di Firebase

Firebase è disponibile per diversi stack, inclusi JavaScript e Node.js, che è quello che useremo ora. Installeremo solo due dipendenze con npm:

• firebase, che ci consentirà di accedere a cose come la authlibreria, che utilizzeremo per eseguire l’accesso e anche per creare un nuovo utente
• reactfire, una raccolta di strumenti utili per lavorare con Firebase in React. Li useremo useFirebaseAppper connetterci al contesto e accedere a Firebase

Installiamoli con

npm i firebase reactfire

La struttura dell’app React sarà molto semplice, come segue:

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

e saranno correlati come segue:

Configura il provider Firebase

Scriviamo il primo file per l’accesso e la registrazione a Firebase! In realtà non abbiamo bisogno di scriverlo, perché questo dovrebbe essere aggiunto al file in cui stai emettendo ReactDOM.render(), nel nostro caso sarà 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"
};

Questo importa FirebaseAppProvidere aggiunge le chiavi di configurazione che gli passerai. Ora puoi avvolgere il componente root, che nel nostro caso è Appcon il provider:

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

Grande! Ora tutti i componenti seguenti potranno accedere a Firebase!

Utilizza il componente di accesso e registrazione di Firebase

Scriviamo ora il Appcomponente in cui importeremo e utilizzeremo il FirebaseUsercomponente per creare e accedere a un utente. Non c’è nulla di veramente correlato a Firebase qui. Implementeremo un accesso e una registrazione usando lo stesso componente in modo da poter vedere come possiamo riutilizzare il codice, quindi in questo componente implementeremo una coppia di pulsanti che, una volta cliccati, renderanno il FirebaseUserin una modalità di accesso o un modalità di iscrizione:

Configura l’accesso a Firebase e registrati

Creeremo un componente per questo. Per prima cosa dobbiamo importare alcuni moduli:

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

Per useStatealcune cose, dal sapere se l’utente è autenticato per impostare gli errori. Useremo l’ useFirebaseApphook per accedere alla connessione Firebase. Questo è possibile solo perché abbiamo configurato il provider Firebase nel passaggio precedente ed è disponibile solo nella gerarchia in cui è stato aggiunto. Infine, importeremo la authlibreria in modo da poter chiamare i metodi Firebase per creare utenti e accedere. Questo è un modo efficiente perché stiamo caricando solo questa libreria e non altre come firestoreper il database NoSQL o messagingper messaggi e notifiche.

Successivamente aggiungeremo un rapido hook per gestire i nostri campi di input:

E infine il componente completo, che analizzeremo di seguito per indicare le parti più interessanti, quelle relative al login e alla registrazione di Firebase.

Innanzitutto, ci colleghiamo all’istanza Firebase:

const firebase = useFirebaseApp();

Come accennato in precedenza, ciò è possibile perché in precedenza abbiamo eseguito il wrapping del Appcomponente con il provider Firebase. Ora che siamo collegati a Firebase, possiamo utilizzare la authfunzionalità e chiamare signInWithEmailAndPassword:

Quando ha esito positivo, imposterà i dati restituiti e i campi del modulo verranno sostituiti con

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

I dati restituiti sono un oggetto di grandi dimensioni con proprietà molto interessanti, quindi vale la pena aggiungere a console.log()alla nostra setReceivedData()funzione per vedere cos’altro include.

Il processo per creare un utente è simile, tranne per il fatto che utilizziamo la funzione createUserWithEmailAndPassword().

Conclusione

Per testare il nostro accesso a Firebase e registrarti, puoi provare ad accedere per un utente che non esiste in modo da poter vedere gli errori. Successivamente, crea un utente e quindi accedi come utente.

Demo dell’accesso a Firebase e registrati.
Curiosità: Chrome si lamenta che la password 123456 che sto usando per il test è compromessa, il che è vero.

Se ora torni all’app Firebase > Autenticazione > Utenti, vedrai il nuovo utente (potresti dover utilizzare il pulsante di aggiornamento accanto ad Aggiungi utente).

Per ricapitolare, i passaggi essenziali per integrare Firebase nella nostra app React sono:

• configura il provider Firebase e avvolgi il componente principale (o la radice della gerarchia in cui desideri utilizzarlo)
• agganciare al provider Firebase utilizzandouseFirebaseApp
• usa le funzioni di autenticazione!

Controlla il repository GitHub su https://github.com/eliorivero/firebase-login-sign-up. L’unica differenza con questo è che sto caricando le chiavi per configurare Firebase da un file .env per evitare di esporle pubblicamente.

Se hai domande, fammi sapere nei commenti qui sotto!