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.
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.
I am developing React Native app. I need to use access token for auth requests. Currently I am storing it in redux store. But on refresh token become null. So I was thinking of using AsyncStorage to store token. But don't know which one is fast. I can use Persist with redux store to keep token for long time as well.
One more issue with AsyncStorage is that I can't get token without using await, and for that I must use this inside async function. But I will require it in other places as well where I can't use async function , like to in header configs of post request where I set Authorization for all request.
Any help would be appreciated. Thanks.
Both comments are correct - if you want to reuse the access token when the user enters the app again after a short time, it becomes really handy to have the token still in the async storage.
For usage within the app it is then better to have the token in redux or the AuthContext, if you use that one.
Now Redux-persist is a combination of both, gets you the methods to automatically load data into store on starting the app and also put them back into storage.
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 an application that uses JWT for user authentication. When a user login in the app, the backend returns an access token and refresh token, my question is:
both tokens must be stored in the same storage/place?
Yes. You will have to store it in the same storage. I'd suggest using something like Secure Store or Async Storage to store your JWT tokens. And when your application is launched, retrieve the access token from Secure Store and store it in memory. Redux preferably, so you don't have to constantly retrieve it from Secure Store each time you make an API call. But, avoid storing the Refresh Token in Redux because you will not use it as often as your access token.
I'm developing an ReactJS app calling api from my server. After logging in, server returns an authentic-token and I need to store it in cookies (the key is token and value is the authentic-token from server. Now I'm using universal-cookie). But when I assign document.cookie to another value like token=xxx in browser's console, the token in cookies will be modified. Is there any ways to prevent user from modifying the cookie via document.cookie ?
Thank you !
To answer your question, the answer is No. You should never have to trust data from the browser as there are a myriad ways of manipulating it.
Instead you should make sure your backend server validates the cookie.
You cannot prevent a user from modifying the token in the cookies. universal-cookie stores data in a particular way and it shouldn't be altered using document.cookie. Also, you should always validate the data in the cookie with the data in your backend as the user can manipulate the data in any way.
It would be better to use universal-cookie itself to do all the tasks related to cookies you want to do, as you can do almost everything with it. And you can also try out some other packages such as react-cookies