Comment intégrer le service d’authentification Auth0 avec une application React

2023/01/31

Auth0 simplifie le processus d’établissement de l’identité de l’utilisateur dans votre application Web. Il fournit des fonctionnalités d’authentification et d’autorisation sécurisées et personnalisables via son API. Utilisez-le et vous n’aurez pas à vous soucier de créer votre propre système d’authentification à partir de zéro.

L’intégration avec Auth0 facilite l’inclusion d’une authentification fiable dans votre application React et garantit un accès sécurisé à votre application.

Les étapes suivantes expliquent ce qui est nécessaire pour intégrer Auth0 dans une application React.

Qu’est-ce qu’Auth0 ?

Auth0 est un service Web qui fournit une API sécurisée pour gérer l’authentification et l’autorisation des utilisateurs dans vos applications.

Il fournit un système d’authentification personnalisable que vous pouvez facilement intégrer à votre application React. Une fois que vous avez connecté Auth0 à votre application, il gère le reste de la charge de travail d’authentification.

Comment fonctionne Auth0 ?

Auth0 fournit une fonctionnalité de connexion universelle qui implémente le flux d’authentification. Chaque fois qu’un utilisateur souhaite se connecter, l’API le redirige vers une page de connexion Auth0, il est authentifié et les données de charge utile d’authentification réussie sont ensuite envoyées à votre application.

Vous pouvez personnaliser le workflow d’authentification pour votre application en définissant différentes méthodes de connexion. La connexion universelle fournit un nom d’utilisateur et un mot de passe comme authentification principale, mais vous pouvez également ajouter d’autres options telles que la connexion sociale, via un fournisseur comme Google, et l’authentification multifacteur.

L’avantage d’utiliser ce type d’authentification est que vous n’avez pas besoin de vous familiariser avec les protocoles d’identité comme OAuth 2.0 ou OpenID Connect, qui sont couramment utilisés pour créer des systèmes d’authentification sécurisés.

Créer un nouveau projet sur la console développeur Auth0

Pour commencer, vous devrez d’abord vous inscrire à un compte Auth0 . Après vous être inscrit, accédez à votre tableau de bord et cliquez sur Créer une application pour configurer les paramètres du projet d’authentification.

Auth0 fournit différentes configurations d’authentification en fonction du type d’application que vous construisez. Pour ce tutoriel, renseignez le nom de votre application, sélectionnez Single Page Web Applications , puis cliquez sur Save .

Auth0 Nouvelle fenêtre contextuelle des paramètres de l'application,

Ensuite, sélectionnez React dans la liste des technologies prises en charge par Auth0.

Une liste des technologies de développement Web prises en charge par Auth0

Configurer les URI de l’application

Après avoir créé votre application et configuré les paramètres requis, sur le tableau de bord de votre application, cliquez sur l’ onglet Paramètres pour configurer les propriétés URI requises.

Définissez les propriétés suivantes :

URL de rappel autorisées . L’URL que le serveur Auth0 appellera après l’authentification d’un utilisateur.
URL de déconnexion autorisées . L’URL vers laquelle Auth0 redirigera l’utilisateur lorsqu’il se déconnectera.
Origines Web autorisées . L’URL autorisée d’où peut provenir une demande d’autorisation.

Une fois que vous avez terminé de remplir les URL, continuez et cliquez sur Enregistrer les modifications en bas de la page des paramètres.

Dans le volet de menu gauche du tableau de bord de l’application Auth0, cliquez sur Authentification , puis sélectionnez Réseaux sociaux . Ensuite, cliquez sur le bouton Créer une connexion sur la page des paramètres de connexion sociale.

Auth0 nouvelle page des paramètres des fournisseurs de connexion sociale.

Enfin, sélectionnez et ajoutez votre fournisseur de connexion sociale préféré.

Une liste des fournisseurs de connexion sociale pris en charge par Auth0

Configurez Auth0 dans votre application React

Intégrez le service d’authentification Auth0 dans votre application React en créant les composants de connexion et de réussite.

1. Créer une application React et configurer un fichier ENV

Créez une application React, puis ouvrez le dossier du projet dans votre éditeur de code. Ensuite, dans le répertoire racine de votre dossier de projet, créez un fichier ENV pour contenir vos variables d’environnement : votre nom de domaine et votre ID client. Connectez-vous à votre compte Auth0, dans le tableau de bord de l’application, copiez le nom de domaine et l’ID client et enregistrez-les dans votre fichier ENV comme suit :

REACT_APP_AUTH0_DOMAIN= your domain name REACT_APP_AUTH0_CLIENT_ID= your client ID

2. Installez les packages requis

Exécutez cette commande sur votre terminal pour installer les dépendances requises :

npm install @auth0/auth0-react

3. Enveloppez le composant de votre application avec le fournisseur Auth0

Le fournisseur Auth0 utilise React Context. Cela vous permet d’accéder à toutes ses propriétés depuis le composant App. Le fournisseur Auth0 prend trois paramètres : le domaine client, l’ID client et l’URI de redirection.

Ouvrez le fichier index.js, supprimez le modèle de code React et ajoutez le code ci-dessous :

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import{Auth0Provider} from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render( <Auth0Provider domain = {process.env.REACT_APP_AUTH0_DOMAIN} clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID} redirectUri = {window.location.origin} > <App /> </Auth0Provider>, document.getElementById('root') );

Créez un nouveau dossier dans le répertoire /src de votre application React et nommez-le pages. Dans ce dossier, créez deux fichiers : Login.js et Success.js.

Ouvrez le fichier login.js et ajoutez le code ci-dessous. Le composant de la page de connexion affichera un bouton de connexion.

import React from 'react' import { useAuth0 } from '@auth0/auth0-react';

const Login = () => { const { loginWithRedirect, isAuthenticated } = useAuth0();


    return (isAuthenticated || (
      <button onClick={() => loginWithRedirect()}> Log In</button>
    ))
}

export default Login

Par défaut, Auth0 fournit un e-mail et un mot de passe comme méthode d’authentification. De plus, selon les fournisseurs de connexion sociale que vous avez sélectionnés, Auth0 affichera également l’option de connexion du fournisseur.

5. Créer un composant de page de réussite

Ce composant affichera deux fonctionnalités principales : un profil d’utilisateur authentifié et un bouton de déconnexion.

Dans le fichier Success.js, ajoutez le code ci-dessous :

import React from 'react' import { useAuth0 } from '@auth0/auth0-react'

const Success = () => { const { user, logout, isAuthenticated } = useAuth0();


    return (isAuthenticated && (
        <div> 
            <h1>User Profile</h1> 
            <img src={user.picture} alt={user.name} /> 
            <h2>{user.name}</h2> 
            <p>{user.email}</p> 
            <button onClick={() => logout()}> Log Out</button> 
        </div>
    ))
}

export default Success

Une fois que vous vous êtes connecté et authentifié par Auth0, Auth0 vous redirige vers votre application et envoie des données de charge utile à votre application contenant les détails de l’utilisateur. Vous pouvez utiliser ces données dans votre application pour créer des profils utilisateur personnalisés et gérer les sessions utilisateur. La propriété User du crochet UseAuth vous permet d’accéder à des données utilisateur spécifiques.

Le hook UseAuth0 fournit également une propriété appelée isAuthenticated, qui vous permet de restituer les composants de manière conditionnelle. Si un utilisateur est authentifié, le code affichera les détails de son profil et affichera un composant de bouton de déconnexion.

Inversement, s’ils ne le sont pas, vous rendrez le composant du bouton de connexion. Cela signifie que vous n’avez pas besoin de spécifier les routes en fonction du statut d’authentification d’un utilisateur puisque cette propriété gère automatiquement ce processus. Auth0 définit à la fois la logique de connexion et de déconnexion, ce qui facilite la mise en œuvre de la fonctionnalité d’authentification.

Le service d’authentification Auth0 vaut-il la peine d’être essayé ?

Auth0 fournit des solutions prêtes à l’emploi qui gèrent les exigences d’authentification de votre application. De plus, le service Auth0 offre une prise en charge des plates-formes de développement Web, mobiles et natives vous permettant d’intégrer facilement le système d’authentification avec une pile technologique de votre choix.