Managing a JWT Session with React?

Question

I have a very general question concerning a JWT Session.

Whenever I fetch something from the database I need to sent the token along to autentificate. In case the token is expired, I need to check if the token is still valid. How do I manage this in a simple fashion? So that the user is directed to a login page whenever the token is invalid?

Do I always have to dispatch my intended action (e. g. a GET req. to fetch news articles) and dispatch a SECOND action everytime which deletes the token from SessionStorage if it is not valid and redirects the user to the login screen? This seems like a bad solutions because it somplicates literally every action?

So my basic question is, how do I manage a JWT session in a good way?

Gabriel Bleu · Accepted Answer · 2018-01-12 10:50:17Z

-1

JWT token usually comes with the expiration time, store it in local storage and refresh it when needed.

sample code : https://auth0.com/docs/quickstart/spa/vanillajs/05-token-renewal

answered Jan 12, 2018 at 10:50

Gabriel Bleu

10.3k2 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Xen_mar Over a year ago

Thanks for that. I've implemented it to the point you described. But now I ask myself how to I handle normal requests with the token i have saved. You see: 1. I need to include the token in every request, which is fine 2. For every request I have to check for the token and sent the user to a login screen if the token is expired (do I do this with a .catch() or with an additional action? this seems a little complicated.

Gabriel Bleu Over a year ago

To check if the user session is expired you just have to check the expirity time. You can use an higher order component in order to automate this check. sample : github.com/AnomalyInnovations/serverless-stack-demo-client/blob/…

Xen_mar Over a year ago

Thanks for that! It took some time until I understood what you were proposing. But as far as I understand it, implementing a higher order component is not really a check. It merely asks the application state if some piece of state says that the user is authenticated. To really check if that this is true I would still need to ask the server that supplies the token. So the question remains how this check is performed? Even with your solution I have to append this check to every action seperately.

Xen_mar Over a year ago

Or is it possible to dispatch an action (Redux) within the higher order component?

Gabriel Bleu Over a year ago

The token check is performed server side, by your API

|

Collectives™ on Stack Overflow

Managing a JWT Session with React?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related