Is it safe and convenient to store jwt token in Localstorage or cookies and to store the user's data in Context API

Question

I am creating an authentication service in React and I am trying to find an ideal methodology of storing JWT from backend and storing in cookies or localhost and the data of user to store in context API to access user's data through out the web

Answer 1

It's not secure to store JWT in localStorage nor in sessionStorage. As they are public and every script can read them - XSS attack. If your site is vulnerable to XSS attack, the attacker may read JWT and act on behalf of real user as long as the JWT is valid.

You could store it in HttpOnly SameSite cookie. But there are other bad stuff that may happen, or even make impossible to use the JWT (for example SPA application won't be able to read HttpOnly cookie).

The most secure way to store JWT is in memory. This is recommended place even by Auth0.

If you need more security, you could store it in HttpOnly cookie as I wrote earlier, but there should be some backend in the middle to be able to read it and create proper request. This technique is called BFF - "backend-for-frontend".

Answer 2

It is convenient to store access tokens in local storage (it doesn't matter if the access token is in the form of a JWT or not). You have to remember, though, that it is not safe. Tokens stored in the browser are subject to XSS attacks. Any script will be able to access that token and steal your user's data. As of April 2022, there is no safe way to store tokens in the browser.

Your priority should be to mitigate XSS risks in your application (there are some guidelines from OWASP and Mozilla foundation on how to deal with that). If you want to further strengthen the security of your app, I would recommend not keeping the token in the browser at all. At Curity we have described a pattern we call the Token Handler, in which you use a simple backend component to handle tokens and issue secure cookies to the browser. This adds a bit of complexity to your app but strengthens the security. You can read more about the pattern here: https://curity.io/resources/learn/the-token-handler-pattern/ We also created an example implementation so that people can easily start using the pattern: https://github.com/curityio/oauth-agent-node-express

Answer 3

If jwt token has no private info, it is okay. Jwt token should have non-private infos. If you want some private info to jwt, then you should use session & cookies

Answer 4

Use contextApi if you want to avoid props drilling, or sharing props to multiple components with in a drilling manner. It is meant to be sharing props in a component tree.

If your browser refreshes your data wouldn't be persisted , so if you want to share data to all the pages even after refresh consider using localstorage.

You should definitely store jwt token inside localstorage, but make sure to authenticate on every hoc of your components, so your props dont go stale.

Your Api's should be called on HOC's or parent components, where oAuth can be used to check the api url's header and accordingly when something changes your all the child components would get new data.

Answer 5

Yes that is the best way just store the jwt token inside your localstorage because every API also has some auth checks so if someone tries to erase that token then your API would fire the error message. And for user data instead of context API, I would recommend you to use redux for storing the user data.