2nd/10_Wiki/Topics/Topic_Programming/Coding/Web_JWT_Patterns.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
web-jwt-patterns	JWT 패턴 — 토큰 저장 / 만료 / 회전	Coding	draft	B	conceptual	2026-05-09	2026-05-09	web auth jwt security vibe-coding	language applicable_to Any backend / browser Web Mobile		access token refresh token httpOnly cookie token rotation

JWT 패턴

JWT 자체는 무상태 보안 도구일 뿐. 진짜 어려운 건 어디 저장? 만료? 회전? 무효화?. 잘못 저장하면 XSS 한 방으로 토큰 털림.

📖 핵심 개념

• Access token: 짧은 만료 (5~15분), API 호출 권한.
• Refresh token: 긴 만료 (1~30일), access 재발급 용. 회전 (rotation) 필수.
• 저장 위치 트레이드오프:
  • localStorage: XSS 취약. 절대 비추.
  • sessionStorage: 탭 닫으면 사라짐. 사용자 경험 나쁨.
  • httpOnly + Secure + SameSite cookie: XSS 차단. 권장.
  • 메모리 (변수): 새로고침에 사라짐. + httpOnly cookie 로 refresh.

💻 코드 패턴

1. Access in memory + Refresh in httpOnly cookie

// 로그인 응답
res.cookie('rt', refreshToken, {
  httpOnly: true, secure: true, sameSite: 'strict',
  maxAge: 7 * 24 * 60 * 60 * 1000, path: '/api/auth/refresh',
});
res.json({ accessToken });

// 클라이언트
let access = data.accessToken; // memory only
fetch('/api/me', { headers: { Authorization: `Bearer ${access}` } });

2. Access 만료 시 자동 refresh

async function authedFetch(input: RequestInfo, init: RequestInit = {}) {
  let res = await fetch(input, withAuth(init, access));
  if (res.status !== 401) return res;
  // refresh
  const r = await fetch('/api/auth/refresh', { method: 'POST', credentials: 'include' });
  if (!r.ok) throw new Error('session expired');
  access = (await r.json()).accessToken;
  return fetch(input, withAuth(init, access));
}

3. Refresh token rotation

// 서버: refresh 호출 시 새 refresh 발급 + 옛 것 무효화
app.post('/api/auth/refresh', async (req, res) => {
  const old = req.cookies.rt;
  const session = await db.sessions.find({ refreshToken: old });
  if (!session || session.revokedAt) return res.status(401).end();

  // 옛 것 invalidate
  await db.sessions.update(session.id, { revokedAt: new Date() });

  // 새 발급
  const newRt = signRefresh({ userId: session.userId });
  await db.sessions.create({ userId: session.userId, refreshToken: newRt });

  res.cookie('rt', newRt, cookieOpts);
  res.json({ accessToken: signAccess({ userId: session.userId }) });
});

🤔 의사결정 기준

환경	저장
Web SPA	access in memory + refresh in httpOnly cookie
SSR (Next.js)	session cookie + 서버에서 access 발급
Mobile (RN/iOS/Android)	secure storage (Keychain/Keystore)
서버-서버	짧은 access, OAuth client credentials

❌ 안티패턴

• localStorage 에 access token 저장: XSS 한 방으로 탈취. 사고.
• Refresh token rotation 안 함: 한 번 탈취되면 영원히 유효. rotation + reuse detection.
• JWT signature 만 검증, 만료 안 봄: 만료 토큰 통과. exp / nbf 모두 검증.
• JWT payload 에 비밀 정보: payload 는 base64 — 누구나 디코드. 비밀 X.
• 장시간 access token (24h+): 탈취 시 피해 커짐. 짧게 + refresh.
• 로그아웃 시 토큰 무효화 안 함: stateless 라 어렵지만 refresh 무효화는 DB 레벨로.
• CSRF 보호 누락 (cookie auth): SameSite=strict + CSRF token.

🤖 LLM 활용 힌트

• 인증 코드 작성 시 "access in memory + refresh in httpOnly cookie + rotation" 패턴 강제.
• LLM 이 localStorage 사용하려 하면 막기.

🔗 관련 문서

• Web_CORS_Practical_Guide
• Idempotent_Operations