Auth0 react get token

Auth0 a lancé son SDK React le 24 juin 2020, afin de fournir aux développeurs React un moyen plus simple d’ajouter l’authentification des utilisateurs aux applications React en utilisant une approche centrée sur les hooks.
Découvrez comment ajouter l’authentification utilisateur à React à l’aide du contexte et des hooks.

Lire la suite

Présenté pour vous par @dan-auth0

C’est, de loin, le guide le plus complet pour configurer Auth0 sur votre projet React. J’aurais grandement apprécié que ce lien soit inclus dans le guide de démarrage rapide de React lorsque j’ai commencé.

Cependant, j’ai rencontré un problème où les composants effectuant un appel d’API avec useEffect ne créent une boucle infinitie que lorsque en utilisant des routes privées. J’ai un composant de formulaire protégé par la route privée telle que configurée dans ce guide. Le composant form dispose d’un hook useEffect avec une dépendance de tableau vide pour s’exécuter uniquement sur componentDidMount. Ce hook useEffect appelle une fonction Axios.get de base pour remplir un composant de contexte global qui à son tour remplit nos champs de formulaire. Cela fonctionnait avant l’ajout des routes privées, et continue de fonctionner si vous utilisez une route normale. Dans le cadre de la voie privée, le navigateur commence à chuter et lance :

Y a-t-il une meilleure façon de construire cela ? Est-il possible d’inclure un exemple dans ce guide ? J’ai passé au peigne fin les nombreuses formes différentes de documentation React, mais rien ne semble mélanger les routes privées avec les appels API. Cela semble être quelque chose qui devrait être facile à configurer.

Howdy, Avala. Merci de rejoindre la communauté Auth0 et pour vos commentaires

Si je comprends bien, l’exemple que vous aimeriez voir est le suivant :

• Vous avez un composant qui effectue des appels API dans un hook.
• Le composant stocke la réponse de l’API dans un composant Context global.
• Vous limitez l’accès au composant en l’encapsulant dans un composant d’ordre supérieur.

C’est vrai? Si c’est le cas, j’ai certainement prévu de fournir un exemple de cela dans un avenir proche.

Là où cela peut devenir délicat, c’est le suivant :

Ce hook useEffect appelle une fonction Axios.get de base pour remplir un composant de contexte global qui à son tour remplit nos champs de formulaire.

Il s’agit plutôt d’un détail d’implémentation de la gestion de l’état qui peut être effectué de différentes manières et qui peut être à l’origine de l’erreur de performance. Par exemple, j’utilise par défaut Formik lorsque J’ai besoin d’utiliser des formulaires dans React. J’ai une application qui a des voies privées pour les composants de porte avec des formulaires dedans, mais je n’ai pas encore rencontré d’erreur comme celle que vous avez soulignée, ce qui me fait penser que la source de l’erreur n’est pas liée à la présence du per se mais à quelque chose d’autre

@dan-auth0 Merci pour la réponse rapide un vendredi ! Il semble que le scénario soit correct. J’ai bricolé davantage avec l’application et il semble que le problème provienne d’une tentative de manipulation du contexte de l’État mondial. Nous utilisons également Formik, mais nous avons quelques cas d’utilisation géniaux avec un pas à pas de matériau et une table répétitive qui rendent ce projet intéressant.

Après des tests supplémentaires, je peux exécuter une requête de récupération et mettre à jour l’état local avec le comportement attendu, mais lorsque nous essayons de lire ou de modifier le contexte d’état global (dans useEffect ou un rappel) Le truc frappe à nouveau le ventilateur. Pour faire court, toute tentative de distribution vers le réducteur d’état global génère une boucle infinie lors de l’utilisation de routes privées, mais les routes normales fonctionnent correctement.

@dan-auth0 Vous aviez tout à fait raison. J’ai jeté un autre coup d’œil à mon fournisseur de contexte global et j’ai refactorisé mon réducteur d’application et mes rappels dans le formulaire. Il fonctionne comme un champion maintenant ! Merci pour cet excellent article !

je dois admettre que ce tutoriel m’a fait avancer massivement sur le fonctionnement d’auth0. Merci Dan. Bien sûr, j’ai rencontré des problèmes en essayant de l’intégrer dans mon application react-redux. Je me demande si vous pourriez être en mesure de nous donner un aperçu de ce qui suit...
1 : passer/obtenir un jeton dans un composant
basé sur une classe

2 : Définir le données de profil utilisateur dans un réducteur et l’attribution des props ?

Salut, Avala ! Heureux de lire que vous êtes les bienvenus, merci d’avoir lu le guide

Salut, Macm ! Bienvenue dans notre communauté Auth0 et merci d’avoir lu l’article.

Avec le guide que nous venons de publier, nous ne faisons qu’effleurer la surface de l’écosystème React. Il y a différents cas d’utilisation que je prévois de couvrir dans les semaines/mois à venir. Les plus importants que j’ai sur ma liste sont : la version React + TS, en utilisant des composants de classe, et React + Redux.

Je suis en train de formuler notre stratégie Redux, en particulier lorsque l’architecture de l’application devient plus complexe à l’aide d’effets de bord.

En attendant, cette section du SDK La documentation, Utilisation avec un composant de classe, peut vous fournir des informations sur la façon d’intégrer le nouveau SDK React Auth0 avec des composants de classe En un mot : Vous utilisez le composant d’ordre supérieur que le SDK expose pour encapsuler votre composant. Ensuite, toutes les props du SDK sont disponibles via .

Je maintiendrai ce sujet communautaire à jour au fur et à mesure que nous développerons plus de conseils pour l’écosystème React

Quelle est la différence entre et ?

Le sdk SPA est plus ancien tandis que le sdk React est très récent, mais en quoi sont-ils différents en termes d’utilisation et d’implémentation sous-jacente ? Y a-t-il des différences/avantages qui rendraient l’utilisation de l’un plus facile par rapport à l’autre ?

De plus, en ce qui concerne la conversation sur un précédent article de blog (Comment sécuriser les sites GatsbyJS avec Auth0 pour l’authentification), quel sdk recommanderiez-vous pour une utilisation avec Gatsby étant donné que Gatsby est destiné aux SPA construit avec React ?

David, c’est une excellente question Je vais créer beaucoup plus de contenu sur React Security and Identity dans les semaines/mois à venir et c’est une cause d’utilisation que je veux mettre en avant ! SDK React vs SDK SPA Auth0.

Techniquement, ce qui se passe sous le capot est toujours le même. Cependant, avant l’introduction du SDK React, nous avons demandé aux développeurs de créer un composant React pour gérer leur intégration de l’authentification Auth0. Vous copieriez et colleriez une grande section de code dans un fichier qui serait votre « React SDK ».

Ce que nous avons fait, c’est regrouper toute cette intégration dans son propre paquet de consommables en suivant les idiomes de React. Maintenant, vous téléchargez le SDK et pensez en termes de constructions React à un niveau élevé (Hooks, Higher-Order Components) au lieu d’avoir à implémenter une fonctionnalité d’authentification à partir de gratter.

On pourrait également dire que le SDK React est opiniâtre. Nous vous fournissons les fonctions de haut niveau pour alimenter le flux d’authentification. Si vous deviez utiliser le SDK SPA Auth0, vous assemblez le flux peut-être d’une manière différente et créez des crochets ou des wrappers différents.

À ma connaissance, si vous avez besoin d’accéder au client Auth0 en dehors du domaine React, vous pouvez bénéficier de l’utilisation du SDK Auth0 SPA.

En ce qui concerne Gatsby :

Nous sommes en train de mettre à jour nos conseils Gatsby pour utiliser le nouveau SDK React. Je vous recommande d’essayer le SDK React avec Gatsby car il est très facile à utiliser. Vous pouvez utiliser le HOC pour encapsuler les composants que vous souhaitez protéger ou vous pouvez créer un composant de route privée pour le routeur utilisé par Gatsby. D’après mon expérience personnelle, j’ai toujours fini par migrer vers React Router car je trouve plus facile de créer ce composant de route privée.

Bonjour,

Merci pour ce guide complet.

J’ai configuré une application qui utilise pour le front-end comme décrit, et à l’arrière pour effectuer des actions de gestion, y compris la mise à jour et . Avec la mise à jour de l’e-mail, vous devez vous reconnecter, ce qui constitue une solution de contournement, mais lorsque vous mettez à jour les métadonnées, il ne semble pas y avoir de moyen de mettre à jour l’objet utilisateur mis en cache dans le front-end pour refléter les modifications sans vous déconnecter et vous reconnecter.

Existe-t-il un moyen de récupérer à nouveau l’utilisateur ou (de manière moins optimale) de manipuler les données mises en cache pour refléter les modifications ?

Merci

Salut, réconfort ! Bienvenue dans la communauté Auth0 et merci d’avoir lu le guide ! C’est une excellente question. Permettez-moi de consulter mon équipe en interne pour voir quelle stratégie pourrait fonctionner ici

Merci. J’ai hâte d’entendre ce que vous allez proposer.

Je suis en train de suivre le tutoriel react mega et je peux maintenant me connecter avec succès en utilisant mon nom d’utilisateur et mon mot de passe.

Par curiosité, je suis intéressé par la visualisation du JWT que le client reçoit après l’authentification.

Où ce JWT est-il stocké ? En tant que développeur, comment puis-je y accéder ?

SDK : @auth0/auth0-react 1.0.0

Merci !

Salut !

Déplacer votre message ici car il s’agit du fil de discussion lié à la gestion des problèmes et des questions concernant cet article de blog. Merci!

Salut, asdFletcher ! Découvrez le "Hack Vous-même » de la section « Développer une API sécurisée avec NestJS : Gestion des rôles » qui vous montre comment obtenir le jeton d’accès. Une fois que vous avez le jeton, vous pouvez l’utiliser https://jwt.io/ pour le décoder.

Pour le contexte : l’application de démonstration cliente que nous utilisons dans le tutoriel NestJS est une application React, mais ce processus d’inspection du jeton d’accès est le même pour toutes les applications clientes.

Applications TypeScript Full-Stack : Développer une API sécurisée avec NestJS

Apprenez à utiliser NestJS, un framework Node.js optimisé par TypeScript, pour créer une API sécurisée.

Je voulais juste faire un suivi avec vous : je suis toujours en train de chercher des conseils sur les conseils que nous pouvons fournir pour obtenir les métadonnées des utilisateurs. Permettez-moi de vous demander à quelle fréquence estimez-vous que les données vont changer ?

Merci pour Enregistrement.

J’avais l’intention de l’utiliser user_metadata pour les informations de profil telles que le prénom/nom, et éventuellement les paramètres/préférences si cela peut aider.

Si ce n’est pas une utilisation recommandée de cette propriété, faites-le moi savoir.

merci!

Salut Dan, merci pour la réponse rapide.

J’ai récupéré l’identifiant client JWT à partir de la réponse « token » que je reçois lors de l’authentification, je l’ai décodé et il semble être différent du token d’accès que je reçois lorsque j’appelle :

Cependant, les informations lors du décodage sont exactement les mêmes. Je me rends compte qu’il n’y a pas vraiment de question là-dedans.

Une question de suivi serait la suivante : comment mon backend node.js vérifie-t-il que le JWT est valide ? Toutes les informations qu’il contient sont des variables d’environnement :

Comment mon backend sait-il qu’un Le client n’a pas modifié les portées pour inclure « admin », par exemple. Ou est-ce à cela que sert la clé secrète ?

Vous êtes les bienvenus. Je suis en train de préparer une réponse pour vous en ce qui concerne l’intégrité symbolique et la confiance dans ses revendications