Handle JWT Authentication with React

Question

I’m trying to figure out a React app using JWT for authentication, I dont’t really know how to plan it, for example:

Step 1: The user successfully logs in the app, gets a JWT token that is saved on localStorage.

Step 2: As soon as the user is logged in, the route changes and a request to the REST API is made, the request is authenticated using the token previously saved. The fetched data is now on state.

Step 3: The app has other routes that actually just filters the previously fetched data, so I think making new requests just to check auth would just makes things slower for no reason.

I would like to know a good practice to handle that, maybe check auth after a certain amount of time. Or the right thing to do is make requests on every route change just to check if the user is still authenticated?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The app has other routes that actually just filters the previously fetched data

make requests on every route change just to check if the user is still authenticated

If the user already has the data, it makes no sense from the security point of view to re-authenticate for the same data. Only re-fetch if you need to make sure the data is updated when the route changes.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 10, 2018 at 17:22

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

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

2 Comments

Vituu Over a year ago

But if the token expires in 15 minutes, for example, If I don't re-authenticate, the app will never know that the token has already expired, what should I do? Add a timer to re-authenticate after some time?

Roy Wang Over a year ago

Why does that matter? The authentication will be done again when the app tries to use some other endpoint, or when the user revisits the site. Unnecessary fetch is a waste of your servers' and users' bandwidth.

Collectives™ on Stack Overflow

Handle JWT Authentication with React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related