How to secure JWT token in React?

#discuss #security #react #webdev

I have been working with Axios to 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 the browser. How to secure it?

Percentage Calculator

Top comments (6)

Tushar Khubani • Jun 10 '19

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

Alistair Evans • Jun 11 '19

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

Chris Cornutt • Jul 7 '19

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:

localhostrage
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.

Nagabhushan • Nov 17 '19 • 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?

MonsieurWave • Nov 10 '19

Hello all!
Wouldn't be server side authentification be an even safer option? ie. JWT token is saved server side and axios request are made server side ?
This could for example be achieved through webSockets...
What do you think?