OAuth + state · PKCE

Social login delegates identity to an IdP. Two small details (state · PKCE) prevent CSRF and code interception.

1. Flow

1. User clicks "Sign in with Kakao"
2. App → redirect to Kakao (client_id · redirect_uri · state)
3. Kakao → user approves
4. Kakao → redirect_uri?code=xxx&state=xxx
5. App (server) → exchange code for access_token
6. App → fetch user info
7. App → issue session cookie

2. state — CSRF defense

// initiate
const state = crypto.randomUUID();
res.cookies.set("oauth_state", state, { httpOnly: true, secure: true, sameSite: "lax", maxAge: 300 });
url.searchParams.set("state", state);

// callback
const queryState = req.nextUrl.searchParams.get("state");
const cookieState = req.cookies.get("oauth_state")?.value;
if (cookieState !== queryState) return redirect("/login?e=csrf");

3. PKCE

Required for SPAs / mobile (no secure client_secret), recommended everywhere.

const codeVerifier = base64url(randomBytes(32));
const codeChallenge = base64url(createHash("sha256").update(codeVerifier).digest());
url.searchParams.set("code_challenge", codeChallenge);
url.searchParams.set("code_challenge_method", "S256");
res.cookies.set("oauth_verifier", codeVerifier, { httpOnly: true, maxAge: 300 });

At token exchange include the verifier.

4. Per provider

Provider	state	PKCE
Kakao	recommended	supported
Naver	required	supported
Google	recommended	required

5. Redirect URI whitelist

6. Token storage

access_token — encrypt at rest (AES-256-GCM) if stored in DB
email · id — users table with auth_provider
session cookie — HTTP-only JWT

7. Account linking / duplicates

A — only the first provider
B — auto-link same email (vector for takeover)
C — ask user to log in via the existing provider

A is safest.

8. Logout

res.cookies.delete("session");
res.cookies.delete("refresh_token");

App session only; provider-level logout is a separate UX decision.

9. Gotchas

No state check → login CSRF
Lax redirect_uri → open redirect
Plaintext access_token → neighbour-service takeover
id_token signature skipped (OIDC)
Tokens in localStorage → XSS takes them

10. Checklist

state verified
PKCE where supported
exact redirect_uri
encrypted access_token
id_token signature verified

Closing

Most OAuth risk sits in state, redirect_uri, and token storage. Get these three right and the provider SDK handles the rest.

04-input-validation