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 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 2

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