Guida definitiva all’autenticazione di React Firebase

L’autenticazione è una delle misure di sicurezza più importanti di ogni applicazione.

In questo articolo parleremo dell’autenticazione, dei tipi di autenticazione, confronteremo l’autenticazione con l’autorizzazione e dimostreremo come integrare Firebase Authentication e Back4app Authentication con un’applicazione React.

Che cos’è l’autenticazione?

L’autenticazione è il processo che consente di verificare se qualcuno o qualcosa è ciò che dichiara di essere. Quasi tutte le applicazioni utilizzano una forma di autenticazione per garantire l’accesso a un’applicazione o ai suoi dati.

La forma più semplice di autenticazione è quella basata sulla password. Questo sistema di autenticazione inizia con l’inserimento del nome utente e della password da parte dell’utente. Dopo aver inserito le credenziali, il backend le confronta con i record del database e concede l’accesso al sistema se le credenziali sono corrette. L’accesso viene solitamente concesso sotto forma di token di sessione.

Un moderno sistema di autenticazione ha un aspetto simile a questo:

Autenticazione vs. Autorizzazione

L’autenticazione è il processo di verifica dell’identità di un utente, mentre l’autorizzazione è il processo di verifica dell’accesso a un utente.

Ad esempio, quando si accede a un sistema bancario online, il sistema esegue innanzitutto l’autenticazione verificando le credenziali di accesso. Dopo l’autenticazione, il sistema determina quali azioni siete autorizzati a compiere in base ai privilegi del vostro conto, ad esempio se siete autorizzati a trasferire denaro o a visualizzare gli estratti conto.

Tipi di autenticazione

I tipi di autenticazione più comuni sono:

• L‘autenticazione basata su password è il tipo di autenticazione più comune. Consente all’utente di fornire il proprio nome utente e la propria password per accedere a un sistema o a una risorsa.

• Il single sign-on (SSO) consente a un utente di accedere a più siti web e servizi utilizzando un unico set di credenziali. Un esempio è rappresentato dagli account Google. Creando un account Google si accede a Gmail, YouTube, AdSense, Firebase e così via.

• L‘autenticazione sociale è una forma di single sign-on che utilizza le informazioni esistenti di un servizio di social network come Google, Facebook o Twitter per creare un account.

• L’autenticazione basata su token consente agli utenti di inserire le proprie credenziali una sola volta e di ricevere in cambio una stringa crittografata unica di caratteri casuali.

• L‘autenticazione biometrica si basa sulle caratteristiche biologiche uniche di un individuo. I tipi di autenticazione biometrica includono il riconoscimento facciale, gli scanner di impronte digitali, il riconoscimento dell’altoparlante e gli scanner dell’iride.

• L’autenticazione basata su certificati utilizza certificati digitali per verificare l’identità di una persona, di un’organizzazione o di un dispositivo per stabilire una connessione sicura per lo scambio di informazioni su Internet.

Come impostare l’autenticazione?

In questa parte del tutorial costruiremo prima un’applicazione di autenticazione React fittizia e poi vedremo come integrarla con Firebase Authentication e Back4app (Parse) Authentication.

Utilizzeremo i seguenti strumenti:

• React v18
• Router React v6.5
• Material UI v5.11
• Firebase v9

Prerequisiti:

• Esperienza con JavaScript ES6
• Una discreta conoscenza di React (JSX, Hooks)
• L’esperienza con React Router e Material UI è un plus.

Prima di immergerci nel codice, analizziamo le differenze tra i sistemi di autenticazione.

Autenticazione Firebase vs Autenticazione Back4app

Sia Firebase che Back4app forniscono ottimi sistemi di autenticazione degli utenti per applicazioni mobili e web. Sono entrambi facili da usare e sono dotati di numerose funzionalità, come il social login, il sistema di verifica via e-mail, il sistema di reimpostazione della password e così via.

La differenza principale è che Back4app è costruito su software open-source, mentre Firebase utilizza il software proprietario di Google. Inoltre, Back4app tende a essere più economico di Firebase.

Vi suggerisco di provare entrambi i sistemi di autenticazione e di decidere quale vi piace di più.

Se desiderate approfondire le differenze tra Back4app e Firebase, date un’occhiata a Back4app vs Firebase.

Impostazione del progetto

Abbiamo finito con la teoria. È ora di iniziare a codificare!

Creare un’applicazione React

Iniziamo creando una nuova applicazione React.

I passaggi seguenti richiedono l’installazione di Node.js. Se non lo avete ancora installato, scaricatelo dal sito ufficiale.

Il modo più semplice per creare un’applicazione React è tramite Create React App:

$ npx create-react-app react-firebase-auth
$ cd react-firebase-auth

Questo creerà una nuova applicazione React chiamata react-firebase-auth e cambierà la directory di lavoro.

Quindi, avviare il progetto:

$ npm start

Infine, aprite http://localhost:3000/ per vedere la vostra web app.

Material UI

Per semplificare il processo di costruzione dell’interfaccia utente, utilizzeremo Material UI, una libreria di componenti React open-source che implementa il Material Design di Google. La libreria di componenti include una raccolta completa di componenti precostituiti che funzionano immediatamente.

Sentitevi liberi di sostituire Material UI con un framework UI diverso, come React Bootstrap o Ant Design.

Per aggiungere Material UI al progetto, eseguire:

$ npm install @mui/material @emotion/react @emotion/styled

Material UI utilizza il font Roboto per impostazione predefinita. Installiamolo con:

$ npm install @fontsource/roboto

Quindi, spostarsi in index.js e aggiungere le seguenti importazioni:

// src/index.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Router React

La nostra applicazione web avrà i seguenti endpoint:

1. /login — visualizza il modulo di login che consente all’utente di accedere.
2. /register — visualizza il modulo di iscrizione che consente all’utente di registrarsi.
3. /user — visualizza le informazioni sull’utente(e-mail, accessToken, ecc.).

Poiché stiamo costruendo un’applicazione a pagina singola (SPA), abbiamo bisogno di un modo per implementare il routing lato client. Il modo più semplice per farlo con React è usare react-router-dom.

$ npm install react-router-dom

Quindi, creare una cartella denominata routes all’interno di src per tutti i componenti della vista. Aggiungere quindi i tre file seguenti:

// src/routes/login.jsx

export default function Login() {
  return (
    <h1>Login</h1>
  )
}

// src/routes/register.jsx

export default function Register() {
  return (
    <h1>Register</h1>
  )
}

// src/routes/user.jsx

export default function User() {
  return (
    <h1>User</h1>
  )
}

Creare un BrowserRouter e registrarlo in index.js in questo modo:

// src/index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="login"/>,
  },
  {
    path: "/login",
    element: <Login/>,
  },
  {
    path: "/register",
    element: <Register/>,
  },
  {
    path: "/user",
    element: <User/>,
  },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

Non dimenticate di aggiungere tutte le importazioni richieste all’inizio del file:

import {createBrowserRouter, Navigate, RouterProvider} from "react-router-dom";
import Login from "./routes/login";
import Register from "./routes/register";
import User from "./routes/user";

Per occuparsi dell’errore “Not Found (404)”, creare un nuovo componente all’interno della cartella src, chiamato error-page.jsx, con i seguenti contenuti:

// src/error-page.jsx

import {useRouteError} from "react-router-dom";
import {Container, Typography} from "@mui/material";

export default function ErrorPage() {

  const error = useRouteError();
  console.error(error);

  return (
    <Container maxWidth="xs" sx={{mt: 2}}>
      <Typography variant="h5" component="h1" gutterBottom>
        Oops!
      </Typography>
      <Typography variant="p" component="p" gutterBottom>
        Sorry, an unexpected error has occurred.
      </Typography>
      <Typography variant="p" component="p" gutterBottom>
        <i>{error.statusText || error.message}</i>
      </Typography>
    </Container>
  );
}

Quindi navigare in index.jsx e aggiungere errorElement alla rotta index in questo modo:

// src/index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="login"/>,
    errorElement: <ErrorPage/>,  // new
  },
  // ...
]);

Anche in questo caso, assicurarsi di aggiungere l’importazione richiesta:

import ErrorPage from "./error-page";

A questo punto la struttura della cartella dovrebbe essere simile a questa:

react-firebase-auth
├── README.md
├── package.json
├── package-lock.json
├── public
│   └── <public files>
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── error-page.jsx
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── routes
    │   ├── login.jsx
    │   ├── register.jsx
    │   └── user.jsx
    └── setupTests.js

Avviamo l’applicazione e verifichiamo se tutto funziona. Eseguire:

$ npm start

Aprite il vostro browser web preferito e visitate http://localhost:3000/. Questo dovrebbe reindirizzarvi alla schermata di accesso. Successivamente, navigare su http://localhost:3000/register e visualizzare la schermata di registrazione.

Forma

Una delle ultime cose da fare è implementare il modulo di login e di registrazione.

Per farlo, spostarsi nella cartella dei percorsi e modificare login.jsx in questo modo:

// src/routes/login.jsx

import {Alert, Box, Button, Container, Link, TextField, Typography} from "@mui/material";
import {useNavigate} from "react-router-dom";
import {useState} from "react";

export default function Login() {

  const navigate = useNavigate();

  const [error, setError] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = async (event) => {
    event.preventDefault();

    // validate the inputs
    if (!email || !password) {
      setError("Please enter your username and password.");
      return;
    }

    // clear the errors
    setError("");

    // TODO: send the login request
    console.log("Logging in...");
  }

  return (
    <Container maxWidth="xs" sx={{mt: 2}}>
      <Typography variant="h5" component="h1" gutterBottom textAlign="center">
        Login
      </Typography>
      {error && <Alert severity="error" sx={{my: 2}}>{error}</Alert>}
      <Box component="form" onSubmit={onSubmit}>
        <TextField
          label="Email"
          variant="outlined"
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          sx={{mt: 1}}
          fullWidth
        />
        <TextField
          label="Password"
          variant="outlined"
          type="password"
          autoComplete="new-password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          sx={{mt: 3}}
          fullWidth
        />
        <Button variant="contained" type="submit" sx={{mt: 3}} fullWidth>Login</Button>
        <Box sx={{mt: 2}}>
          Don't have an account yet? <Link href="/register">Register</Link>
        </Box>
      </Box>
    </Container>
  )
}

1. Abbiamo usato i componenti di Material UI per costruire il layout, compreso il modulo.
2. Lo stato(email e password) è gestito tramite l’hook useState() di React.
3. L’invio del modulo chiama onSubmit(), che convalida i dati e visualizza gli eventuali errori.

Quindi, prendere il codice sorgente da GitHub e sostituire il contenuto delle altre due rotte:

• src/routes/register.jsx
• src/routes/user.jsx

Eseguire nuovamente il server e navigare nella propria applicazione web. Le viste dovrebbero apparire come queste:

Pulire

Rimuovere i seguenti file creati da Create React App e non più necessari:

• src/App.css
• src/App.js
• src/App.test.js
• src/logo.svg

Assicurarsi di rimuovere qualsiasi potenziale importazione da file come index.js e così via.

Bene, la nostra web app di autenticazione fittizia è terminata. Nelle prossime sezioni, la aggiorneremo aggiungendo Firebase Authentication e Back4app Authentication.

Prendete il codice sorgente per questa parte dell’articolo dal repo back4app-react-firebase-auth.

Autenticazione React Firebase

In questa sezione del tutorial vedremo come integrare l’autenticazione di Firebase in un progetto React. Come punto di partenza, utilizzeremo l’applicazione React creata nella sezione “Impostazione del progetto”.

Verificate la vostra comprensione lavorando con un vostro progetto React mentre seguite il tutorial.

Creare un progetto e un’applicazione

I passaggi seguenti richiedono un account Firebase. Se non ne avete ancora uno, registratevi con il vostro account Google.

Per lavorare con Firebase è necessario creare un progetto. Per creare un progetto, accedere alla console di Firebase e fare clic su “Crea un progetto”:

Dare un nome personalizzato, io chiamerò il mio react-firebase-auth.

Accettare tutti i termini e le condizioni e premere “Continua”.

Firebase impiegherà qualche istante per preparare tutto ciò che è necessario per il progetto. Una volta terminato, verrete reindirizzati alla dashboard del progetto Firebase.

Quindi, creare una nuova applicazione Firebase. Selezionare “Web”, poiché stiamo usando React come frontend:

Dategli un nome personalizzato o riutilizzate il nome del vostro progetto. Non è necessario abilitare Firebase Hosting, poiché non lo utilizzeremo.

Quindi, fare clic su “Registra app”:

Quindi selezionare “npm” e prendere nota della configurazione dell’SDK Firebase. Infine, fare clic sul pulsante “Continua alla console”:

Abilita l’autenticazione

Prima di immergerci nel codice, dobbiamo abilitare l’autenticazione.

Sul lato sinistro della console Firebase, selezionare “Build” e poi “Authentication”. Una volta reindirizzati, fare clic su “Inizia”:

Firebase offre diversi metodi di accesso. In questa guida dimostreremo come utilizzare l’autenticazione tramite e-mail e password, in modo che sia l’unico metodo da abilitare:

SDK Firebase

Per utilizzare Firebase nel vostro progetto React dovete prima installare il suo Software Developer Kit (SDK).

Installarlo tramite npm:

$ npm install firebase

Quindi, creare un nuovo file all’interno della cartella src chiamato firebase.js con i seguenti contenuti:

// src/firebase.js

import { initializeApp } from "firebase/app";
import {createUserWithEmailAndPassword, signInWithEmailAndPassword, getAuth} from "firebase/auth";

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyC4m7VHfM8hy_VUUAlpFCSK3AfrRX4bkQ0",
  authDomain: "react-firebase-auth-d4e6b.firebaseapp.com",
  projectId: "react-firebase-auth-d4e6b",
  storageBucket: "react-firebase-auth-d4e6b.appspot.com",
  messagingSenderId: "1084832623816",
  appId: "1:1084832623816:web:a526bb5b9beff5e26e89fd",
  measurementId: "G-1DXS0RGXPT"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Assicurarsi di sostituire firebaseConfig con la configurazione del passo precedente.

Firebase SDK offre diversi metodi di autenticazione come:

1. createUserWithEmailAndPassword(email: string, password: string)
2. signInWithEmailAndPassword(email: stringa, password: stringa)

Per utilizzare questi metodi, creiamo due funzioni wrapper in fondo al file firebase.js:

// firebase.js

// ...

export const createUser = async (email, password) => {
  return createUserWithEmailAndPassword(getAuth(app), email, password);
}

export const signInUser = async (email, password) => {
  return signInWithEmailAndPassword(getAuth(app), email, password);
}

Non dimenticate di aggiungere l’importazione:

import {createUserWithEmailAndPassword, signInWithEmailAndPassword, getAuth} from "firebase/auth";

Le funzioni si spiegano da sole:

1. createUser crea un utente Firebase (e restituisce una risposta contenente le informazioni sull’utente)
2. signInUser consente di accedere a un utente Firebase esistente (e restituisce una risposta contenente le informazioni sull’utente).

Persistenza della sessione

Firebase non si occupa della persistenza delle sessioni sui dispositivi dei clienti come fa Parse.

Per questo motivo, dobbiamo utilizzare Window.sessionStorage. Quando l’utente si logga, dobbiamo memorizzare il suo accessToken e recuperarlo ogni volta che vogliamo fare una richiesta autenticata.

Per rendere le cose un po’ più semplici, creeremo una classe di aiuto.

All’interno della cartella src, creare un nuovo file chiamato session.js con i seguenti contenuti:

// src/storage/session.js

export const startSession = (user) => {
  sessionStorage.setItem("email", user.email);
  sessionStorage.setItem("accessToken", user.accessToken);
}

export const getSession = () => {
  return {
    email: sessionStorage.getItem("email"),
    accessToken: sessionStorage.getItem("accessToken"),
  }
}

export const endSession = () => {
  sessionStorage.clear();
}

export const isLoggedIn = () => {
  return getSession().accessToken;
}

Visualizzazioni

L’ultima cosa da fare è modificare le nostre viste per utilizzare le funzioni che abbiamo creato e impostare la sessione tramite le funzioni helper in session.js.

Aprire login.jsx e modificare il TODO onSubmit() in questo modo:

// src/routes/login.jsx

import {signInUser} from "../firebase";
import {startSession} from "../session";

const onSubmit = async (event) => {

  // ...

  try {
    let loginResponse = await signInUser(email, password);
    startSession(loginResponse.user);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Questo codice registra l’utente e naviga verso /user oppure visualizza un errore.

Quindi, modificare register.jsx onSubmit() TODO in questo modo:

// src/routes/register.jsx

import {createUser} from "../firebase";
import {startSession} from "../session";

const onSubmit = async (event) => {

  // ...

  try {
    let registerResponse = await createUser(email, password);
    startSession(registerResponse.user);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Questo codice crea un utente Firebase o visualizza un errore. I possibili errori includono:

1. Il nome utente è già stato preso.
2. La password non è abbastanza forte.

Infine, modificare user.jsx per utilizzare l’hook useEffect() per recuperare i dati dell’utente e far sì che onLogout() distrugga la sessione:

// src/routes/user.jsx

import {endSession, getSession, isLoggedIn} from "../session";

useEffect(() => {
  if (!isLoggedIn()) {
    navigate("/login");
  }

  let session = getSession();
  setEmail(session.email);

  console.log("Your access token is: " + session.accessToken);
}, [navigate]);

const onLogout = () => {
  endSession();
  navigate("/login");
}

Test

Testiamo l’applicazione web per vedere se tutto funziona.

Avviare il server di sviluppo con npm start, aprire il browser web preferito e navigare su http://localhost:3000/register. Inserire il proprio indirizzo e-mail, scegliere una password e fare clic su “Register”:

Quando ci si registra, si viene reindirizzati a /user, dove si possono vedere le informazioni sul proprio account.

Per vedere il proprio accessToken, aprire la console per sviluppatori del browser:

Your access token is: 819423a698f9ea9ba3577f20993cb0da98a79ea22ce5d6550b65b69fb36fd438

Infine, si può accedere alla dashboard del progetto Firebase per verificare se è stato creato un nuovo utente:

Il codice sorgente finale di questo approccio si trova nel repo back4app-react-firebase-auth.

Autenticazione React Back4app

In questa sezione del tutorial, vedremo come integrare l’autenticazione di Back4app in un progetto React. Come punto di partenza, prenderemo l’applicazione React creata nella sezione “Impostazione del progetto”.

Verificate la vostra comprensione lavorando con un vostro progetto React mentre seguite il tutorial.

Creare un’applicazione

Per eseguire i passaggi seguenti è necessario disporre di un account Back4app. Se lo avete già , accedete, altrimenti procedete con la registrazione dell’account gratuito.

Per lavorare con Back4app è necessario creare un’app. Quando si accede alla dashboard, viene visualizzato l’elenco delle app. Fare clic su “Crea una nuova app” per creare una nuova app.

Assegnategli un nome personalizzato, scegliete il vostro database e fate clic su “Continua”.

Back4app impiegherà alcuni istanti per preparare tutto ciò che è necessario per la vostra applicazione, come il database, il livello applicativo, la scalabilità, i backup e la sicurezza.

Una volta che l’applicazione è pronta, si verrà reindirizzati alla dashboard dell’applicazione.

Chiavi dell’applicazione

Per collegare il progetto React a Back4app è necessario ottenere le chiavi dell’app. Per ottenere le chiavi dell’applicazione, selezionare “Impostazioni dell’applicazione” nella barra laterale e poi “Sicurezza e chiavi”.

Prendere nota dell'”ID applicazione” e della “chiave JavaScript”.

SDK Parse

Come forse già sapete, Back4app si basa su Parse. Parse è un framework open-source per la creazione di backend di applicazioni. Aiuta gli sviluppatori ad accelerare lo sviluppo delle applicazioni e a ridurre l’impegno totale richiesto per la realizzazione di un’applicazione.

Per saperne di più su Parse, date un’occhiata a Cos’è Parse?

Per impostare l’autenticazione di Back4app è necessario installare l’SDK Parse. Installarlo tramite npm:

$ npm install parse

Quindi, creare un nuovo file chiamato parse.js nella cartella src con i seguenti contenuti:

// src/parse.js

import Parse from "parse/dist/parse";

// Initialize Parse
const PARSE_APPLICATION_ID = '<your_parse_application_id>';
const PARSE_HOST_URL = 'https://parseapi.back4app.com/';
const PARSE_JAVASCRIPT_KEY = '<your_parse_javascript_key>';
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

Assicurarsi di sostituire PARSE_APPLICATION_ID e PARSE_JAVASCRIPT_KEY con le chiavi del passo precedente.

Parse fornisce una classe specializzata, chiamata Parse.User, che gestisce automaticamente gran parte delle funzionalità richieste per la gestione degli account utente. Parse.User è una sottoclasse di ParseObject che fornisce metodi di aiuto aggiuntivi come signUp(), current(), getUsername() e così via.

Inoltre, Parse SDK si occupa della gestione delle sessioni di memorizzazione locale. Ad esempio, Parse.User.logIn() memorizza le informazioni dell’utente nel localStorage e Parse.User.signOut() cancella il local storage.

Aggiungiamo alcune funzioni wrapper per semplificare ulteriormente il lavoro con il sistema di autenticazione di Parse.

Aggiungere quanto segue in fondo a parse.js:

// src/parse.js

// ...

export const doUserRegistration = async (username, password) => {
  return Parse.User.signUp(username, password);
};

export const doUserLogIn = async (username, password) => {
  return Parse.User.logIn(username, password);
};

export const isLoggedIn = async () => {
  return Parse.User.current() != null;
}

export const getUser = async () => {
  return Parse.User.current();
}

export const logOut = async () => {
  return Parse.User.logOut();
}

1. doUserRegistration() crea un utente Parse (utilizzando un’email e una password)
2. doUserLogIn() tenta di registrare l’utente con le credenziali fornite.
3. isLoggedIn() controlla se localStorage contiene informazioni sulla sessione
4. getUser() restituisce l’utente connesso da localStorage
5. logOut() cancella il localStorage e quindi l’utente viene disconnesso.

Tutte le funzioni sono asincrone e restituiscono promesse.

Visualizzazioni

Utilizziamo le funzioni create nel passo precedente.

Aprire login.jsx e modificare il TODO onSubmit() in questo modo:

// src/routes/login.jsx

import {doUserLogIn} from "../parse";

const onSubmit = async (event) => {

  // ...

  try {
    let user = await doUserLogIn(email, password);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Questo codice registra l’utente e naviga verso /user oppure visualizza un errore.

Quindi, modificare register.jsx onSubmit() TODO in questo modo:

// src/routes/register.jsx

import {doUserRegistration} from "../parse";

const onSubmit = async (event) => {

  // ...

  let username = email.split("@")[0];
  try {
    let user = await doUserRegistration(username, password);
    user.setEmail(email).save();
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Tenete presente che, poiché stiamo usando un modulo di registrazione con e-mail e password, dobbiamo estrarre il nome utente dall’e-mail. Il nome utente è la parte prima di @.

Una soluzione migliore sarebbe quella di creare un modulo di registrazione con nome utente e password.

Questo codice crea un utente Parse o visualizza un errore. I possibili errori includono:

1. Il nome utente è già stato preso.
2. La password non è abbastanza forte.

Infine, modificare user.jsx per utilizzare l’hook useEffect() per recuperare i dati dell’utente e fare in modo che onLogout() richiami la funzione di logout:

// src/routes/user.jsx

import {getUser, isLoggedIn, logOut} from "../parse";

useEffect(() => {
  (async () => {
    let loggedIn = await isLoggedIn();
    if (!loggedIn) {
      navigate("/login");
    }

    let user = await getUser();
    setEmail(user.getEmail());

    console.log("Your session token is: " + user.getSessionToken());
  })();
}, [navigate]);

const onLogout = async () => {
  await logOut();
  navigate("/login");
}

Ottimo, è tutto!

Test

Assicuriamoci che il nostro sistema di autenticazione funzioni come previsto.

Avviare il server di sviluppo con npm start, aprire il browser web preferito e navigare su http://localhost:3000/register. Inserire il proprio indirizzo e-mail, scegliere una password e fare clic su “Register”:

Quando ci si registra, si viene reindirizzati a /user, dove si possono vedere le informazioni sul proprio account.

Per vedere il sessionToken, aprire la console per sviluppatori del browser:

Your session token is: r:90343c307e7bb088e60c348acd8090d1

Infine, accedere alla Dashboard dell’app Back4app e verificare che sia stato creato un utente:

Il codice sorgente finale di questo approccio si trova nel repo back4app-react-firebase-auth.

Conclusione

L’autenticazione e l’autorizzazione sono le misure di sicurezza più importanti delle applicazioni moderne. L’autenticazione è il processo di verifica dell’identità di un utente, mentre l’autorizzazione è il processo di verifica dell’accesso a un utente.

Sia Firebase che Back4app offrono ottimi sistemi di autenticazione degli utenti. Ognuno di essi ha i propri pro e contro, che devono essere presi in considerazione quando si avvia un progetto.

Ulteriori letture

• Parse la sicurezza dell’utente
• Autenticazione sociale tramite servizi di terze parti
  • Accesso a Google
  • Accesso a Facebook
• Verifica dell’e-mail
• Ripristino della password

FAQ