Blog/NotesConcept

Explained Web Authorization Techniques - Session & JWT

Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)

Intermediate

Anuj Sharma

Last Updated Jan 2, 2025


Advertisement

Authorization is about validating the user's permission to access the resources, in case of failure HTTP code "403 Forbidden" is returned.

Authorization Techniques

There are 2 major techniques for authorization, here are the details

1. Session-based authorizations - using Session Id

 Authorization flow
  1. The client sends a username & password to the server. The server validates credentials against existing credentials stored in the DB

  2. On successful authentication server generates a unique session ID (signed) and stores session_id on the server.

  3. The server sends back session_id which will be set as part of a cookie in the browser.

    HTTP OK 200 set-cookie
  4. All subsequent HTTP calls include session_id and request as part of the COOKIE request header.

  5. The server validates session_id as part of the cookie against the stored cookie if valid then authorize the user to process that HTTP request.

 Major drawbacks
  1. Hard to load balance - Since this is a stateful mechanism, it requires the server to store the session ID, but in the case of multiple servers, this session is invalidated if the request is routed to another server by an API gateway or load balancer.
    💡Solution - The above problem can be solved using common caching like Redis where all the servers will store and access session_id from Redis cache.
  2. Prone to CSRF attacks - Session-based authentications are prone to CSRF attacks. This can be prevented by using the X-CSRF-Token header.

  3. Access cookie by client-side application - Cookies can be accessed by any client-side application that can use the Cookie details to create a new session programmatically.
    💡Solution - Cookies can be secured using HTTP-Only, same-origin options along with a Set-Cookie header so that it can't be accessible through JavaScript code.

2. Token-based authorization (Stateless) - JWT token

 Authorization flow
  1. The client sends a username & password to the server. The server validates credentials against existing credentials stored in the DB.

  2. On successful authentication server generates a unique JWT Token, which contains data(payload) related to the user and signs that token.

  3. This Token is sent back to the user as part of a successful HTTP response with the Authentication HTTP header

    HTTP 200 OK Authentication: Bearer [Token]
  4. Users save this token in a cookie or local storage

  5. The user sends this token along with API requests in subsequent requests as part of the Authentication header.

  6. The server validates the JWT token by decoding information from the JWT token. If the token is valid then the server authenticates that token and processes the API request.

 Major drawbacks
  1. Secret must be shared between servers so that the server can extract the user details.

  2. In case of invalid Tokens(forgot password), requires a list of invalid tokens which makes a more sort of stateful kind.

  3. Token-based authentications are prone to XSS attacks.

  4. The token is not opaque and contains payload information, and this can be extracted from the token.

  5. No sensitive information can be mentioned as part of the payload.

  6. The generation of a new signature is essential a frequent intervals to avoid Resource Forgery attacks


Share this post now:

Advertisement

💬 Comments (1)

Login to comment

Nidhi Sharma

22 Jun, 2025

Very helpful to understand web Authorization.

Advertisement

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Advertisement


Other Related Blogs

20+ Frontend Machine Coding Interview Questions (JS + React)

Anuj Sharma

Last Updated Jun 27, 2025

A detailed list of 20+ most asked Frontend Machine Coding Interview Questions and resources both in JavaScript & React. Also covers expected functional/Non-functional requirements in this Interview.

Master Hoisting in JavaScript with 5 Examples

Alok Kumar Giri

Last Updated Jun 2, 2025

Code snippet examples which will help to grasp the concept of Hoisting in JavaScript, with solutions to understand how it works behind the scene.

Best Cheat Sheet for Frontend Machine Coding Interview Round

Anuj Sharma

Last Updated Jun 13, 2025

A comprehensive cheat sheet for the Frontend Machine Coding Interview Round, which helps to revise all the important machine coding & UI design concepts before the interview.

HTTP/2 vs HTTP/1.1: What's the Key Difference?

Anuj Sharma

Last Updated Jan 29, 2025

Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1

Part 1: From Zero to Published — How I Built and Published My First React NPM Package

Akash Deep Chitransh

Last Updated May 26, 2025

Learn how to build and publish your own NPM package with Rollup, testing, and troubleshooting. Stay tuned for part 2: building a React state management library!

Understand JavaScript Date Object with Examples (for JavaScript Interviews)

Anuj Sharma

Last Updated Jan 9, 2025

Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved