In this post we shall be talking more about JWT token which is generated by our API service when the user is authenticated and passed back. We store this token and use in our next set of API calls. To understand more about JWT please refer to following post

Add a package from npm

Add a package from npm by using the command

npm i buffer

buffer is library used in javascript when we are dealing with bytes. It helps in performing various operations on the byte data.

Code to decrypt token

We shall use below code to decrypt the token.

  function decodeJwt(token) {
        var base64Payload = token.split(".")[1];
        var payloadBuffer = Buffer.from(base64Payload, "base64");
        return JSON.parse(payloadBuffer.toString());
  }

The above method does following. A JWT typically has two parts seperated by a dot

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJleHBpcmVzIjoxNjcyNTQ4MjE5LjcyMTMwNiwiZmlyc3RuYW1lIjoiU3Jpa2FudGgiLCJsYXN0bmFtZSI6IlZlbmthdGEifQ.M4PujsNXWJJzeJFDZZ10veOvZg8YVuRphrzK444_d4E

the first part before dot has the type of encryption and the second part has details which are encrypted. In the method we are taking the second part and decrypting the same and below will be the result.

{"user_id":1,"expires":1672548219.721306,"firstname":"Srikanth","lastname":"Venkata"}

If any values of the payload are required in application like firstname ,lastname we can display instead of making an api call for the same.

Assign token and jwt token decrypted value to state field

Now since we are able to decrypt it we shall save the data in a state field using below code

          handleUserToken(response["data"]["access_token"]); 
          handleTokenData(decodeJwt(response['data']['access_token']))

The handler methods store data in fields - usertoken and token data

Isnt JWT decryption unsafe?

Now since we are able to decrypt the JWT token is it unsafe as anyone with the method can decrypt and understand data. We need to understand the following regarding JWT

1. JWT doesnt concern about encryption.It is only concerned about validation. So anyone with the JWT and modifying the data ,will not get accepted as there will be signature mismatch.

2. When transmitted over a secure channel like https [which is preferred] the security part is taken care of

3. JWT isn't meant to store sensitive data. Once the server receives the JWT token and validates it, it is free to lookup the user ID in its own database for additional information for that user.So never store sensitive data in a JWT

4. A JWT is a like a key to secure routes. Whenever the secure routes are accessed the key is validated. Only if the key is valid then the data/response is returned back to the api call. If not the response is not sent by which the data is secured for each call. This validation along with secure access channel like https takes care of the security aspect.

Code changes for above post are in the following link - https://github.com/svsrikanth2001/Dev_To_DevOps/commit/82aafea18a598b742b38b57e7e1fc435261b4f6f

Using the decrypted token data in WebPage

As the token has information of the user firstname and lastname we shall be using them in the dashboard page instead of username which is not ideal.

Following is the commit to the code change . We need to pull the data from Context provider and use inside our dashboard page.

https://github.com/svsrikanth2001/Dev_To_DevOps/commit/387f121387ded64969e176805974f9f28d87fbb6