Understanding OAuth 2.0 Flow

// Generate a cryptographically random code_verifier
function generateCodeVerifier() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return btoa(String.fromCharCode(...array))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

// Derive code_challenge from verifier using SHA-256
async function generateCodeChallenge(verifier) {
  const encoder = new TextEncoder();
  const data = encoder.encode(verifier);
  const digest = await crypto.subtle.digest('SHA-256', data);
  return btoa(String.fromCharCode(...new Uint8Array(digest)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

// Build authorization URL and redirect
async function startOAuthFlow() {
  const verifier = generateCodeVerifier();
  const challenge = await generateCodeChallenge(verifier);

  // Store verifier in sessionStorage — needed for token exchange
  sessionStorage.setItem('pkce_verifier', verifier);

  const params = new URLSearchParams({
    response_type: 'code',
    client_id: 'YOUR_CLIENT_ID',
    redirect_uri: 'https://yourapp.com/callback',
    scope: 'read:profile read:email',
    state: crypto.randomUUID(), // CSRF protection
    code_challenge: challenge,
    code_challenge_method: 'S256',
  });

  window.location.href = `https://auth.example.com/authorize?${params}`;
}

// On the redirect callback page
async function handleCallback() {
  const params = new URLSearchParams(window.location.search);
  const code = params.get('code');
  const state = params.get('state');
  const verifier = sessionStorage.getItem('pkce_verifier');

  if (!code || !verifier) {
    throw new Error('Missing code or verifier');
  }

  const response = await fetch('https://auth.example.com/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: 'https://yourapp.com/callback',
      client_id: 'YOUR_CLIENT_ID',
      code_verifier: verifier,
    }),
  });

  const tokens = await response.json();
  // { access_token, refresh_token, token_type, expires_in }

  // Store tokens securely — httpOnly cookies are preferred
  // Never store access tokens in localStorage
  sessionStorage.removeItem('pkce_verifier');
  return tokens;
}

const axios = require('axios');

class OAuthClient {
  constructor(clientId, clientSecret, tokenUrl) {
    this.clientId = clientId;
    this.clientSecret = clientSecret;
    this.tokenUrl = tokenUrl;
    this.token = null;
    this.tokenExpiry = null;
  }

  async getAccessToken() {
    // Return cached token if still valid (with 60s buffer)
    if (this.token && Date.now() < this.tokenExpiry - 60000) {
      return this.token;
    }

    const response = await axios.post(
      this.tokenUrl,
      new URLSearchParams({
        grant_type: 'client_credentials',
        scope: 'api:read api:write',
      }),
      {
        auth: {
          username: this.clientId,
          password: this.clientSecret,
        },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      }
    );

    this.token = response.data.access_token;
    this.tokenExpiry = Date.now() + response.data.expires_in * 1000;
    return this.token;
  }

  async callAPI(endpoint) {
    const token = await this.getAccessToken();
    return axios.get(endpoint, {
      headers: { Authorization: `Bearer ${token}` },
    });
  }
}

// Usage
const client = new OAuthClient(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  'https://auth.example.com/token'
);

const data = await client.callAPI('https://api.example.com/reports');

// Before redirect — generate and store state
const state = crypto.randomUUID();
sessionStorage.setItem('oauth_state', state);

// In the authorization URL
const params = new URLSearchParams({
  // ...
  state,
});

// In the callback — validate state matches
function handleCallback() {
  const returnedState = new URLSearchParams(window.location.search).get('state');
  const savedState = sessionStorage.getItem('oauth_state');
  sessionStorage.removeItem('oauth_state');

  if (returnedState !== savedState) {
    throw new Error('State mismatch — possible CSRF attack');
  }
  // Continue with token exchange...
}

import { createRemoteJWKSet, jwtVerify } from 'jose';
import { Request, Response, NextFunction } from 'express';

const JWKS = createRemoteJWKSet(
  new URL('https://auth.example.com/.well-known/jwks.json')
);

export async function requireAuth(
  req: Request,
  res: Response,
  next: NextFunction
) {
  const authHeader = req.headers.authorization;
  if (!authHeader?.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Missing bearer token' });
  }

  const token = authHeader.slice(7);

  try {
    const { payload } = await jwtVerify(token, JWKS, {
      issuer: 'https://auth.example.com',
      audience: 'https://api.example.com',
    });

    // Attach decoded claims to request
    req.user = payload;
    next();
  } catch (err) {
    return res.status(401).json({ error: 'Invalid or expired token' });
  }
}

class AuthClient {
  #accessToken = null;
  #refreshToken = null;
  #tokenExpiry = null;
  #refreshPromise = null; // Prevent concurrent refreshes

  async fetch(url, options = {}) {
    const token = await this.#getValidToken();

    const response = await fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        Authorization: `Bearer ${token}`,
      },
    });

    // Handle token revocation mid-session
    if (response.status === 401) {
      this.#accessToken = null;
      throw new Error('Session expired. Please log in again.');
    }

    return response;
  }

  async #getValidToken() {
    // Token still valid with 30s buffer
    if (this.#accessToken && Date.now() < this.#tokenExpiry - 30000) {
      return this.#accessToken;
    }

    // Prevent concurrent refresh calls (race condition)
    if (!this.#refreshPromise) {
      this.#refreshPromise = this.#doRefresh().finally(() => {
        this.#refreshPromise = null;
      });
    }

    return this.#refreshPromise;
  }

  async #doRefresh() {
    if (!this.#refreshToken) throw new Error('No refresh token available');

    const res = await fetch('/auth/refresh', {
      method: 'POST',
      credentials: 'include', // Include httpOnly cookie with refresh token
    });

    if (!res.ok) throw new Error('Token refresh failed');

    const data = await res.json();
    this.#accessToken = data.access_token;
    this.#tokenExpiry = Date.now() + data.expires_in * 1000;
    return this.#accessToken;
  }
}