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 authentification et 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 ajouter également d'autres options telles que la connexion sociale, via un fournisseur comme Google, et multi-facteurs authentification.
L'avantage d'utiliser ce type d'authentification est que vous n'avez pas besoin de vous familiariser avec l'identité des protocoles comme OAuth 2.0 ou OpenID Connect, qui sont couramment utilisés pour créer une authentification sécurisée systèmes.
Créer un nouveau projet sur la console développeur Auth0
Pour commencer, vous devrez d'abord vous inscrire à un Auth0 compte. Après votre inscription, accédez à votre tableau de bord et cliquez sur Créer une demande 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, remplissez le nom de votre application, sélectionnez Applications Web à page unique, puis cliquez sur Sauvegarder.
Ensuite, sélectionnez Réagir de la liste des technologies 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 le Paramètres pour configurer les propriétés d'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.
Pour le développement local, vous pouvez utiliser http://localhost: 3000 URL. Cependant, une fois que vous avez poussé votre code en production, vous devrez fournir les URL de votre domaine.
Une fois que vous avez terminé de remplir les URL, continuez et cliquez sur Sauvegarder les modifications en bas de la page des paramètres.
Définissez vos fournisseurs de connexion sociaux préférés
Dans le volet de menu gauche du tableau de bord de l'application Auth0, cliquez sur Authentification, puis sélectionnez Sociales. Ensuite, cliquez sur le Créer une connexion sur la page des paramètres des connexions sociales.
Enfin, sélectionnez et ajoutez votre fournisseur de connexion sociale préféré.
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éer 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= votre nom de domaine
REACT_APP_AUTH0_CLIENT_ID= votre identifiant client2. Installer les packages requis
Exécutez cette commande sur votre terminal pour installer les dépendances requises :
npm install @auth0/auth0-react3. 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 :
importer Réagir depuis'réagir';
importer RéagirDOM depuis'réagir-dom/client';
importer Application depuis'./Application';
importer{Auth0Provider} depuis'@auth0/auth0-réagir';constante root = ReactDOM.createRoot(document.getElementById('racine'));
root.render(
domaine = {process.env. REACT_APP_AUTH0_DOMAIN}
clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
redirectUri = {fenêtre.location.origine}
>
</Auth0Provider>, document.getElementById('root')
);
4. Créer un composant de page de connexion
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.
importer Réagir depuis'réagir'
importer { useAuth0 } depuis'@auth0/auth0-réagir';constante Connexion = () => {
constante { loginWithRedirect, isAuthenticated } = useAuth0();retour (est authentifié || (
exporterdéfaut Connexion
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 :
importer Réagir depuis'réagir'
importer { useAuth0 } depuis'@auth0/auth0-réagir'constante Succès = () => {
constante { utilisateur, déconnexion, isAuthenticated } = useAuth0();retour ( est authentifié && (
Profil utilisateur</h1>
{user.name}</h2>
{user.email}</p>
exporterdéfaut Succès
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.