App’s authentication with JSON web token

App’s authentication with JSON web token
Average rating: 0
(0 votes)

Security measures is something you can’t skip while creating your application. Too many accounts have been hacked or stolen, too many people do care if somebody will have access to what they share with others. That makes security among first priorities if you build a web application. Let’s talk about app’s authentication with JSON web token.

Authentication is one of the essential part of every application. Despite, there are various ways to authenticate the user, in our article we will talk about token based authentication using node.js application. We will use JSON web tokens.

JWT (JSON Web Tokens) is a standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. It’s compact and self-contained, which means it contains all information about the user.

One of the JWT advantages is a single key: there is no need for database calls every time to verify the user. It will decode tokens provided by any user. Another great thing is portability: same token can be used among different domains or different platforms.

You can find more about how JWS works and its structure in the original article How to simplify your app’s authentication by using JSON Web Token. Here we will provide you with a basic guide on how to build a node.js application with few routes and authenticate them using tokens.

Here we go!

  1.  Open terminal to start a new project in a directory. After providing required details process will create package.json
  2.  After installing the dependencies our package.json will look something like this:
    Installing dependencies. App’s authentication with JSON web token
  3.  Create server, serving at port 3000 which sends the index.html when / route is called. We will also create /login API which authenticates the user and a /getusers API which gives list of users. Let’s create some data and store it in the ‘users’ array (later you may also replace them with database calls)
  4. Next step is to build the Client using HTML, Bootstrap and JavaScript. It will consist two parts: login screen and a place to retrieve users. Login screen will contain text boxes for email and password and a button to send request. We will also add a text box and button to pass the token and get list of users
  5. That’s all.  Start the application.

But the app is not safe yet. You can see that even if you don’t pass the token you can get the list of all users. To make it eventually secure let’s add authentication to /getusers API so that users with valid token can retrieve users list.

Adding Authentication:

  1. Include JWT to the server.js file

    var jwt=require(‘jsonwebtoken’);

  2. Pass the payload and a secret string to sign function and create a token

    var token=jwt.sign(<user>,<secret>);

  3. When the token is created successfully pass the same to client

    res.json({token:token});

    Token can be stored on client side. Let’s change the “getlist” function so that we can pass token to the server when we want to access users list. Let’s add a middleware to authenticate /getusers or any secure route that is added in future. Make sure that all routes that needs authentication is below the middleware. In server.js, first we have login route which creates token. After that we have middleware which we will use to verify the token. All the routes which needs authentication are after middleware. Make sure you do this in the right order.

  4. To decode, you pass the token and secret key to verify function. Function will return error if the token is invalid or success if token is valid.

Call next() so that respective routes are called. You can check how the final server.js and the final index.html will look like in the original article we mentioned above. Also find the complete code on GitHub.

That’s it. Now when you have a simple example of how to use token to authenticate your app you can try it.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111