OAuth 2.0

Overview

OAuth 2.0 is a delegation protocol: it lets a user grant an application limited access to their data on another service without sharing their password. 'Let this photo app read my Google Photos' is OAuth. The app receives an access token with specific scopes, issued by the authorization server after the user consents.

The recommended flow for web and mobile apps is the authorization code flow with PKCE. OAuth itself is about authorization; OpenID Connect (OIDC) adds an ID token on top so apps can also log users in. Client credentials is the flow for machine-to-machine access with no user involved.

When to use it

• 'Sign in with Google / Microsoft / GitHub'.
• Third-party apps accessing a user's data on your platform.
• Single sign-on across your own apps (with OIDC).
• Service-to-service access with client credentials.

Where it shows up in interviews

Where it is used in real software

Key terms

Resource owner

The user who owns the data.

Client

The application requesting access.

Authorization server

Authenticates the user and issues tokens.

Scope

What the token allows, such as photos.read.

PKCE

Proof Key for Code Exchange: prevents stolen authorization codes from being used.

Refresh token

Long-lived token used to get new short-lived access tokens.

Authorization code flow with PKCE

1. 1
   App creates a code verifier

   A random secret; it sends its SHA-256 hash (code challenge) in the next step.

2. 2
   Redirect to the authorization server

   /authorize?client_id=...&scope=photos.read&redirect_uri=...&code_challenge=...

3. 3
   User logs in and consents

   The user sees which scopes the app is requesting.

4. 4
   Redirect back with a code

   The authorization server sends a short-lived one-time code to redirect_uri.

5. 5
   App exchanges the code

   POST /token with the code and the original code verifier; the server checks it matches the challenge.

6. 6
   App calls the API

   Authorization: Bearer <access_token>; refresh it with the refresh token when it expires.

Which OAuth flow to use

Implicit and password grants are deprecated

In interviews, 'authorization code with PKCE' is the right default answer for any app involving a user.

Implementation

1const base64url = (bytes: ArrayBuffer) =>2  btoa(String.fromCharCode(...new Uint8Array(bytes))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");3 4async function startLogin() {5  const verifier = base64url(crypto.getRandomValues(new Uint8Array(32)).buffer);6  const challenge = base64url(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier)));7  const state = crypto.randomUUID(); // CSRF protection8  sessionStorage.setItem("pkce", JSON.stringify({ verifier, state }));9 10  const url = new URL("https://auth.example.com/authorize");11  url.search = new URLSearchParams({12    response_type: "code",13    client_id: "photo-app",14    redirect_uri: "https://photos.example.app/callback",15    scope: "openid profile photos.read",16    code_challenge: challenge,17    code_challenge_method: "S256",18    state,19  }).toString();20  location.assign(url);21}22 23async function handleCallback(code: string, state: string) {24  const { verifier, state: expected } = JSON.parse(sessionStorage.getItem("pkce")!);25  if (state !== expected) throw new Error("State mismatch");26  const res = await fetch("https://auth.example.com/token", {27    method: "POST",28    headers: { "Content-Type": "application/x-www-form-urlencoded" },29    body: new URLSearchParams({ grant_type: "authorization_code", code, redirect_uri: "https://photos.example.app/callback", client_id: "photo-app", code_verifier: verifier }),30  });31  return res.json(); // { access_token, refresh_token, id_token, expires_in }32}

Complexity and performance

Trade-offs

Variants and related techniques

Common mistakes

• Using OAuth access tokens as proof of login.

  Fix: Use OIDC ID tokens for authentication; access tokens are for calling APIs.

• Skipping state and PKCE.

  Fix: state prevents CSRF on the callback; PKCE prevents stolen codes from being redeemed.

• Loose redirect URI matching.

  Fix: Register exact redirect URIs; wildcard matching enables token theft.

Interview questions

Practice problems