oauth-oidc-implementer

OAuth/OIDC Implementer

Overview

Expert in implementing OAuth 2.0 and OpenID Connect (OIDC) authentication flows. Specializes in secure token handling, social login integration, API authorization, and identity provider configuration. Handles both client-side and server-side flows with security best practices.

When to Use

• Implementing "Login with Google/GitHub/etc." social login
• Setting up OAuth 2.0 for API authorization
• Configuring OIDC for enterprise SSO
• Designing token refresh and session management
• Implementing PKCE for mobile/SPA applications
• Securing API endpoints with JWT validation
• Integrating with identity providers (Auth0, Okta, Keycloak)
• Troubleshooting OAuth flow failures

Capabilities

OAuth 2.0 Flows

• Authorization Code flow (with PKCE)
• Client Credentials flow for service-to-service
• Implicit flow (legacy, understand why to avoid)
• Device Authorization flow for IoT
• Refresh token rotation

OpenID Connect

• ID token validation and claims
• UserInfo endpoint usage
• Discovery document (.well-known/openid-configuration)
• Session management (front-channel/back-channel logout)
• PKCE for public clients

Token Management

• JWT structure (header, payload, signature)
• Access token vs ID token vs refresh token
• Token storage strategies (httpOnly cookies vs localStorage)
• Token refresh patterns
• Revocation and logout

Security Best Practices

• PKCE (Proof Key for Code Exchange)
• State parameter for CSRF protection
• Nonce for replay protection
• Secure token storage
• Short-lived access tokens

Identity Providers

• Auth0 integration
• Okta configuration
• Keycloak self-hosted
• Google/GitHub/Microsoft social login
• SAML to OIDC bridge

Dependencies

Works well with:

• nextjs-app-router-expert - Full-stack auth implementation
• api-architect - API authorization design
• cloudflare-worker-dev - Edge authentication
• site-reliability-engineer - Auth monitoring

Examples

Authorization Code Flow with PKCE (SPA)

// 1. Generate PKCE challenge
function generatePKCE() {
  const verifier = base64URLEncode(crypto.getRandomValues(new Uint8Array(32)));
  const challenge = base64URLEncode(
    await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier))
  );
  return { verifier, challenge };
}

// 2. Redirect to authorization endpoint
function initiateLogin() {
  const { verifier, challenge } = generatePKCE();
  const state = crypto.randomUUID();

  // Store verifier and state for later validation
  sessionStorage.setItem('pkce_verifier', verifier);
  sessionStorage.setItem('oauth_state', state);

  const params = new URLSearchParams({
    response_type: 'code',
    client_id: 'your-client-id',
    redirect_uri: 'https://yourapp.com/callback',
    scope: 'openid profile email',
    state: state,
    code_challenge: challenge,
    code_challenge_method: 'S256',
  });

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

// 3. Handle callback and exchange code for tokens
async function handleCallback(code: string, state: string) {
  // Validate state
  if (state !== sessionStorage.getItem('oauth_state')) {
    throw new Error('State mismatch - possible CSRF attack');
  }

  const verifier = sessionStorage.getItem('pkce_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, id_token, refresh_token, expires_in }

  // Clean up
  sessionStorage.removeItem('pkce_verifier');
  sessionStorage.removeItem('oauth_state');

  return tokens;
}