DEV Community

Manav Bajaj
Manav Bajaj

Posted on

JWT Explained

If you are a web developer or a student studying web development you must have heard of the term JWT. These days, JSON Web Tokens (JWTs) play a pivotal role in web development, particularly in the authentication and authorization processes of web applications. In this article we will delve deep into the world of JWTs,their structure, how they work and the advantages they offer over traditional session tokens.

A JWT stands for JSON Web Token. JWTs are used for securely transferring information between parties as a JSON object. For those familiar with JavaScript, JSON is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications.

{
  "id" : "emp_007",
  "name" : "Gregor Samsa",
  "roles" : ["admin", "compliance"]
}
Enter fullscreen mode Exit fullscreen mode

Structure of JWT
In its compact form, JSON Web Tokens consist of three strings separated by dots. It looks something like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
Enter fullscreen mode Exit fullscreen mode

JWT consists of three parts:

  1. Header: The header consists of two parts: the type of token which is JWT and the hashing algorithm which will be used in forming the signature.
{
 "alg":"HS256",
 "typ":"JWT"
}
Enter fullscreen mode Exit fullscreen mode

This JSON is base64 encoded to form the first part of the JWT.

2.Payload: The payload consists of the claims which give information about the user. Claims consist of information such as user id, user name and the roles of user.Since a payload can easily be decoded it should not contain any sensitive information.

{
 "sub": "1234567890",
 "name": "Gregor Samsa",
 "admin": true,
 "iat": 1516239022
}
Enter fullscreen mode Exit fullscreen mode

The payload is base64 encoded to form the second part of the JWT.

3.Signature: The signature is formed by taking together the encoded header, the encoded payload, a secret and then signing it with the hashing algorithm which is specified in the header.

HMACSHA256(
  base64UrlEncode(header) + '.' +
  base64UrlEncode(payload),
  secret)
Enter fullscreen mode Exit fullscreen mode

The signature verifies that the sender of the JWT is who it says it is and that the message want changed in the way.

How JWT works?
So once a user logins the application using its credentials a JWT token is returned in the response. Like session tokens, JWT tokens can also be stored in the cookies of the browser.Now every subsequent request the user makes the JWT token will be sent along in the header of the request.Once the server receives the request it verifies the JWT using the signature. It uses the header and the payload received and the secret to generate a signature and if the generated signature matches the signature in the JWT it sends a successful response and gives the user access to the resources. If the generated signature doesn't match the signature in JWT the server sends back an error.

How is JWT different from session tokens?
In the case of session tokens, once the user logins the server creates a session and sends the session id in response.Now the session id is sent in every subsequent request.The server fetches the session corresponding to the session id and authorizes accordingly.
The major difference between JWT and session tokens is that JWT is stateless. Unlike session tokens nothing is stored on the server and the token is self-contained. This reduces the latency and the number of database calls. Also it makes the application more scalable. Since the token is self contained and nothing is stored on the server,the requests can be sent over to different servers by the load balancer without causing any issues.

Conclusion
I hope through this blog now you know a little more about JWTs.

Top comments (14)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Hello great article !

Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
manav-1011 profile image
Manav Bajaj

hey thanks i wasnt able to figure out how to add colors

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

That a better post, thanks 🥳

Collapse
 
mellis481 profile image
Mike E

ps. JWT is pronounced "jot". :)

Collapse
 
lebbe profile image
Lars-Erik Bruce

I pronounce it "yacht" 😂

Collapse
 
sanjeetsahu29 profile image
Sanjeet kumar sahu

I got more clearer picture about JWT, thanks "Manoj Bajaj"

Collapse
 
manav-1011 profile image
Manav Bajaj

Thanks

Collapse
 
tbroyer profile image
Thomas Broyer • Edited

How about the downsides to JWT? Particularly vs so-called session tokens? You can't say they're "better" without talking about the tradeoffs.

Collapse
 
naikg profile image
Nagesh Naik

Superb explanation..✨✨

Collapse
 
manav-1011 profile image
Manav Bajaj

Thanks!

Collapse
 
sjhjane profile image
Ben

Thanks

Collapse
 
snehalkadwe profile image
Snehal Rajeev Moon • Edited

Great article, very well explained.

Collapse
 
aryan_7703f980d900ddc07a1 profile image
aryan
console.log("Hello JWT");
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hasheendeberry profile image
Hasheen DeBerry

Great read. Your explanation was helpful. Thank you.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.