The rename feature allows you to easily change the name of a variable, function and even a class name. VS Code’s rename symbols feature saves a lot of time during refactoring sessions as it finds all usages of the symbols and applies the changes to all files in the open folder.

The rename feature suddenly stopped working while I was working on a TypeScript-based Angular project. I was getting the following error when I hit F12 on a function:

Typescript Server Error (3.5.1) entry.node.getSourceFile is not a function TypeError: entry.node.getSourceFile is not a function at entryToDocumentSpan (tsserver.js:1222213:41) ...

Here is a screenshot of the error:

This issue appears to occur when you have multiple TypeScript versions installed.

When you install Visual Studio Code, it generally installs TypeScript for you. In my case, the project I was working on had TypeScript installed through npmjs.

The solution for this problem is to select TypeScript version in Visual Studio Code.

You can do this by opening up the command palette (Ctrl + Shift + P) and type Select TypeScript Version…

From the available options, select the local TypeScript version. In my case, this is version 2.9.2.

Changing the TypeScript version causes TypeScript server to restart and fixes the rename symbols problem in Visual Studio Code.

The post How to Fix VS Code Rename Symbols Feature for TypeScript appeared first on onthecode.

In this post, I will be using jwt-decode, which is an open-source library to decode JWT tokens.

What’s a JSON Web Token

A JWT is simply a long string value, which is represents a JSON object with all the information about a user. Often, JWTs are initially generated by APIs and passed to the client to help authenticate subsequent requests. 

In a typical client-server architecture, the client gets the token from the server and keeps it locally. The token would be embedded it in each request that requires authentication. A JWT token consists of three parts: header, payload and signature.

They are small in size for transmission and are also secure due to the algorithms (HMAC, RSA) used to sign them. These reasons make JWT tokens a very attractive option for modern web & mobile applications.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1laWQiOiJmNjIxM2JjMC03OThlLTRmNWEtOGRiYy03ZWY2NmVkOTAzODQiLCJzdWIiOiJqb2guZG9lQG9udGhlY29kZS5jby51ayIsImp0aSI6IjdjZWI2Y2M2LTcxZDEtNGE1NS1hMDg1LTQ5ZWIwMjM5YjM0MyIsInVuaXF1ZV9uYW1lIjoiam9oLmRvZUBvbnRoZWNvZGUuY28udWsiLCJmYW1pbHlfbmFtZSI6IkRvZSIsImdpdmVuX25hbWUiOiJKb2huIiwiaHR0cDovL3NjaGVtYXMubWljcm9zb2Z0LmNvbS93cy8yMDA4LzA2L2lkZW50aXR5L2NsYWltcy9yb2xlIjoiQWRtaW4iLCJleHAiOjE1NDkyMjQ2NDYsImlzcyI6IlRPRE9BUFAuQVBJLkxpdmUiLCJhdWQiOiJUT0RPQVBQLkNsaWVudC5MaXZlIn0.IvDbQGRwsBiJfo76aRKzBRz1bujEO_k_W8VzlfMSL5E

As we can see above, each part of the token is separated with a dot.

• Header contains the algorithm and token type of the token.
• Payload contains all details about the user.
• Signature is for verifying the identity of the sender and ensure the message was not modified during transmission.

Stick the example token above into the online converter and we get the following:

{ “alg”: “HS256”,“typ”: “JWT”},
{ “nameid”: “f6213bc0-798e-4f5a-8dbc-7ef66ed90384”,
    “sub”: “joh.doe@onthecode.co.uk”,
    “jti”: “7ceb6cc6-71d1-4a55-a085-49eb0239b343”,
    “unique_name”: “joh.doe@onthecode.co.uk”,
    “family_name”: “Doe”,
    “given_name”: “John”,
    “http://schemas.microsoft.com/ws/2008/06/identity/claims/role”: “Admin”,
    “exp”: 1549224646,
    “iss”: “TODOAPP.API.Live”,
    “aud”: “TODOAPP.Client.Live”
}
HMACSHA256(base64UrlEncode(header) + “.” +   base64UrlEncode(payload), secret-key)

How to decode JWT

We can easily decode a JWT using the jwt-decode library.

First, install the package via NPM:

npm install jwt-decode --save

Simply import the dependency in your service:

import * as jwt_decode from 'jwt-decode';

You can now decode the token like so:

var token = 'eyJ0eXAiO... /// jwt token';
var decoded = jwt_decode(token); 
console.log(decoded);   


// Output:
{
  "nameid": "5293518a-7940-47af-a807-5459dbb0ee21",
  "sub": "johndoe@gmail.com",
  "jti": "dec3da1a-0510-4b21-99a6-fc82abb4debc",
  "unique_name": "johndoe@gmail.com",
  "family_name": "Doe",
  "given_name": "John",
  "company_id": "7236",
  "exp": 1642370653,
  "iss": "API.Live",
  "aud": "Client.Live"
}

The output is a JSON object, containing the full details about the user.

var givenName = decodedToken['given_name'];

The decoded value is persisted on the client application, to be sent in the Authorization header in subsequent requests to the API.

For example, we can choose to store it in localStorage so that it is accessible across different browser tabs:

var currentUser = JSON.stringify({ 
    isAdmin: 'Admin' === decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'],
    id: decodedToken['nameid'],
    fullName: `${decodedToken['given_name']} ${decodedToken['family_name']}`});

localStorage.setItem('currentUser',currentUser);

So there you have it! We just used the jwt-decode library to decode a JSON Web Token. This allows us to extract user details, which can be useful for identifying the specific information such as role details.

The post Easily Decode JSON Web Token (JWT) in Your SPA appeared first on onthecode.