OAuth 2.0 & OpenID Connect

What Problem Does OAuth Solve?

Before OAuth, if a third-party app (like a calendar tool) needed your Gmail contacts, you'd give it your Google password. This was terrible — the app could read your email, change your password, or do anything as you. OAuth fixes this by letting you grant limited, revocable access without sharing credentials.

The Four Roles

Authorization Code Flow (with PKCE)

This is the recommended flow for web apps, mobile apps, and SPAs. PKCE (Proof Key for Code Exchange) prevents authorization code interception attacks.

1. App generates a code_verifier (random string) and its SHA-256 hash (code_challenge)
2. User is redirected to the auth server with the code_challenge
3. User logs in and consents to the requested scopes
4. Auth server redirects back with an authorization code
5. App exchanges the code + code_verifier for tokens
6. Auth server verifies the code_verifier matches and returns access + refresh tokens

// Step 1: Generate PKCE values
function generateCodeVerifier() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return base64URLEncode(array);
}

async function generateCodeChallenge(verifier) {
  const hash = await crypto.subtle.digest(
    'SHA-256',
    new TextEncoder().encode(verifier)
  );
  return base64URLEncode(new Uint8Array(hash));
}

// Step 2: Build the authorization URL
const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');
authUrl.searchParams.set('client_id', CLIENT_ID);
authUrl.searchParams.set('redirect_uri', 'https://myapp.com/callback');
authUrl.searchParams.set('response_type', 'code');
authUrl.searchParams.set('scope', 'openid email profile');
authUrl.searchParams.set('code_challenge', codeChallenge);
authUrl.searchParams.set('code_challenge_method', 'S256');

window.location.href = authUrl.toString();

// Step 5: Exchange code for tokens (server-side)
const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: authorizationCode,
    redirect_uri: 'https://myapp.com/callback',
    client_id: CLIENT_ID,
    code_verifier: storedCodeVerifier
  })
});

const { access_token, refresh_token, id_token } = await tokenResponse.json();

OAuth 2.0 Grant Types Compared

Scopes: Limiting Access

Scopes define what the token can access. The user sees them on the consent screen and can approve or deny.

# Google scopes example
scope=openid email profile                    # Basic identity
scope=https://www.googleapis.com/auth/drive.readonly  # Read Google Drive

# GitHub scopes example
scope=read:user repo                          # Read profile + access repos
scope=read:org                                # Read org membership

OpenID Connect (OIDC)

OAuth 2.0 handles authorization (what can the app do?) but not authentication (who is the user?). OpenID Connect adds an ID token — a JWT containing user identity claims.

// Decoded ID token (JWT payload)
{
  "iss": "https://accounts.google.com",
  "sub": "110169484474386276334",
  "email": "[email protected]",
  "name": "Jane Doe",
  "picture": "https://lh3.googleusercontent.com/a/photo.jpg",
  "aud": "your-client-id.apps.googleusercontent.com",
  "iat": 1743638400,
  "exp": 1743642000,
  "nonce": "abc123"
}

Access Tokens vs Refresh Tokens

Interview Questions