Reputation: 1019
I have been reading various tutorials on how to use, for example, JWT in a React + Redux app.
In those tutorials, JWT is typically saved in local storage and has an expiry date. This is fine.
However, I encounter some examples using an authReducer that reads from the JWT onload and sets the boolean state isAuthed to true or false. This state is used to handle UI changes such as AuthedNavbar or setting private routes.
My concern here is that the authReducer state becomes stale. For example, if the user keeps the app open, the isAuthed state will still be true, even though the token may have expired.
(Of course, the server-side routes will be protected with jwt so the user will not be able to access resources. However, they will still have a bad UX on the front-end.)
Indeed, this contradicts to the principle of "single source of truth." The auth state is set in both redux and local storage.
Not all state has to be handled in redux. We use react local state and handle router state outside of redux.
Therefore, I think that it is better to use only local storage as the source of truth.
What do you think? Hope to get some suggestions!
Upvotes: 1
Views: 141
Reputation: 85575
Don't persist the data isAuthed
in the storage system. But only place use the access_token
. Then, even if the user changes it will have no problem. Because you'll be checking it through the database system and verify the access_token
and know the isAuthed
from the database as well.
Upvotes: 1