Auth0 jwt react

une approche plus orientée hooks, je vous recommande de consulter ce tutoriel exemples : GitHub - auth0-samples/auth0-react-samples : Auth0 Integration Samples for React Applications.

Ce qui précède, c’est plus une approche sans crochets à un moment donné ! Tout dépend de votre application React, en fait.

Il serait utile d’avoir cet exemple également en TypeScript. Aussi, un moyen de d/l la source entière de l’échantillon.

Bonjour Ramiro,

j’ai suivi le tutoriel et j’ai réussi à me connecter et à me déconnecter en utilisant le code source : GitHub - auth0-blog/react-auth0-spa-sdk-ga avec mes identifiants Auth0.

Mais si je ferme l’onglet du navigateur et ouvre un nouveau un et chargez-le http://localhost:3000/

Comment cela doit-il être géré et seriez-vous en mesure d’effectuer des mises à jour du code source ?

Une autre question que j’ai concerne l’ouverture de plusieurs onglets de la même application web et la manière dont cela devrait être géré en toute sécurité. Il y a une discussion à ce sujet depuis 2018, mais vous ne savez pas si elle est toujours pertinente et si elle s’applique aux SPA ? (Aussi, faites-moi savoir si je devrais poser cette question sur un autre canal ?)

Merci,
Dan

Oui ! Les deux sont d’excellentes approches. Tout dépend de votre équipe et de votre base de code actuelle.

Un exemple TypeScript est une excellente idée. Peut-être devra-t-il le faire à l’avenir.

Pour télécharger l’intégralité de la source, rendez-vous sur le référentiel GitHub. Vous pouvez également télécharger le tout avec ce lien de téléchargement :

https://github.com/auth0-samples/auth0-react-samples/archive/master.zip

Hey Dan,

avez-vous votre code source disponible ? Pour vérifier si vous êtes connecté ou non, vous pouvez télécharger les outils de développement React

Il peut s’agir d’un problème que vos informations de connexion ou de déconnexion ne sont pas chargées dans React lors du chargement de la page et c’est pourquoi les informations de connexion/déconnexion ne s’affichent pas. Les outils de développement React sont un bon moyen de déboguer cela pour voir si les informations authentifiées correctes se retrouvent dans votre application React lors du chargement de la page.

Pourriez-vous nous en dire plus sur les multiples onglets ? Chaque fois qu’un nouvel onglet est ouvert, l’authentification d’Auth0 est vérifiée à l’aide de la méthode. Cela signifie que chaque onglet est authentifié dès son ouverture. Chaque fois que vous appelez également votre API backend, vous devez envoyer un jeton JWT afin que chaque requête que vous make est authentifié. Entre checkSession() et le JWT, c’est une bonne sécurité.

Si vous avez d’autres questions, faites-le moi savoir !

Excellent article, mais vous promettez à plusieurs reprises d’expliquer comment obtenir un jeton pour effectuer des appels API authentifiés. Il serait vraiment utile que cette information puisse être incluse !

Salut Chris,
c’était très utile, mais il semble que vous ayez oublié d’inclure la section pour 'Saisir un jeton d’authentification à utiliser lors de l’appel d’API'. J’apprécierais si vous pouviez également le poster.

Merci beaucoup pour ces liens @chrisoncode !

Super tutoriel ! Est-ce un problème que nous gérer des variables telles que 'isAuthenticated' depuis le front-end sans vérifier Auth0 pour cela à chaque fois... ? Ces variables peuvent-elles être manipulées par un utilisateur malveillant ?

J’ai un problème avec la maintenance de la session.
Même avec le projet par défaut, chaque fois que je me connecte et actualise la page, elle redirige vers la page d’inscription, elle ne met pas la session en cache.
Une solution à ce sujet ?

Il peut y avoir un problème avec l’affichage aux utilisateurs de parties de l’interface utilisateur qu’ils ne devraient pas voir. Ils ne devraient pas être en mesure de voir (GET) ou de mettre à jour (POST) les données sensibles, car le jeton sera vérifié chaque fois que nous accélérerons à notre API.

Vous pouvez aller plus loin et mettre à jour isAuthenticated en vérifiant Auth0 à chaque fois.

Il se peut que vous utilisiez des identifiants sociaux ? Lorsque nous utilisons des connexions sociales avec les clés par défaut d’Auth0 (pour Facebook, Twitter, etc.), la session ne sera PAS conservée.

Apportez vos propres clés ou essayez l’adresse e-mail/mot de passe lorsque vous travaillez localement. J’espère que cela vous aidera.

Merci de partager ces connaissances Chris !

J’utilise le SDK Auth0 pour la première fois dans une application React d’une seule page, mais pour une raison quelconque, lorsque je navigue vers un autre composant, le Auth0Context ne persiste pas et je suis à nouveau déconnecté. Si quelqu’un sait pourquoi cela peut se produire, je lui en serais très reconnaissant ! Merci!

Salut !

Pouvez-vous partager avec nous un lien vers le repo / quickstart de notre Vous utilisez ? Merci!

Salut ! J’ai suivi ce tutoriel : https://rb.gy/03ppfl
je n’ai aucun mal à faire fonctionner correctement l’Auth0Context dans le composant NavBar, et dans un composant de profil que j’ai ajouté. Mais ensuite, lorsque je commence le flux de travail réel de mon application et que j’appelle useAuth0() comme indiqué dans le tutoriel, il semble qu’il ne s’enregistre pas que je me suis déjà connecté. Merci beaucoup d’avance pour votre aide !