JSON Web Token: A Global View

As a web developer have you heard about JSON Web Token(JWT)? Maybe you have a vague notice about it.
In this article, we’ll talk about what it is, why it is used, what are its advantages and how you can create it.

What is JSON Web Token?

JWT is an open standard. That means anyone can access it and use it. Its main purpose is to securely transfer information between two bodies (e.g. any two users, any two servers, etc.). A JWT is digitally signed which means the information it contains is verified and trusted ( think of signing for a package when a “server”, like UPS, comes to your door. The best part about JWT is that it is compact and fast. This means it is so small you can send it out in all sorts of convenient ways, e.g., in a URL, in a POST request, or a HTTP header.

In addition, the JWT is self-contained meaning it contains all the information it needs to accomplish its work of authentication and transmission of data--it does not have to query the database more than once. So for example, once a user has logged into your site and a JWT is created, every time that user requests something, they don’t have to log in over and over again to re authenticate themselves. Instead, they logged in once, a JWT was created and they are good to go for their entire session on your site.

What Is the Structure of the Actual JWT?

The JWT consists of three parts. Each part is separated by a period. Here is a generic representation of what a JWT looks like:

AAAAAAAAAAA.bbbbbbbbbbbbb.CCCCCCCCC

Now let me tell you about each of the three parts of the JWT:

I’ve represented the first part of the JWT with a series of “A”s. This first part is the header.

The header is just a JSON object with two fields like this:

{
  “alg”: “HS256”,
  “typ”: “JWT”
}

You see w key/value pairs in the JWT header. The first key/value pair with the key “alg” is an algorithm that tells how the JWT was encoded. The second key/value pair with the key of “typ”, meaning “type”, tells us that this is indeed a JSON Web Token.

Our header will be encoded in Base64 and that is what we’ll see instead of the “A”s above

The second part of the JWT that I’ve written with a series of “B”s is the payload.

The payload is also a JSON object that looks something like this:

{
  “sub”: “1234457”,
  “name”: “Daffy Duck”,
  “admin”: “true”,
}

The payload contains the claims. Claims are just the user details or other information like name, what role the user has, or any other information necessary for validation and authentication.

Our payload will be encoded in Base64 and the result will be what we’ll see in the “b”s in the sample JWT above.

The third and last part represented above with “C”s is the signature.

The signature looks like this:

HMACSHA256(
   base64UrlEncode(header) + “.” +
   base64UrlEncode(payload),
   secret)

So in this part of the JWT, we’re using HMACSHA256 encoding to encode our header to base64. Then we’ll concatenate that to our payload which will be encoded to base64. Lastly, we’ll attach a secret (think of it as a secret handshake).

Once we’ve done all this, below is an example of what a genuine JWT looks like. You see the header portion of the JWT below in red, the payload in purple and the secret (but don’t look!) in turquoise.

How does it all work now?

In the browser, the user signs in with their name and password.

A post request is sent from the browser to the server.

The server will make sure name and password match and are valid. If this is the case, the server will generate a JWT secret (3rd part of the JWT) and attach it to a new JWT. The server will then send that new JWT back to the user’s browser. So now, whenever the user makes additional requests of the server, there will be a JWT added to the user’s requests so the server will know everything is copacetic (does anyone ever say that anymore? I’m showing my age!) and can process those additional requests.

JSON Web Token offers us an open standard that allows us to transit information between two entities in a compact and self-contained way as a JSON object. We know the info is good because it has been digitally signed using a secret algorithm.

If you want to know more, here are “da docs”

In the meantime,

Keep on coding out your dreams!

Namaste,

Donny