CacheU
High Level Design

OAuth (Open Authorization)

A comprehensive guide to OAuth, explaining how modern applications securely delegate access without sharing passwords. Covers authorization flows, components, tokens, real-world examples, architecture diagrams, and JavaScript implementations.

OAuth (Open Authorization)

OAuth is an authorization framework that allows an application to access a user's resources on another service without sharing the user's credentials.

Instead of giving your password to a third-party application, OAuth allows the application to obtain limited access tokens that represent permission.

This approach is used almost everywhere on the internet today:

  • "Login with Google"
  • "Login with GitHub"
  • "Connect your Spotify to Discord"
  • "Allow a productivity app to access your Google Drive"

OAuth solves a major problem in distributed systems:

How can one application securely access resources from another application on behalf of a user?


The Core Problem OAuth Solves

Before OAuth existed, applications used a password sharing model.

Example:

A third-party email app wants to access your Gmail.

Old approach:


User → gives Gmail username & password → third-party app

Problems:

ProblemExplanation
Password exposureThird party stores your credentials
No scope limitationApp gets full account access
Hard to revokeChanging password breaks everything
Security riskIf the app is compromised, your account is compromised

OAuth replaces this with token-based delegated access.


Real World Analogy

Imagine checking into a hotel.

Instead of giving someone the master key to your room, you give them a temporary key card that:

  • Works only for your room
  • Works only for a limited time
  • Can be revoked anytime

OAuth tokens behave exactly like temporary access key cards.


OAuth Core Concepts

OAuth involves four main actors.

ComponentDescription
Resource OwnerThe user who owns the data
Client ApplicationThe application requesting access
Authorization ServerIssues tokens after user permission
Resource ServerAPI server that stores the user’s data

Example:

RoleReal Example
Resource OwnerUser
ClientSlack
Authorization ServerGoogle OAuth server
Resource ServerGoogle Drive API

OAuth Architecture

Diagram
flowchart LR User --> ClientApp ClientApp --> AuthorizationServer AuthorizationServer --> User User --> AuthorizationServer AuthorizationServer --> ClientApp ClientApp --> ResourceServer ResourceServer --> ClientApp ClientApp --> User

Step flow:

  1. Client asks user for permission
  2. User authenticates with authorization server
  3. Authorization server issues access token
  4. Client uses token to access resource server

OAuth Authorization Flow (High Level)

Diagram
sequenceDiagram participant User participant Client participant AuthServer participant API User->>Client: Login with OAuth Client->>AuthServer: Redirect for authentication User->>AuthServer: Login + approve access AuthServer->>Client: Authorization Code Client->>AuthServer: Exchange code for token AuthServer->>Client: Access Token Client->>API: Request with token API->>Client: Protected resource

OAuth Tokens

OAuth primarily uses tokens instead of passwords.

Token TypePurpose
Access TokenUsed to access APIs
Refresh TokenUsed to generate new access tokens
ID TokenIdentity information (OpenID Connect)

Example access token:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Most modern tokens are JWT (JSON Web Tokens).


OAuth Scopes

Scopes define what permissions an application receives.

Example:

ScopeMeaning
read_profileRead user profile
read_emailRead email
write_filesModify files

Example authorization screen:

This app wants permission to:

✓ View your email address
✓ Read your contacts

Scopes enforce principle of least privilege.


OAuth Authorization Flows

OAuth provides multiple flows depending on the type of application.

FlowUse Case
Authorization Code FlowWeb applications
Authorization Code + PKCEMobile apps / SPA
Client Credentials FlowService to service
Device Code FlowSmart TVs / IoT

1 Authorization Code Flow

Most secure and most common flow.

Used by:

  • Backend web applications
  • Microservices with backend servers

Flow Diagram

Diagram
sequenceDiagram User->>Client: Login with Google Client->>AuthServer: Redirect user User->>AuthServer: Login AuthServer->>Client: Authorization Code Client->>AuthServer: Exchange code for token AuthServer->>Client: Access Token Client->>API: Request resource

2 Authorization Code with PKCE

PKCE = Proof Key for Code Exchange

Used for:

  • Mobile apps
  • Single Page Applications

Why needed?

Because mobile apps cannot store client secrets securely.

PKCE introduces:

code_verifier
code_challenge

These protect the authorization code from interception.


3 Client Credentials Flow

Used for service-to-service communication.

Example:

Microservice A → calls → Microservice B

Flow:

Diagram
sequenceDiagram Client->>AuthServer: Request token AuthServer->>Client: Access token Client->>API: Request resource API->>Client: Response

No user involved.


OAuth Token Lifecycle

Diagram
flowchart LR AuthServer --> AccessToken AccessToken --> Expiration Expiration --> RefreshToken RefreshToken --> NewAccessToken

Typical lifecycle:

TokenLifetime
Access Token5–60 minutes
Refresh TokenDays or months

OAuth vs Authentication

Important distinction.

ConceptMeaning
AuthenticationWho you are
AuthorizationWhat you can access

OAuth handles authorization.

For authentication, OAuth is extended with OpenID Connect (OIDC).


OAuth + OpenID Connect

OpenID Connect adds identity layer.

Additional token:

ID Token

Contains:

{
 "sub": "12345",
 "email": "user@example.com",
 "name": "John Doe"
}

This is how "Login with Google" works.


OAuth Token Validation

Resource servers validate tokens before granting access.

Two common methods:

MethodDescription
JWT validationVerify signature locally
Token introspectionCall authorization server

OAuth System Architecture

Diagram
flowchart TB User subgraph Client Frontend Backend end subgraph AuthSystem AuthorizationServer TokenService end subgraph APIs ResourceServer1 ResourceServer2 end User --> Frontend Frontend --> Backend Backend --> AuthorizationServer AuthorizationServer --> TokenService Backend --> ResourceServer1 Backend --> ResourceServer2

OAuth in Microservices

In large systems:

  • API Gateway validates tokens
  • Services trust gateway

Architecture:

Diagram
flowchart LR Client --> APIGateway APIGateway --> AuthServer APIGateway --> ServiceA APIGateway --> ServiceB APIGateway --> ServiceC

Benefits:

  • Centralized authentication
  • Reduced complexity
  • Security enforcement

JavaScript Example (OAuth Authorization Code Flow)

Step 1 — Redirect user to authorization server

const authUrl = `https://auth.example.com/oauth/authorize?
response_type=code
&client_id=CLIENT_ID
&redirect_uri=http://localhost:3000/callback
&scope=read_profile`;
 
window.location.href = authUrl;

Step 2 — Receive authorization code

http://localhost:3000/callback?code=AUTH_CODE

Step 3 — Exchange code for token

const response = await fetch("https://auth.example.com/oauth/token", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    grant_type: "authorization_code",
    code: authCode,
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET
  })
});
 
const data = await response.json();
console.log(data.access_token);

Step 4 — Access protected API

const apiResponse = await fetch("https://api.example.com/user", {
  headers: {
    Authorization: `Bearer ${accessToken}`
  }
});
 
const user = await apiResponse.json();
console.log(user);

Security Best Practices

PracticeWhy
Use HTTPSPrevent token interception
Short token expirationReduce damage if leaked
Use PKCESecure mobile apps
Scope restrictionsLimit access
Refresh tokens securelyAvoid long lived tokens

Common OAuth Vulnerabilities

VulnerabilityDescription
Token leakageToken exposed in logs
Redirect URI attacksMalicious redirect
CSRF attacksForged auth requests
Token replayReusing stolen tokens

Example: Login with Google

Flow:

  1. User clicks Login with Google
  2. App redirects to Google
  3. User logs in
  4. Google returns authorization code
  5. App exchanges code for tokens
  6. App retrieves user profile

Architecture:

Diagram
sequenceDiagram User->>App: Login with Google App->>GoogleAuth: Authorization request User->>GoogleAuth: Login GoogleAuth->>App: Authorization code App->>GoogleAuth: Exchange code GoogleAuth->>App: Access + ID token App->>GoogleAPI: Fetch profile GoogleAPI->>App: User data

When to Use OAuth

OAuth is ideal for:

ScenarioExample
Third-party loginLogin with Google
API accessGitHub API
Microservice securityInternal service authentication
Delegated permissionsAccess user data safely

Key Takeaways

  • OAuth enables secure delegated authorization
  • Users never share passwords with third parties
  • Applications use access tokens instead
  • Supports multiple flows depending on application type
  • Often combined with OpenID Connect for authentication

OAuth is a fundamental building block of modern distributed systems, enabling secure integrations across thousands of applications on the internet.