Guide ultime de l’authentification React Firebase

L’authentification est l’une des mesures de sécurité les plus importantes de toute application.

Dans cet article, nous parlerons de l’authentification, des types d’authentification, nous comparerons l’authentification à l’autorisation et nous montrerons comment intégrer Firebase Authentication et Back4app Authentication à une application React.

Qu’est-ce que l’authentification ?

L’authentification est le processus qui consiste à vérifier si quelqu’un ou quelque chose est bien ce qu’il prétend être. Presque toutes les applications utilisent une forme d’authentification pour sécuriser l’accès à une application ou à ses données.

La forme la plus simple d’authentification est l’authentification par mot de passe. Ce système d’authentification commence par la saisie par l’utilisateur de son nom d’utilisateur et de son mot de passe. Une fois que l’utilisateur a saisi ses informations d’identification, le backend les compare aux enregistrements de la base de données et lui accorde l’accès au système si les informations d’identification sont correctes. L’accès est généralement accordé sous la forme de jetons de session.

Un système d’authentification moderne ressemble à ceci :

Authentification et autorisation

L’authentification est le processus de vérification de l’identité d’un utilisateur, tandis que l’autorisation est le processus de vérification de l’accès d’un utilisateur.

Par exemple, lorsque vous vous connectez à un système de banque en ligne, le système commence par vous authentifier en vérifiant vos identifiants de connexion. Une fois que vous avez été authentifié, le système détermine les actions que vous êtes autorisé à entreprendre en fonction des privilèges de votre compte, par exemple si vous êtes autorisé à transférer de l’argent ou à consulter vos relevés de compte.

Types d’authentification

Les types d’authentification les plus courants sont les suivants :

• L’authentification par mot de passe est le type d’authentification le plus courant. Elle implique qu’un utilisateur fournisse son nom d’utilisateur et son mot de passe pour accéder à un système ou à une ressource.

• L’authentification unique (SSO) permet à un utilisateur de se connecter à plusieurs sites web et services à l’aide d’un seul ensemble d’informations d’identification. Les comptes Google en sont un exemple. En créant un compte Google, vous avez accès à Gmail, YouTube, AdSense, Firebase, etc.

• L’authentification sociale est une forme d’authentification unique qui utilise les informations existantes d’un service de réseau social tel que Google, Facebook ou Twitter pour créer un compte.

• L’authentification par jeton permet aux utilisateurs de saisir une seule fois leurs informations d’identification et de recevoir en échange une chaîne cryptée unique de caractères aléatoires.

• L’authentification biométrique repose sur les caractéristiques biologiques uniques d’un individu. Les types d’authentification biométrique comprennent la reconnaissance faciale, les scanners d’empreintes digitales, la reconnaissance du locuteur et les scanners d’iris.

• L’authentification par certificat utilise des certificats numériques pour vérifier l’identité d’une personne, d’une organisation ou d’un appareil afin d’établir une connexion sécurisée pour l’échange d’informations sur l’internet.

Comment configurer l’authentification ?

Dans cette partie du tutoriel, nous allons d’abord construire une application d’authentification React factice, puis nous verrons comment l’intégrer avec Firebase Authentication et Back4app (Parse) Authentication.

Nous allons utiliser les outils suivants :

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

Prérequis :

• Expérience avec JavaScript ES6
• Une bonne compréhension de React (JSX, Hooks)
• Une expérience avec React Router et Material UI est un plus.

Avant de plonger dans le code, examinons les différences entre les systèmes d’authentification.

Authentification Firebase vs Authentification Back4app

Firebase et Back4app fournissent tous deux d’excellents systèmes d’authentification des utilisateurs pour les applications mobiles et web. Ils sont tous deux faciles à utiliser et proposent un grand nombre de fonctionnalités telles que le login social, le système de vérification par email, le système de réinitialisation du mot de passe, etc.

La plus grande différence entre eux est que Back4app est construit sur un logiciel libre tandis que Firebase utilise le logiciel propriétaire de Google. De plus, Back4app a tendance à être moins cher que Firebase.

Je vous suggère d’essayer les deux systèmes d’authentification et de décider ensuite lequel vous préférez.

Si vous souhaitez explorer les différences entre Back4app et Firebase, jetez un coup d’œil à Back4app vs Firebase.

Configuration du projet

Nous en avons fini avec la théorie. Il est temps de commencer à coder !

Créer une application React

Commençons par créer une nouvelle application React.

Les étapes suivantes nécessitent l’installation de Node.js. Si vous ne l’avez pas encore installé, téléchargez-le depuis leur site officiel.

La façon la plus simple de créer une application React est de passer par Create React App :

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

Cela créera une nouvelle application React nommée react-firebase-auth et changera votre répertoire de travail.

Ensuite, démarrez le projet :

$ npm start

Enfin, ouvrez http://localhost:3000/ pour voir votre application web.

Material UI

Pour simplifier le processus de construction de l’interface utilisateur, nous utiliserons Material UI – une bibliothèque de composants React open-source qui met en œuvre le Material Design de Google. La bibliothèque de composants comprend une collection complète de composants préconstruits qui fonctionnent prêts à l’emploi.

N’hésitez pas à remplacer Material UI par un autre framework d’interface utilisateur comme React Bootstrap ou Ant Design.

Pour ajouter Material UI à votre projet, exécutez :

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

Material UI utilise par défaut la police Roboto. Installons-la avec :

$ npm install @fontsource/roboto

Ensuite, naviguez vers index.js et ajoutez les importations suivantes :

// src/index.js

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

Routeur React

Notre application web aura les points d’extrémité suivants :

1. /login — affiche le formulaire de connexion qui permet à l’utilisateur de se connecter.
2. /register — affiche le formulaire d’inscription qui permet à l’utilisateur de s’enregistrer.
3. /user — affiche des informations sur l’utilisateur(email, accessToken, etc.).

Puisque nous construisons une application à page unique (SPA), nous avons besoin d’un moyen d’implémenter le routage côté client. La façon la plus simple de le faire avec React est d’utiliser react-router-dom.

$ npm install react-router-dom

Ensuite, créez un répertoire nommé routes dans src pour tous vos composants de vue. Ajoutez-y les trois fichiers suivants :

// 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>
  )
}

Créez un BrowserRouter et enregistrez-le dans index.js comme suit :

// 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>
);

N’oubliez pas d’ajouter toutes les importations nécessaires au début du fichier :

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

Pour traiter l’erreur “Not Found (404)”, créez un nouveau composant dans votre répertoire src nommé error-page.jsx avec le contenu suivant :

// 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>
  );
}

Ensuite, naviguez vers index.jsx et ajoutez errorElement à la route index comme suit :

// src/index.js

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

Là encore, veillez à ajouter l’importation requise :

import ErrorPage from "./error-page";

À ce stade, la structure de votre répertoire devrait ressembler à ceci :

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

Démarrons l’application et testons si tout fonctionne. Exécuter :

$ npm start

Ouvrez votre navigateur web préféré et allez sur http://localhost:3000/. Vous devriez être redirigé vers l’écran de connexion. Ensuite, naviguez vers http://localhost:3000/register et vous devriez voir l’écran d’enregistrement.

Formulaire

L’une des dernières choses à faire est d’implémenter le formulaire de connexion et d’enregistrement.

Pour ce faire, naviguez dans votre répertoire routes et modifiez login.jsx comme suit :

// 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. Nous avons utilisé les composants de Material UI pour construire la mise en page, y compris le formulaire.
2. L’état(email et mot de passe) est géré par le crochet React useState().
3. La soumission du formulaire fait appel à la fonction onSubmit() qui valide les données et affiche les erreurs éventuelles.

Ensuite, récupérez le code source sur GitHub et remplacez le contenu des deux autres routes :

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

Relancez le serveur et accédez à votre application web. Vos vues devraient ressembler à ceci :

Nettoyer

Supprimez les fichiers suivants qui ont été créés par Create React App et qui ne sont plus nécessaires :

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

Veillez à supprimer toute importation potentielle de fichiers tels que index.js, etc.

Bien, notre application web d’authentification factice est maintenant terminée. Dans les prochaines sections, nous allons l’améliorer en ajoutant Firebase Authentication et Back4app Authentication.

Téléchargez le code source de cette partie de l’article sur le repo de back4app-react-firebase-auth.

Authentification React Firebase

Dans cette section du tutoriel, nous allons voir comment intégrer l’authentification Firebase dans un projet React. Pour commencer, nous utiliserons l’application React que nous avons créée dans la section “Configuration du projet”.

Vérifiez votre compréhension en travaillant sur votre propre projet React tout en suivant le tutoriel.

Créer un projet et une application

Les étapes suivantes nécessitent que vous ayez un compte Firebase. Si vous n’en avez pas encore, inscrivez-vous avec votre compte Google.

Pour travailler avec Firebase, nous devons d’abord créer un projet. Pour créer un projet, connectez-vous à votre Firebase Console et cliquez sur “Créer un projet” :

Donnez-lui un nom personnalisé, je nommerai le mien react-firebase-auth.

Acceptez toutes les conditions et cliquez sur “Continuer”.

Firebase va prendre quelques instants pour préparer tout ce qui est nécessaire à votre projet. Une fois que c’est fait, vous serez redirigé vers le tableau de bord du projet Firebase.

Ensuite, créez une nouvelle application Firebase. Sélectionnez “Web” puisque nous utilisons React comme frontend :

Donnez-lui un nom personnalisé — ou réutilisez le nom de votre projet. Vous n’avez pas besoin d’activer Firebase Hosting puisque nous ne l’utiliserons pas.

Ensuite, cliquez sur “Enregistrer l’application” :

Sélectionnez ensuite “npm” et notez la configuration de votre Firebase SDK. Enfin, cliquez sur le bouton “Continue to the console” :

Activer l’authentification

Avant de plonger dans le code, nous devons activer l’authentification.

Sur le côté gauche de la console Firebase, sélectionnez “Build” puis “Authentication”. Une fois que vous êtes redirigé, cliquez sur “Get started” :

Firebase propose plusieurs méthodes de connexion. Dans ce tutoriel, nous allons montrer comment utiliser l’authentification par email et par mot de passe afin que ce soit la seule que vous ayez à activer :

SDK Firebase

Pour utiliser Firebase dans votre projet React, vous devez d’abord installer leur kit de développement logiciel (SDK).

Installez-le via npm :

$ npm install firebase

Ensuite, créez un nouveau fichier dans le dossier src nommé firebase.js avec le contenu suivant :

// 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);

Assurez-vous de remplacer firebaseConfig par votre configuration de l’étape précédente.

Firebase SDK propose différentes méthodes d’authentification comme :

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

Pour utiliser ces méthodes, nous allons créer deux fonctions enveloppantes au bas du fichier 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);
}

N’oubliez pas d’ajouter l’importation :

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

Les fonctions sont explicites :

1. createUser crée un utilisateur Firebase (et renvoie une réponse contenant des informations sur l’utilisateur)
2. signInUser permet de connecter un utilisateur Firebase existant (et renvoie une réponse contenant des informations sur l’utilisateur)

Persistance de la session

Firebase ne s’occupe pas de la persistance des sessions sur les appareils des clients comme le fait Parse.

Pour cette raison, nous devons utiliser Window.sessionStorage. Lorsque l’utilisateur se connecte, nous devons stocker son accessToken et le récupérer à chaque fois que nous voulons faire une requête authentifiée.

Pour faciliter les choses, nous allons créer une classe d’aide.

Dans le répertoire src, créez un nouveau fichier nommé session.js avec le contenu suivant :

// 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;
}

Points de vue

La dernière chose à faire est de modifier nos vues pour utiliser les fonctions que nous avons créées et de configurer la session via des fonctions d’aide dans session.js.

Ouvrez login.jsx et modifiez le TODO onSubmit() comme suit :

// 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);
  }
}

Ce code permet soit de connecter l’utilisateur et de naviguer vers /user, soit d’afficher une erreur.

Ensuite, modifiez register.jsx onSubmit() TODO comme suit :

// 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);
  }
}

Ce code crée un utilisateur Firebase ou affiche une erreur. Les erreurs possibles sont les suivantes :

1. Le nom d’utilisateur est déjà pris.
2. Le mot de passe n’est pas assez fort.

Enfin, modifiez user.jsx pour utiliser le hook useEffect() afin de récupérer les données de l’utilisateur et faire en sorte que onLogout() détruise la session :

// 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

Testons l’application web pour voir si tout fonctionne.

Démarrez le serveur de développement avec npm start, ouvrez votre navigateur web préféré, et naviguez vers http://localhost:3000/register. Saisissez votre adresse électronique, choisissez un mot de passe et cliquez sur “Register” :

Lorsque vous vous inscrivez, vous êtes redirigé vers /user où vous pouvez consulter les informations relatives à votre compte.

Pour voir votre accessToken, ouvrez la console de développement de votre navigateur :

Your access token is: 819423a698f9ea9ba3577f20993cb0da98a79ea22ce5d6550b65b69fb36fd438

Enfin, naviguez vers le tableau de bord de votre projet Firebase pour vérifier si un nouvel utilisateur a été créé :

Téléchargez le code source final pour cette approche depuis le repo back4app-react-firebase-auth.

React Back4app Authentification

Dans cette section du tutoriel, nous allons voir comment intégrer l’authentification Back4app dans un projet React. Comme point de départ, nous prendrons l’application React que nous avons créée dans la section “Configuration du projet”.

Vérifiez votre compréhension en travaillant sur votre propre projet React tout en suivant le tutoriel.

Créer une application

Les étapes suivantes nécessitent que vous ayez un compte Back4app. Si vous l’avez déjà, connectez-vous, sinon inscrivez-vous pour obtenir un compte gratuit.

Pour travailler avec Back4app, nous devons d’abord créer une application. Lorsque vous vous connectez à votre tableau de bord, vous verrez la liste de vos applications. Cliquez sur “Build a new app” pour créer une nouvelle application.

Donnez-lui un nom personnalisé, choisissez votre base de données et cliquez sur “Continuer”.

Back4app va prendre quelques instants pour préparer tout ce qui est nécessaire à votre application comme la base de données, la couche applicative, la mise à l’échelle, les sauvegardes et la sécurité.

Une fois que votre application est prête, vous serez redirigé vers le tableau de bord de votre application.

Clés d’application

Pour connecter votre projet React à Back4app, vous devez obtenir vos clés d’application. Pour obtenir vos clés d’application, sélectionnez “App Settings” dans la barre latérale, puis “Security & Keys”.

Prenez note de l'”ID de l’application” et de la “clé JavaScript”.

Parse SDK

Comme vous le savez peut-être déjà, Back4app est basé sur Parse. Parse est un framework open-source pour la construction de backends d’applications. Il permet aux développeurs d’accélérer le développement d’applications et de réduire l’effort total nécessaire à la création d’une application.

Pour en savoir plus sur Parse, consultez la page Qu’est-ce que Parse ?

Pour mettre en place l’authentification Back4app, nous devons d’abord installer le SDK Parse. Installez-le via npm :

$ npm install parse

Ensuite, créez un nouveau fichier nommé parse.js dans le dossier src avec le contenu suivant :

// 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;

Veillez à remplacer PARSE_APPLICATION_ID et PARSE_JAVASCRIPT_KEY par les clés de l’étape précédente.

Parse fournit une classe spécialisée appelée Parse.User qui gère automatiquement la plupart des fonctionnalités requises pour la gestion des comptes utilisateurs. Parse.User est une sous-classe de ParseObject qui fournit des méthodes d’aide supplémentaires telles que signUp(), current(), getUsername() et ainsi de suite.

En outre, le SDK Parse prend en charge la gestion des sessions de stockage local. Par exemple, Parse.User.logIn() stocke les informations de l’utilisateur dans le localStorage et Parse.User.signOut() efface le stockage local.

Ajoutons quelques fonctions d’enveloppe pour simplifier davantage le travail avec le système d’authentification de Parse.

Ajoutez ce qui suit au bas de 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() crée un utilisateur Parse (en utilisant un email et un mot de passe)
2. doUserLogIn() tente de connecter l’utilisateur avec les informations d’identification fournies
3. isLoggedIn() vérifie si localStorage contient des informations de session
4. getUser() renvoie l’utilisateur connecté à partir de localStorage
5. logOut() efface localStorage et déconnecte ainsi l’utilisateur

Toutes les fonctions sont asynchrones et renvoient des promesses.

Points de vue

Utilisons les fonctions que nous avons créées à l’étape précédente.

Ouvrez login.jsx et modifiez le TODO onSubmit() comme suit :

// 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);
  }
}

Ce code permet soit de connecter l’utilisateur et de naviguer vers /user, soit d’afficher une erreur.

Ensuite, modifiez register.jsx onSubmit() TODO comme suit :

// 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);
  }
}

Gardez à l’esprit qu’étant donné que nous utilisons un formulaire d’inscription par email/mot de passe, nous devons extraire le nom d’utilisateur de l’email. Le nom d’utilisateur est la partie qui précède @.

Une meilleure solution serait de créer un formulaire d’inscription avec nom d’utilisateur et mot de passe.

Ce code crée un utilisateur Parse ou affiche une erreur. Les erreurs possibles sont les suivantes :

1. Le nom d’utilisateur est déjà pris.
2. Le mot de passe n’est pas assez fort.

Enfin, modifiez user.jsx pour utiliser le hook useEffect() afin de récupérer les données de l’utilisateur et faites en sorte que onLogout() appelle la fonction de déconnexion :

// 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");
}

Super, c’est ça !

Test

Assurons-nous que notre système d’authentification fonctionne comme prévu.

Démarrez le serveur de développement avec npm start, ouvrez votre navigateur web préféré, et naviguez vers http://localhost:3000/register. Saisissez votre adresse électronique, choisissez un mot de passe et cliquez sur “Register” :

Lorsque vous vous inscrivez, vous êtes redirigé vers /user où vous pouvez consulter les informations relatives à votre compte.

Pour voir votre sessionToken, ouvrez la console de développement de votre navigateur :

Your session token is: r:90343c307e7bb088e60c348acd8090d1

Enfin, naviguez vers votre tableau de bord Back4app App et assurez-vous qu’un utilisateur a été créé :

Téléchargez le code source final pour cette approche depuis le repo back4app-react-firebase-auth.

Conclusion

L’authentification et l’autorisation sont les mesures de sécurité les plus importantes des applications modernes. L’authentification est le processus de vérification de l’identité d’un utilisateur, tandis que l’autorisation est le processus de vérification de l’accès d’un utilisateur.

Firebase et Back4app offrent tous deux d’excellents systèmes d’authentification des utilisateurs. Ils présentent chacun des avantages et des inconvénients qu’il convient de prendre en compte lors du lancement d’un projet.

Pour en savoir plus

• Parse de la sécurité de l’utilisateur
• Authentification sociale via des services tiers
  • Connexion Google
  • Connexion à Facebook
• Vérification de l’adresse électronique
• Réinitialisation du mot de passe

FAQ