https://youtu.be/0WH9oiYMS3M?embedable=true Introduction JWT authentication and session authentication are ways to authenticate users of your web app. In this article, we will explain the details of JWT, its structure, and its pros and cons. JWT stands for , and it is a commonly used stateless user authentication used to securely transmit information between client and server in a JSON format. JSON Web Token standard A JWT is encoded and not encrypted by default. It is digitally signed using a secret key known only to the server. It can be encrypted, but for this article, we will focus on signed, non-encrypted tokens. Structure of JWT A JSON Web Token consists of 3 parts separated by a period.
The header, the payload, and the signature.
Each section is base64 encoded. Header The header consists of a token type, which is JWT, and the signing algorithm used, such as HMAC SHA256 or RSA. { 
  "typ": "JWT",    
  "alg": "HS256"
} Payload The payload consists of the claims. Claims are statements about the user and additional data. For example, we have the time the token was issued. We also have its expiration time because tokens should expire. {
"iss": "example_issuer",
"sub": "user_id123",
"exp": 1644768000,
"iat": 1644744000
} Signature The signature is the most important part of a JWT. It is calculated using the header, the payload, and the secret, which are fed to the signing algorithm to use. signature = HMAC-SHA256(base64urlEncode(header) + "." + base64urlEncode(payload), secret_salt ) Steps The steps involved in a typical JWT authorization flow are as follows: The user signs in using a username and password or using, for example, Google or Facebook. The server verifies the provided credentials. 1- Authentication: The server will generate the JWT and send it to the client, which stores it for future use. 2- Token Generation & sending token to client: When the client wants to access a protected resource on the server, it sends the JWT in the Authorization header of the HTTP request. 3-Sending the Token to server: axios.get(URL, {
    headers: {
        'Authorization': 'Bearer ' + token,
    },
}) The server receives the request and verifies the JWT by checking its signature using the secret key that was used to sign it.
If the JWT is valid, the server extracts the information contained in it and uses it to determine what actions the user is authorized to perform. 4-Verifying the Token: If the user is authorized to access the resource, the server returns the requested data. If the user is not authorized, the server returns an error message. 5- Authorizing the Request: Advantages Lightweight Portable: It can be processed on multiple platforms, including web and mobile. JSON parsers are common in most programming languages. Protected against tampering because of the secret key stored on the server side. The server does not need to store any session information because of the stateless nature of the JWT token. Disadvantages On the server side, you should manually mark non-expired JWT as invalid on logout. A JWT can still be valid even after it has been deleted from the client. A method used is token blacklisting, which involves maintaining a list of invalidated tokens on the server side, preventing their reuse for authentication. For signed, nonencrypted tokens, we should not store sensitive info because JWT is protected against tampering but can be decoded and read by anyone. Can provide full access if intercepted. That’s why JWTs on the client side should be stored somewhere secure, for example, in the browser in an HttpOnly cookie.

The best videos on the Internet archived and shared on HackerNoon.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

JWT Explained in 4 Minutes, With Visuals

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Simplified Guide to TLS Certificates 📝

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

A Simplified Guide to TLS Certificates 📝

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps