Authentication Flows

Overview

Authorization Code Flow

How It Works

Code Example

// Step 1: Redirect to authorization endpoint
const authUrl = new URL('https://oauth42.com/oauth2/authorize');
authUrl.searchParams.set('client_id', 'your_client_id');
authUrl.searchParams.set('redirect_uri', 'https://yourapp.com/callback');
authUrl.searchParams.set('response_type', 'code');
authUrl.searchParams.set('scope', 'openid profile email');
authUrl.searchParams.set('state', randomState);

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

// Step 2: Handle callback on your backend
app.get('/callback', async (req, res) => {
  const { code, state } = req.query;

  // Verify state to prevent CSRF
  if (state !== storedState) {
    return res.status(400).send('Invalid state');
  }

  // Step 3: Exchange code for tokens
  const response = await fetch('https://oauth42.com/oauth2/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code: code,
      redirect_uri: 'https://yourapp.com/callback',
      client_id: 'your_client_id',
      client_secret: 'your_client_secret', // Secure on server only!
    }),
  });

  const tokens = await response.json();
  // tokens.access_token, tokens.refresh_token, tokens.id_token
});

Authorization Code Flow with PKCE

What is PKCE?

PKCE (Proof Key for Code Exchange, pronounced "pixy") is an extension to the Authorization Code Flow that prevents authorization code interception attacks. It's now mandatory for all public clients in OAuth42.

How PKCE Works

Code Example

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

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

const codeVerifier = generateCodeVerifier();
const codeChallenge = await generateCodeChallenge(codeVerifier);

// Store verifier for later (session storage, not localStorage!)
sessionStorage.setItem('code_verifier', codeVerifier);

// Step 2: Redirect with PKCE parameters
const authUrl = new URL('https://oauth42.com/oauth2/authorize');
authUrl.searchParams.set('client_id', 'your_client_id');
authUrl.searchParams.set('redirect_uri', 'https://yourapp.com/callback');
authUrl.searchParams.set('response_type', 'code');
authUrl.searchParams.set('scope', 'openid profile email');
authUrl.searchParams.set('code_challenge', codeChallenge);
authUrl.searchParams.set('code_challenge_method', 'S256');
authUrl.searchParams.set('state', randomState);

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

// Step 3: Exchange code for tokens with verifier
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const codeVerifier = sessionStorage.getItem('code_verifier');

const response = await fetch('https://oauth42.com/oauth2/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: code,
    redirect_uri: 'https://yourapp.com/callback',
    client_id: 'your_client_id',
    code_verifier: codeVerifier, // No client secret needed!
  }),
});

const tokens = await response.json();

Client Credentials Flow

Use Cases

Code Example

// Direct token request with client credentials
const response = await fetch('https://oauth42.com/oauth2/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic ' + btoa(`${clientId}:${clientSecret}`),
  },
  body: new URLSearchParams({
    grant_type: 'client_credentials',
    scope: 'api:read api:write', // Application-level scopes only
  }),
});

const tokens = await response.json();
// tokens.access_token (no refresh token or ID token)

// Use access token for API requests
const apiResponse = await fetch('https://api.yourservice.com/resources', {
  headers: {
    'Authorization': `Bearer ${tokens.access_token}`,
  },
});

Implicit Flow

Why It's Deprecated

• ✗
  Access tokens exposed in browser history:Tokens returned in URL fragment can be logged in browser history, proxy logs, and referrer headers
• ✗
  No refresh tokens:Users must re-authenticate when access token expires
• ✗
  Vulnerable to token theft:No protection against authorization code interception attacks

Resource Owner Password Flow

Why It's Problematic

• ✗
  Breaks OAuth security model:User credentials are exposed to the application
• ✗
  No consent screen:Users cannot review or limit permissions granted
• ✗
  Phishing risk:Trains users to enter passwords in third-party forms

Flow Comparison

Which Flow Should I Use?

Best Practices

Next Steps