The Complete Guide to JSON Web Tokens

The Complete Guide to JSON Web Tokens

In this article, we will take a look at what JSON Web Token is all about and hands-on guide to JSON Web Token Authentications

In this article, we will take a look at what JSON Web Token is all about and hands-on guide to JSON Web Token Authentications

JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties.

We will start with a basic explanation of JWT, then look at its structure, and finally create a simple server that will take some data and insert it into a JWT.

What is a JSON Web Token and why do we need it?

A **JSON Web Token (JWT) **is a safe, compact, and self-contained way of transmitting information between multiple parties in the form of a JSON object.

Say you want to log in to an app, like say Tinder. Tinder allows users to log in using their Facebook profile. So when the user selects the option to log in using Facebook, the app contacts Facebook’s Authentication server with the user’s credentials (username and password).

Once the Authentication server verifies the user’s credentials, it will create a **JWT **and sends it to the user. The app now gets this JWT and allows the user access to its data.

JWT’s Structure

A JSON Web Token consists of three parts that are separated by a “.”. They are:

  • Header
  • Payload
  • Signature

The header typically consists of two parts: the token’s type, and the hashing algorithm that is being used.

{
  "alg": "HS256",
  "typ": "JWT"
}

The payload is where the actual information that we want to send is stored. Here is an example of a simple payload. Know that payloads can be way more complicated than this to ensure better security.

{
  "sub": "65165751325",
  "name": "Rajat S",
  "admin": true
}

The signature is used to verify that the message was not altered before reaching its destination. This is usually done by using private keys.

These three parts are usually encoded into three Base64-URI strings that are separated by a . in between them.

To easily decode, verify, generate, or just play around with JWTs, check out the JWT.IO Debugger by Auth0.

Now that we have a basic understanding of what a JSON is, lets take a look at how to build a simple authentication server that will issue JWT, which we will then use to access an API.

Getting Started

To get started, lets build a simple web server. First, install the express library onto your system using NPM. Simply open a command terminal and run the command:

$ npm install express

Next, create a new folder named jwt-auth. You can name it something else if you want.

$ mkdir jwt-auth
$ cd jwt-auth

Inside this folder create a new file called index.js. This where we will write our code to set up a web server that will have a single route that displays the current date and time and a handler for 404 pages.

Open a code editor (I ❤ VS Code) write the following code inside it:

const express = require("express");
const app = express();
const PORT = 8888;
app.get('/time', (req, res) => {
  const time = (new Date()).toLocaleTimeString();
  res.status(200).send(`The Time is ${time}`);
});

Here, we are first importing the express library that we had just installed. Then I am creating a new const called app that will use the express library. I am also creating another const called PORT which will contain the port number on which our server will run. I have selected 8888 as the port number. You can use any other port number if you want as well.

Next, I have created a new route called time. This route takes a callback with response and request as parameters. In short, this route will display the current local time to the user.

Let’s also add a route for the case when tell the server to takes us anywhere but to time. This is called a **catchall route. **I want the server to return a 404 error on this route. To implement this, write the following code into our index.js file:

app.get("*", (req, res) => {
  res.sendStatus(404);
});

One last thing left to do. We have not told our server on which port to listen. We have initialized the PORT number as 8888. But we have yet to actually use this const in our code. To do this, use the app.listen method as shown below:

app.listen(PORT, () => {     
  console.log(`Server is running on port ${PORT}.`); 
});

With that done, we can start the server by typing node . in our command terminal. Then, go to localhost:8888 and you will find that it displays a Not Found message. Add /time to the URL and it will not display the local time as shown below:

In short, we have built an express server that will show us the local time at /time and a 404 error on any other route.

Implementing a Login Route

Since this article is about JWT Authentication, let’s implement a route called login. Unlike the routes in the previous sections, which used get and listen, this route will be created using post.

app.post("/login", (req, res) => {
  const user = req.body.username;
  res.status(200).send(`User's name is ${user}`);
})

But currently our server cannot read the body of the requests. To solve this, we will install a new middleware library called body-parser.

$ npm install body-parser

Then just like we did with the express library, import it into the index.js file using the require syntax.

const bodyParser = require("body-parser");

We can now tell express to use body-parser to handle all the JSON responses as shown below:

app.use(bodyParser.json());

Now start the server by running the node . command.

In order, to test this new route, we will need to use POSTMAN. Install this into your system, if you don’t already have it.

Inside POSTMAN, create a post request to the login route as shown below:

Inside the body, create a JSON Object as shown below:

Clicking on send should get you the following response:

Issuing JWTs

Now that we have built a simple server that can handle GET, and POST requests, let’s build a simple JWT issuer.

Lets start by creating a new array called users that will contain a couple of users along with their passwords as shown below:

const users = [
  {id: 1, username: "clarkKent", password: "superman"},
  {id: 2, username: "bruceWayne", password: "batman"}
];

Lets rewrite the /login route. Here, we will first check if the submitted request contains both a username and password. If that is not the case, then the server should respond with a 400 status.

app.post("/login", (req, res) => {
  if (!req.body.username || !req.body.password) {
    res.status(400).send("Error. Please enter the correct username and password");
    return;
  }

Next, if the request valid, we will need to check if the user in the request is present in our users array. In the same /login route below the if statement, write:

const user = users.find((u) => {
  return u.username === req.body.username && u.password === req.body.password;
});

But if the user in the request is not present in the users array, we need to respond with a status code of 401. Again in the same /login route, write:

Before going forward, let’s install another library called the jsonwebtoken.

$ npm install jsonwebtoken

At the top of the index.js file, write the require statement for the jsonwebtoken library as shown below:

const jwt = require("jsonwebtoken");

We will use this library to create a JSON Web Token for every valid user. To do this, we will create a new const called token using the sign method from the jsonwebtoken library. Note that we are still writing the code inside the /login route.

const token = jwt.sign({
  sub: user.id,
  username: user.username
}, "mykey", {expiresIn: "3 hours"});
res.status(200).send({access_token: token})

Now go to POSTMAN, and send a post request with the following JSON object in its body.

{
  "username": "clarkKent",
  "password": "superman",
}

The result will be a JSON Web Token as shown below:

If you copy the value of access_token into the JWT.IO Debugger, you will see that it is the same username and password, but with a few extra things.

Side note — CORS

In some cases where the API that your app tries to access is running on a different server than that of your app’s, will return some kind of **Failed To Load **error.

To prevent this from happening, we can install another library called cors

$ npm install cors

Then at the top of the index.js file, write the require statement for this library as shown below:

const cors = require("cors");

Then similar to what we did with the body-parser library, we will tell the express to use cors as shown below:

app.use(cors());

Provide User Access To An API using JWT

Here, we will create a new API with two routes. The first route will be public, while the second one will require the user to be authenticated using **JWT **into order to access it.

Let’s create a new file in the jwt-auth folder called api.js. In this file, write the following startup code:

const express = require("express");
const bodyParser = require("body-parser"); 
const app = express();
const PORT = process.env.API_PORT || 8888;
app.use(bodyParser.json());   
app.get("*", (req, res) => {    
  res.sendStatus(404);
}); 
app.listen(PORT, () => {    
  console.log(`Server is running on port ${PORT}.`);
});

Let’s create a new route called '/asset. This will be public route that I had mentioned earlier, and will simply return a status code 200.

app.get("/asset", (req, res) => {
  res.status(200).send("Everybody can see this");
});

The second, secret route will be /asset/secret and it will be secured with a jwtCheck as shown below:

app.get("/asset/secret", jwtCheck, (req, res) => {
  res.status(200).send("Only logged in people can see me");
});

Since the index.js file is set to run on the PORT 8888, we need to set some other PORT for this file. To do that, open the command terminal and run the command:

$ export API_PORT=5555

Even though we have said that the /asset/secret route is secure, we haven’t actually implemented it. To do so, we need to install another middleware library called express-jwt.

$ npm install express-jwt

Then at the top of api.js file, write the require statement for this library.

const expressjwt = require("express-jwt");

We will use this library to define the jwtCheck. We will use jwtCheck to check if the signature matches the one that we got from our authentication server. If you recall, we have named it as “mykey”.

const jwtCheck = expressjwt({    
  secret: "mykey"
});

Run the node api.js command in your terminal. To check if the authentication works as it should, go to POSTMAN and run the GET request on localhost:5000/asset. The response should be Everybody can see this.

Then run the GET request on localhost:5000/asset/secret. What you should get is a big error code that looks something like this:

To solve this, go to the Authentication tab in POSTMAN, and select the Type as Bearer Token. Then enter the value of Token as the one that we had received in the previous sections.

Conclusion

Compared to other web tokens like Simple **Web Tokens (SWTs) **or Security Assertion Markup Language (SAML), **JWT **is much simpler as it is based on **JSON **which is easier to understand than XML.

If we encode the JSON, it will become even more smaller in size than SAML, making it easier to pass in HTML and HTTP environments.

Security wise, SWTs use a single key, whereas both JWT and SAML use a public and private key pair for better authentication.

Talking from a usage point of view, JWTs are used at Internet scale. This means that it is easier to process on the user’s devices, be it laptops or mobile.

Apart from authenctication, JSON Web Token are a great and secure way of transmitting data between multiple parties. The fact that JWTs have signatures makes it easier for everyone to easily identify the sender of information. All you need is the correct key.

Thanks for reading! I hope this post helped you understand how to implement a simple JSON Web Token Authentication in your application. Feel free to comment and ask/suggest anything!

Understanding JSON Web Token Authentication

Understanding JSON Web Token Authentication

In this article, you'll learn the ‘Why’, ‘What’ and ‘How’ for Authentication in Web App using JWT (JSON Web Token)

In this article, you'll learn the ‘Why’, ‘What’ and ‘How’ for Authentication in Web App using JWT (JSON Web Token)

When making a website, you may have come across an array of problems. Among which, authentication while logging in a User, comes as a major headache to developers, primarily to those who are just starting out. Tokens and Sessions were created to ease with this very problem.

A Token is a piece of data that has no meaning or use on its own, but when combined with the correct Tokenization system(a process of replacing sensitive data with unique identification symbols that retain all the essential information about the data without compromising its security) becomes a powerful tool for authentication. Whereas, a Session is a system to manage the duration after which a user is logged out automatically.

Usually, we use HTTP protocols while developing and browsing web applications. For proper implementation of tokenization, we need the server to retain some information or status about the user for the duration of multiple requests, but HTTP is stateless protocol, meaning HTTP does not require the server to store information. If you login for one request, the server will have already forgotten you and you will need to login again to make another request. As you can imagine, this can get pretty annoying when performed repeatedly.

To overcome the stateless nature of HTTP requests, we could use either a session-based or token-based authentication.

So, how is session-based authentication implemented for overcoming the stateless nature of HTTP? Session-Based authentication is implemented in two parts:

  • An object is stored on the server that remembers if a user is still logged in, it can be a reference to the user profile or maybe a session_ID.
  • Cookies on the client-side store's session_ ID that can be referenced on the server against the session _ID stored on the server.

Now you might be wondering how token based authentication helps to overcome the stateless nature of HTTP?

With token based authentication whenever the user sends a request to a server, each request is accompanied by a signed token which the server verifies for authenticity and only then responds to the request.

Most people will prefer token-based authentication(like JWT) for two major reasons; scalability and flexibility. With session-based authentication, the sessions are stored in the server’s memory so scaling becomes an issue when there is a huge number of users using the system at the same time. But with token-based authentication, there is no issue with scaling because the token is stored on the client side. Also, token generation is decoupled from token verification, allowing you the option to handle the signing of tokens on a separate server or even through a different company such us Auth0 and within the token payload you can easily specify user roles and permissions as well as resources that the user can access.

What is JWT?

JSON Web Token (JWT) as the name suggests is token based authentication which is an open, industry standard (RFC 7519) method for representing claims securely between two parties. "Open" meaning anybody can use it. In JWT, the token is encoded from a data payload using a secret. Since the token is encoded you should avoid keeping sensitive information on the payload. The token, when generated, is passed to the client. Whenever the client sends a request to the server, the token is passed along with a request, then the server validates the token and sends back the response. The following diagram shows how JWT works:

The summarization of the above picture is given below:

  1. A client signs-in using a valid username/password combination to the server.
  2. The server validates the authentication. If validation is successful, the server creates a JWT token and the client gets JWT token in the response body, else gives an error response.
  3. Client stores that token in local storage or session storage. Now if the client wants to make any request, JWT token must be passed in request headers like this. Authorization: Bearer
  4. Server upon receiving the JWT token validates its authenticity and sends the successful response or error response based on its validity.

If you want to know more about JWT and its structure please refer to its official documentation https://jwt.io/introduction/

How to use JWT?

There are many libraries available for JWT. The main function of any of these libraries is to generate JWT and validate JWT. You may use any one of these libraries.

Here, I have picked NPM library called jsonwebtoken. This library is primarily for Node.js.

Firstly, let's start by installing jsonwebtoken.


Installing JWT

After installing jsonwebtoken we need to import it to start using it.


Verifying JWT

The above code generates a JWT token which is encoded but not encrypted, so be careful not to include any sensitive information. The jwt.sign function takes the payload, secret and options, as its arguments. The payload contains information about the user and can be used to find out which user is the owner of the token. Options can have an expire time, until which, a token is deemed as valid. The generated JWT token is a string, which may look something like this:


JWT Token

After generating JWT token, it is returned to the client and it must be passed in Authorization header in order to make any request, access resources or to verify that client. The server must always verify the token before giving any success response or an error response.


Verifying JWT

Since JWT token is encoded it can be easily decoded and hence, easily altered. This may come as a disadvantage to most people, but when some changes are made to token, the signature of the token also changes. A Signature is the function of encoded payload, secret, and algorithm. Which is already being used for the validation of the JWT, so you need not worry about it.

All of this technical jargon is to show you how JWT is better than using a Session-based authentication, and why JWT has become an essential tool for authentication in the privacy-stricken world of today, where data is becoming more and more valuable.

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

Explore JSON and how JavaScript Objects can be used to access data within JSON data format and output to your web page

Guide to learning how to use JavaScript Objects and JSON data. JSON is the most popular format for data exchange between applications. If you are interested in connected to a web API chances are its JSON formatted. Learn to use AJAX to connect and bring JSON data into your JavaScript!

This course shows you how to work with JSON formatted data, output content, loop JSON data, Parse JSON and a whole lot more.

JSON (JavaScript Object Notation) is a syntax for data. JSON is easier to use than XML and human readable. Most modern web APIs output data in JSON formats. It's a lightweight data interchange format that is quickly becoming the default format for data exchange on internet today! JSON is lightweight, language independent and easy to read and write. JSON is better than XML and more popular!

Within the lessons of this course we will explore

  • JavaScript data types used to hold variables and how they work
  • JSON and how to write JSON data
  • How to add values into a JSON object
  • Accessing JSON data and bringing it into JavaScript
  • JavaScript JSON parse and stringify methods
  • Adding JSON to local storage
  • Retrieving back data within JSON formats, updating and working with JSON
  • Connecting to a web API using fetch
  • Retrieving JSON data from a web API and outputting the results into your web page
  • Iterating threw multiple results from an API
  • Google Spreadsheet data as JSON and how to practice retrieving data
  • All of the source code and resources are in included
  • Explore different methods of working with the JSON data stringify and parsing
  • How JavaScript objects can use Arrays to hold multiple items
  • How JavaScript arrays work and store data

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript and JSON

The Complete JavaScript Course 2019: Build Real Projects!

JavaScript Programming Tutorial | Full JavaScript Course for Beginners 2019

The complete beginner’s guide to JSON

The Complete Guide to JSON Web Tokens

JWT Fundamentals for Beginners

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

New ES2019 Features Every JavaScript Developer Should Know

Mobile App Development Company India | Ecommerce Web Development Company India

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

We are custom eCommerce Development Company working with all types of industry verticals and providing them end-to-end solutions for their eCommerce store development.

Know more about Top E-Commerce Web Development Company