Frontend System Design: Authentication Flows -- Guide

Authentication Flows — Frontend System Design Guide A comprehensive guide to authentication flows (Session, JWT, OAuth 2.0, SSO) from a frontend engineer's perspective . Table of Contents Authentication vs Authorization Session Based Authentication JWT (JSON Web Token) Authentication OAuth 2.0 Single Sign On (SSO) Comparison Table Auth Flows Interview Cheat Sheet 1. Authentication vs Authorization Concept Authentication (AuthN) Authorization (AuthZ) What Who are you? What can you do? When At login / token exchange On every protected resource access Example Entering username + password Checking if user has admin role Frontend role Collect credentials, store tokens Guard routes, hide/show UI per role 2. Session Based Authentication How It Works ┌──────────┐ ┌──────────────┐ ┌──────────┐ │ Browser │──POST──▶│ Server │──────▶ │ DB / │ │ │ /login │ (creates │ │ Session │ │ │◀─Set────│ session) │◀────────│ Store │ │ │ Cookie │ │ │ (Redis) │ └──────────┘ └──────────────┘ └──────────┘ Subseque