DEV Community


Discussion on: How to secure JWT token in React?

enygma profile image
Chris Cornutt

The recommendation to not store the token in localstorage here is a tricky one. In most SPAs, Javascript will need access to this token and there are two places to put it:

  1. localhostrage
  2. a non-HTTPOnly cookie

Both of these come with their own problems (XSS and CSRF, respectively) but in this case, the need outweighs the risk. The key to application security, though, is minimizing risk. So, if we add risk by putting it in localstorage, we need to add controls to minimize the risk elsewhere. To help protect from these other issues (XSS, CSRF, etc) you can follow some of the advice in this StackOverflow post:

Additionally, strong authorization controls on the backend help prevent issues with the token being stolen. This could even mean added the remote user's IP address as a custom claim in the JWT and verifying the request is coming from there. This would be difficult to spoof as the token is singled with a secret unknown to the attacker and would not verify if they changed the IP in the payload.

nagabhushan1234 profile image
Nagabhushan • Edited

Most of the resources on Internet suggest to store JWT in httpOnly cookies. But I am confused, if we store the JWT in httpOnly cookies how can we perform AJAX api calls (that require authorization) using fetch or axios, since we cannot read httpOnly cookies. So, the only option is to store them in non-httpOnly cookies which are almost at the same level if we consider XSS. Am I right?