OAuth Implementation Mistakes in Vibe-Coded Apps: State Parameter, PKCE, and Redirect URIs

Why OAuth Is Hard for AI to Get Right

OAuth 2.0 is a complex protocol with multiple flows, grant types, and security parameters that interact in non-obvious ways. AI coding tools learn from millions of code examples, but most OAuth tutorials online demonstrate the happy path without security parameters. The result: AI generates "working" OAuth flows that are vulnerable to well-known attacks.

According to a 2023 study published at the IEEE Symposium on Security and Privacy, 61% of OAuth implementations in popular web frameworks had at least one exploitable vulnerability. The most common issues were missing state parameters and insufficient redirect URI validation - exactly what AI tools generate.

The OAuth 2.0 Security Best Current Practice RFC (RFC 9700) explicitly requires PKCE for all OAuth clients, yet AI-generated code almost never includes it. OWASP lists broken authentication as the #2 web application security risk.

Mistake 1: Missing State Parameter

The state parameter prevents CSRF attacks on the OAuth callback. Without it, an attacker can trick a logged-in user into linking the attacker's account.

// ❌ BAD - No state parameter (CSRF vulnerable)
const authUrl = `https://github.com/login/oauth/authorize?` +
  `client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=read:user`;
// Attacker can craft this URL with their own authorization code

// ✅ GOOD - Generate and verify state parameter
import crypto from 'crypto';

// On login initiation
const state = crypto.randomBytes(32).toString('hex');
req.session.oauthState = state;

const authUrl = `https://github.com/login/oauth/authorize?` +
  `client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}` +
  `&scope=read:user&state=${state}`;

// On callback
app.get('/auth/callback', (req, res) => {
  if (req.query.state !== req.session.oauthState) {
    return res.status(403).json({ error: 'Invalid state parameter' });
  }
  delete req.session.oauthState;
  // ... exchange code for token
});

Mistake 2: No PKCE Implementation

PKCE (Proof Key for Code Exchange) prevents authorization code interception attacks. Without PKCE, a malicious app or browser extension can intercept the authorization code and exchange it for an access token.

// ✅ GOOD - PKCE implementation
import crypto from 'crypto';

function generatePKCE() {
  const verifier = crypto.randomBytes(32).toString('base64url');
  const challenge = crypto
    .createHash('sha256')
    .update(verifier)
    .digest('base64url');
  return { verifier, challenge };
}

// On login initiation
const { verifier, challenge } = generatePKCE();
req.session.codeVerifier = verifier;

const authUrl = `https://provider.com/authorize?` +
  `client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}` +
  `&code_challenge=${challenge}&code_challenge_method=S256`;

// On callback - include verifier in token exchange
const tokenResponse = await fetch('https://provider.com/token', {
  method: 'POST',
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: req.query.code,
    redirect_uri: REDIRECT_URI,
    client_id: CLIENT_ID,
    code_verifier: req.session.codeVerifier,
  }),
});

Mistake 3: Open Redirect URIs

AI-generated OAuth configurations often use wildcard or overly broad redirect URI patterns, allowing attackers to redirect tokens to their own servers.

// ❌ BAD - Accepting any redirect URI
const allowedRedirects = [/https:\/\/.*\.myapp\.com/];
// Attacker creates: https://evil.myapp.com.attacker.com

// ❌ BAD - Matching prefix only
if (redirectUri.startsWith('https://myapp.com')) { ... }
// Attacker uses: https://myapp.com.attacker.com/steal-token

// ✅ GOOD - Exact match on full redirect URI
const ALLOWED_REDIRECTS = new Set([
  'https://myapp.com/auth/callback',
  'https://staging.myapp.com/auth/callback',
]);

if (!ALLOWED_REDIRECTS.has(redirectUri)) {
  return res.status(400).json({ error: 'Invalid redirect URI' });
}

How to Fix Your OAuth Implementation

1. Add the state parameter to every OAuth flow. Generate it with crypto.randomBytes(32) and verify it on callback.
2. Implement PKCE for all public clients (SPAs, mobile apps, desktop apps).
3. Use exact redirect URI matching. Never use wildcards, prefix matching, or regex for redirect validation.
4. Use a proven library instead of hand-coding OAuth. NextAuth.js, Passport.js, and arctic handle these security parameters automatically.
5. Scan your codebase. Tools like VibeDoctor (vibedoctor.io) automatically detect missing CSRF protection and insecure authentication patterns in your API routes. Free to sign up.

FAQ