I've read many debates for storing JWTs in localStorage, sessionStorage or HTTP Only cookies. It seems HTTP Only Cookies are the preferred storage mechanism due to XSS susceptibility in localStorage & sessionStorage.
When using Redux, why not just keep the JWT in state? (Besides the downside of having to re-log the user on every refresh). I'm sure this is obvious.
Yes, it is because of the downside of having to re-log the user on every refresh.
I believe that's quite a significant reason for a good and consistent user experience.
Related
I have an endpoint for authenticating the user, which takes the user's username and password. The request returns a token which the app should then use for all subsequent requests, so I store it in the Redux store.
The tokens have a limited lifetime, so the app has to get a new token every so often. Because of this, I want to store the username and password using the device's secure chain storage (I'm using React Native), not on the Redux store, since doing so make it easy to extract the credentials from the app memory.
But since RTK Query by default caches requests based on the args passed to it, the user credentials will be cached in the Redux store.
So my question is two-fold:
Is what I'm saying even sensible? Does the logic for how I want this to work makes sense?
If yes, then how do I go about disabling the cache for one specific endpoint for RTK Query?
The point of RTK Query is to put things into a Redux store. That is the core mechanism for everything.
You can do all the requests without it, but if you do a request with it, it will be cached, at least for a while.
That generally would not be much of a concern since a Redux store is just a variable like const foo = "somethingSecret" though.
That said, you should probably not store username and password, but a "refresh token" that you get from your server.
And usually, you should not store that yourself, but your fetch implementation should do that for you - in the form of a cookie.
This also works in React Native.
Your server just sets the cookie for both the token and the refresh token as a httpOnly cookie and you cannot even access them from JavaScript. In JS, you just say credential: "include" and all your requests to that same domain will contain those tokens.
Manually handling those tokens if you can avoid it is always bad security practice.
Is it safe to use useCnntext+useReducer to store JWT? And also what's the difference if I use redux
it's not about safe, it's about practicability.
JWT will be flushed by context if u reload page.
so it's better to store in localStorage or sessionStorage.
for safety issue, it's fine if you JWT key not exposed on front side.
I have been trying to add some security to my react app. I am using a JWT token and have been storing it in the local storage. Storing it in the local storage was not very appealing for me and i decided to move the token into react context using the context API. However, after some research i learned that storing the JWT in local storage isn't that bad, and i would still need the token there in order to let the user continue after a refresh.
So, if i am going to be storing the token there anyway, is it worth it to have a context object storing the user as well?
It seems to me that just doing localStorage.get("token") is all i need.
is it worth it?
Both context and localStorage are using the global state, having the same token stored in both places is an anti-pattern.
What I would suggest instead is storing the User information in the context, and the token in the local storage.
Do not store the jwt token in local storage since is vulnerable to XSS attack. So it is better using context API.
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!
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.
I am handling sessions by storing the user data in the sessionStorage of the browser using AngularJs. The basic flow I am using is as follows:
Login by front-end
Returning the user from node i.e back-end
Storing the returned data in sessionStorage
sending id of user with every request to the server
clearing the storage when signing out
Is my approach correct?
If not then how can I manage sessions efficiently in a MEAN app?
Storing critical data as tokens into LocalStorage or SessionStorage is definitely not a good idea, as it is vulnerable to XSS attacks.
A better practice would be to store these informations in a cookie... However, we're not done here, as cookies are vulnerable to CSRF attacks.
Thus, best possible way to do it is to store critical infos in a cookie, and protect your clients from CSRF by storing a randomly generated session key in SessionStorage.
Check this answer :
CSRF Token necessary when using Stateless(= Sessionless) Authentication?