There are heaps of articles out there talking about different ways you can make your JSON Web Token (JWT) secure when you are developing an application using React JS or one of the other JavaScript-based frameworks.

It is actually a little bit tricky to hide your JWT from attackers when you implement a client-side application.

A few months ago I did a deep investigation on what is the best and most secure way of doing this and I ended up with defining a solution using Cookies and Custom Token Retrieving.

So I decided to post an article about that for those who use .NET Core/.NET 5 SPA, IndentityServer4 and React JS to implement their web apps.

---

Here is how we do that.

First, we create a controller to manage our JWT storing, deleting and validation.

Let’s name it AuthController.

gist:2cb71c30f2d08bc781ebcb1def80cd95

As you can see, there are 3 methods here. The Check method will be called from the client side to see if our token is still valid. The Save method will be used to store the token once it’s generated by our IdentityServer. The client app will call this method and will pass the token to it only one time. The Delete method is for when a user logs out of the app and when we want to delete the token.

The token will be sent to the server in a header named x-jwt and we will write a Custom Token Retriever to read that from that particular header.

Let’s write our CustomTokenRetriever.

gist:52926b541efa08409ddcef47e819565c

Now we add the above token retriever to our IdentityServer’s configuration code in Startup.cs.

    options.TokenRetriever = CustomTokenRetriever.FromHeaderAndCookies;

So far, so good.

Now what we need, is a custom attribute to decorate our protected controller(s) with in order to refresh the token before it expires if the user continuesly is working with the app.

Let’s write that attribute.

gist:37d61229b03850e024f71fdef8f5ce43

This attribute checks the token on every API call and refreshes that if its TTL falls below __120 seconds__. You can change that value depending on your needs. If you’ve noticed, we are using a service called __IdentityServerService__ which is a custom service which takes care of renewing the token using the __Refresh Token__, __Client Id__ and __Client Secret__.

I leave that service implementation to you.

Now all we need to do to finish our backend implementation, is to decorate our controller with the attribute.

    [JWTRefresher]

Now let’s go ahead and write our needed client side code.

I use fetch as my http client and create the following JavaScript service to take care of my authentication part.

gist:38148bdbbe6e175121ac430d64645a88

Easy!!!

The above service can be used to send our token to the server, validate it and delete it when we want.

As you can see, no usage of local storage for anything. Token is stored in a secured cookie and refreshed on the server side.

How to securely store JWT in a React web app

The most secure way of storing JWT in a React web app!