DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
  1. Home
  2. Articles
  3. Frontend Engineering
  4. Authentication Patterns: JWT, Sessions, and OAuth 2.0
XLinkedInReddit
MediumFrontend Engineering

Authentication Patterns: JWT, Sessions, and OAuth 2.0

D
DevPrep Team
February 10, 2026·2 min read·0
Table of Contents
  • Session-Based Authentication
  • JWT (JSON Web Tokens)
  • The Refresh Token Pattern
  • OAuth 2.0 Flow
  • Security Best Practices

Authentication is the foundation of security. Here's how we approach it at Google.

Session-Based Authentication

Server creates a session, stores it in memory/database, sends a session ID cookie to the client.

// Server sets cookie
Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Strict; Path=/

// Every subsequent request includes the cookie automatically
Cookie: session_id=abc123

Pros: Server can revoke sessions instantly. HttpOnly cookies prevent XSS theft.
Cons: Server must store session state. Doesn't scale well across multiple servers without shared storage.

JWT (JSON Web Tokens)

// JWT structure: header.payload.signature
eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMTIzIiwiZXhwIjoxNjk5MDAwMDAwfQ.signature

// Payload (claims)
{
  "user_id": "123",
  "role": "admin",
  "exp": 1699000000,  // expiration
  "iat": 1698900000   // issued at
}

Pros: Stateless, works across services, contains user info.
Cons: Can't be revoked until expiration. Larger than session IDs. Must handle refresh tokens.

The Refresh Token Pattern

// Short-lived access token (15 min) + long-lived refresh token (7 days)
// Access token: sent in Authorization header
// Refresh token: stored in HttpOnly cookie

async function refreshAccessToken() {
  const res = await fetch("/auth/refresh", { credentials: "include" });
  const { accessToken } = await res.json();
  return accessToken;
}

OAuth 2.0 Flow

  1. User clicks "Login with Google"
  2. Redirect to Google's authorization server
  3. User grants permission
  4. Google redirects back with authorization code
  5. Your server exchanges code for access token
  6. Server creates session or JWT for your app

Security Best Practices

  • Store JWTs in HttpOnly cookies, not localStorage
  • Use short expiration for access tokens (15 min)
  • Implement CSRF protection with SameSite cookies
  • Always validate tokens on the server, never trust the client
  • Use PKCE for public clients (SPAs, mobile apps)

Related Articles

MediumFrontend Engineering

System Design #12: Design a Multi-Step Form Wizard

7 min read
MediumFrontend Engineering

Mastering Senior-Level JavaScript Interview Concepts

2 min read
MediumFrontend Engineering

System Design #9: Design a Collaborative Text Editor

9 min read

Comments (0)

Sign in to leave a comment.

No comments yet. Be the first to comment.

Table of Contents

  • Session-Based Authentication
  • JWT (JSON Web Tokens)
  • The Refresh Token Pattern
  • OAuth 2.0 Flow
  • Security Best Practices

Series

View all Frontend Engineering articles →

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.