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.
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.
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?
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.