How to set up JWT in a Node application

credits to unsplash and Markus Spiske

In REST APIS we have to protect some of our endpoints to control who can request information from those endpoints. JSON Web Token is a popular npm package to serve that purpose. You can read more about it here https://www.npmjs.com/package/jsonwebtoken. In this article, we will set up an endpoint that will sign us a jwt token when requested and another route that will only send back information if it found that token attached to the request headers.

We will start by making a node application.

If you are new to node and are not familiar with how to install node, consider reading this doc https://github.com/nvm-sh/nvm#install--update-script which will allow you to download node using nvm.

Moving forward, we will install some required packages to make our work easier i.e. express (https://expressjs.com/) and nodemon (https://www.npmjs.com/package/nodemon).

installing express and nodemon

Now we will create a file named app.js and write some boilerplate code using express to create a server listening to a specified port and run it with nodemon so we don’t have to restart it whenever we change something.

creating a file using terminal

we made two routes, one will send us a token and the other will check that token

write a start script in package.json using nodemon

Oops! got an error

We got an error that to load an ES module we should write “type”:”module” in package.json.

error resolved!!

Our app is successfully running now

Alright, let's start out our jwt journey now. First, we will install jsonwebtoken npm package (https://www.npmjs.com/package/jsonwebtoken).

installing jsonwebtoken

Now we will sign a jwt token and store its value in a constant.

Generally, we save a user’s info along with a secret which can also be a random string inside a jwt token. Now when we make a GET request to this endpoint i.e. ‘/route1’ we will get the token.

Now we will copy this token and create our protected route, which will only allow access if it found the token in the request. In our protected route we will decode the token through a function provided by jsonwebtoken.

Decode token, if not successfully respond with “Unauthorized” message

One important thing, we need to provide the same secret that we provided while signing the token i.e. “your jwt secret code or any random string” in the above case. When we send a POST request to this endpoint with the token saved in the body of that request, we will get this reponse.

That was not what we expected!

Hmm, we couldn’t find body in our request. What could have gone wrong? Oh boy! we need to parse our request body.

middleware to parse request body

Try again

Success!!!

We successfully decoded our jwt token and receive the data we saved inside our token. What will happen If I send an invalid token?

We forgot to set the correct response code for an invalid token, let's be careful in our next articles 😐. Have we reached our goal? No, it’s not a good way to send tokens in the body of the request. A better way would be to send it insideAuthorization HTTP header as Bearer token so we can attach our token in GET requests as well.

Now we will send our token in the authorization header whose role is to specify an auth scheme between the client and the server. Let's modify our route1 as well. Our response will first specify the type of token i.e. Bearer and then the token itself.

Now protect your routes with jwt and build awesome applications. See you in the next article.

Source code: https://github.com/Xebec19/jwt-medium