Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Configurer les origines Web autorisées

Une origine Web autorisée est une URL que vous souhaitez autoriser à accéder à votre flux d’authentification. Elle doit contenir l’URL de votre projet. Si elle n’est pas configurée adéquatement, votre projet ne pourra pas actualiser silencieusement les jetons d’authentification, ce qui entraînera la déconnexion de vos utilisateurs lorsque prochainement ils visiteront votre application ou lors de l’actualisation d’une page.

Auth0 propose une trousse SDK React (auth0-react.js) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications React.

Installez la trousse SDK React Auth0 en exécutant les commandes suivantes dans votre terminal :

cd <your-project-directory>
npm install @auth0/auth0-react

Configurer le composant Auth0Provider

Pour que la trousse SDK fonctionne adéquatement, définissez les propriétés suivantes dans le composant Auth0Provider :

• domain: Le domaine de votre locataire Auth0. En général, il figure dans Auth0 Dashboard dans vos paramètres d’application dans le champ Domaine. Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.

• clientId: L’identifiant de l’application Auth0 que vous avez configuré précédemment dans ce guide rapide. Il se trouve sur Auth0 Dashboard, dans la section Paramètres de l’application, dans le champ Identifiant client.

• authorizationParams.redirect_uri: L’URL dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Cela correspond à l’URL de rappel que vous avez configurée précédemment dans ce guide de démarrage rapide. Cette valeur se trouve également dans Auth0 Dashboard, dans les paramètres de votre application, dans le champ URL de rappel. Assurez-vous que les informations que vous saisissez dans votre code correspondent à celles qui ont été configurées précédemment. Dans le cas contraire, vos utilisateurs verront un message d’erreur.

À présent que vous avez configuré votre application Auth0 et la trousse SDK Auth0 React, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode loginWithRedirect() de la trousse SDK pour créer un bouton de connexion qui redirige les utilisateurs vers la page de connexion universelle Auth0. Une fois un utilisateur authentifié avec succès, il est redirigé vers l’URL de rappel que vous avez configurée précédemment dans ce Démarrage rapide.

Créez un nouveau fichier dans votre application appelé login.js pour le composant du bouton de connexion, et copiez le code du panneau interactif à droite, qui contient la logique nécessaire à la connexion. Ensuite, mettez à jour votre fichier index.js pour y intégrer le nouveau bouton de connexion.

Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Créez un bouton de déconnexion en utilisant la méthode Logout() de la trousse SDK. Lorsque les utilisateurs se déconnecteront, ils seront redirigés vers votre point de terminaison Auth0 logout qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce guide de démarrage rapide.

Créez un nouveau fichier dans votre application appelé logout.js pour le composant du bouton de déconnexion, et copiez le code du panneau interactif, qui contient la logique nécessaire à la déconnexion. Ensuite, mettez à jour votre fichier index.js pour y intégrer le nouveau bouton de déconnexion.

Vu que vos utilisateurs peuvent désormais se connecter et se déconnecter, vous voudrez probablement pouvoir récupérer les informations de profil associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir afficher le nom ou la photo de profil d’un utilisateur connecté dans votre projet.

La trousse SDK React Auth0 fournit des informations sur l’utilisateur par l’intermédiaire de la propriété user. Examinez le code profile.js dans le panneau interactif pour voir un exemple de la façon de l’utiliser.

Étant donné que la propriété user contient des informations sensibles liées à l’identité de l’utilisateur, sa disponibilité dépend de l’état d’authentification de l’utilisateur. Pour éviter les erreurs de rendu, vous devez toujours :

• Utilisez la propriété isAuthenticated pour déterminer si Auth0 a authentifié l’utilisateur avant que React ne rende un composant qui consomme la propriété user.

• Assurez-vous que la trousse SDK a fini de se charger en vérifiant que isLoading est faux avant d’accéder à la propriété isAuthenticated.