How to secure JWT token in React?

twitter logo github logo ・1 min read

I have been working with axios in React. I was wondering about the security of the JWT Token. Because whenever I request the endpoint through axios, I have to insert my token in the front end code which is accessible in browser. How to secure it?

twitter logo DISCUSS (4)
markdown guide
 

Hello, I assume you are using tokens as it's a stateless app, so you might like to give js-cookie a try, seems to be a better solution than using local storage.
You can use it as follows

import Cookie from "js-cookie"

const token =  Cookie.get("token") ? Cookie.get("token") : null;

//to set a cookie
Cookie.set("token", token);

//refer the js-cookie documentation for more options

 

Don't store it in local storage, that's definitely not secure. Cookies too aren't great; all those options are physically stored on the client.

The answer to how you should secure it very much depends upon the type of your app? Does it have a server back-end, or is it just a SPA with API end-points?

Generally the guideline seems to be to not to store the token at all, but get a one-use token each page load that stays in memory.

Take a look at some info Auth0 provide for guidelines that links through to some OIDC patterns for securely using tokens in different types of web apps.

auth0.com/docs/security/store-tokens

 

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: security.stackexchange.com/a/179507

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.

 

You just need to have it handy as long as you use https

Classic DEV Post from Feb 20

Help build a list of awesome .dev sites

A growing list of awesome .dev sites

Ali Rizvi profile image
MERN Stack Developer, with the passion to develop apps that can make this world better. "Whenever I get bored, I call API's"
Join dev.to

If crime-fighting half-man/half-sharks can do it, so can you.