OAuth2 Implicit Flow — Why It Was Deprecated and How to Migrate

// BAD: Implicit flow — token in URL fragment
// Redirect URL: https://app.dodatech.com/#access_token=eyJhbGciOi...
// The token is visible in:
//   - Browser address bar
//   - Browser history (can be synced across devices)
//   - Sent in Referer header to any resource on the page
//   - Accessible by any browser extension with tabs permission

// Reading the token (Prone to interception)
function handleImplicitCallback() {
  const hash = window.location.hash.substring(1);
  const params = new URLSearchParams(hash);
  const accessToken = params.get('access_token');

  // PROBLEM: accessToken is now accessible to:
  // 1. Any JavaScript running in the same page context
  // 2. Any browser extension
  // 3. Any iframe on the page
  // 4. Referer headers on subsequent requests
}

// OLD: Implicit flow
async function loginImplicit() {
  const clientId = 'dodatech-spa';
  const redirectUri = 'https://app.dodatech.com/callback';
  const authUrl = `https://auth.dodatech.com/authorize?` +
    `response_type=token` +  // Returns token directly
    `&client_id=${clientId}` +
    `&redirect_uri=${redirectUri}` +
    `&scope=openid%20profile`;

  window.location.href = authUrl;
  // Token appears in URL fragment — insecure!
}

// NEW: Authorization Code with PKCE
async function loginPKCE() {
  const clientId = 'dodatech-spa';
  const redirectUri = 'https://app.dodatech.com/callback';

  // Generate PKCE values
  const verifier = generateCodeVerifier();
  const challenge = await generateCodeChallenge(verifier);
  sessionStorage.setItem('pkce_verifier', verifier);

  const authUrl = `https://auth.dodatech.com/authorize?` +
    `response_type=code` +  // Returns code, not token
    `&client_id=${clientId}` +
    `&redirect_uri=${redirectUri}` +
    `&code_challenge=${challenge}` +
    `&code_challenge_method=S256` +
    `&state=${crypto.randomUUID()}` +
    `&scope=openid%20profile`;

  window.location.href = authUrl;
  // No token in URL — only a one-time code
}

async function handlePKCECallback() {
  const params = new URLSearchParams(window.location.search);
  const code = params.get('code');

  // Exchange code for token (server-side call)
  // The code is useless without the verifier
  const resp = await fetch('https://auth.dodatech.com/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code: code,
      client_id: 'dodatech-spa',
      code_verifier: sessionStorage.getItem('pkce_verifier'),
      redirect_uri: 'https://app.dodatech.com/callback'
    })
  });
  // Token never appears in the browser URL
  return resp.json();
}

from flask import Flask, request, redirect
import secrets, hashlib, base64

app = Flask(__name__)

# OBSOLETE: Implicit flow authorize endpoint
@app.route("/authorize/implicit", methods=["GET"])
def authorize_implicit():
    """DEPRECATED — Do not use."""
    client_id = request.args.get("client_id")
    redirect_uri = request.args.get("redirect_uri")

    # Authenticate user (simplified)
    # ...

    # Issue token directly in URL fragment
    token = secrets.token_urlsafe(32)
    return redirect(f"{redirect_uri}#access_token={token}&token_type=Bearer&expires_in=3600")

# RECOMMENDED: Authorization Code with PKCE
authorization_codes = {}

@app.route("/authorize", methods=["GET"])
def authorize():
    client_id = request.args.get("client_id")
    redirect_uri = request.args.get("redirect_uri")
    code_challenge = request.args.get("code_challenge")
    challenge_method = request.args.get("code_challenge_method", "S256")

    # Validate client
    # Authenticate user
    # ...

    # Issue one-time code (not a token)
    auth_code = secrets.token_urlsafe(32)
    authorization_codes[auth_code] = {
        "client_id": client_id,
        "redirect_uri": redirect_uri,
        "code_challenge": code_challenge,
        "challenge_method": challenge_method,
        "expires_at": __import__("time").time() + 60
    }

    return redirect(f"{redirect_uri}?code={auth_code}")