Flow	Client Type	Tokens	Security
Authorization Code	Server-side apps	Access + Refresh	★★★★★
Code + PKCE	SPAs, Mobile	Access + Refresh	★★★★★
Implicit ⚠️	Legacy SPAs	Access only	★★☆☆☆
Client Credentials	Machine-to-machine	Access only	★★★★☆

Flow

Client Type

Tokens

Security

Authorization Code

Server-side apps

Access + Refresh

★★★★★

Code + PKCE

SPAs, Mobile

Access + Refresh

★★★★★

Implicit ⚠️

Legacy SPAs

Access only

★★☆☆☆

Client Credentials

Machine-to-machine

Access only

★★★★☆

Understanding OAuth 2.0

The industry-standard protocol for secure authorization in modern applications.

What is OAuth 2.0?

OAuth 2.0 is an authorization framework that enables third-party applications to obtain limited access to user accounts without exposing passwords.

Delegates authentication to identity providers
Issues scoped access tokens
Supports multiple grant types for different use cases

Key Components

Resource Owner: The user who owns the data
Client: Application requesting access
Authorization Server: Issues tokens (e.g., Keycloak, Auth0)
Resource Server: API hosting protected data

OAuth 2.0 vs OpenID Connect

OAuth 2.0

Authorization only
Access tokens for API access
No standard for user identity

OpenID Connect (OIDC)

Built on top of OAuth 2.0
Adds authentication layer
ID tokens for user identity (JWT)

Best Practices

✓ Do

Use PKCE for public clients
Validate state parameter
Use short-lived access tokens
Store tokens securely

✗ Don't

Use Implicit flow for new apps
Store tokens in localStorage (XSS risk)
Expose client secrets in frontend
Skip token validation

→ Recommended

Authorization Code + PKCE
HttpOnly cookies for tokens
Backend-for-Frontend pattern
Regular token rotation

OAuth 2.0 Implementation Guide

Choosing the Right Flow

Web Apps with Backend: Authorization Code Flow
SPAs & Mobile Apps: Authorization Code + PKCE
Machine-to-Machine: Client Credentials Flow
Legacy SPAs: Implicit Flow (deprecated)

PKCE Explained

Proof Key for Code Exchange prevents authorization code interception attacks. Essential for public clients that cannot securely store a client secret.

// 1. Generate code_verifier (43-128 chars)
const verifier = generateRandomString(64);

// 2. Create code_challenge
const challenge = base64url(sha256(verifier));

// 3. Authorization request includes challenge
/authorize?code_challenge=xxx&code_challenge_method=S256

// 4. Token request includes verifier
POST /token { code_verifier: verifier }