access token과 refresh token은 어떻게 함께 작동하나요?

Question

IT Interview Practice · Accepted Answer

두 토큰은 단순한 생명주기를 따릅니다: **단수명 access token**이 각 API 호출을 인가하고, **장수명 refresh token**이 만료 시 조용히 새 access token을 발급합니다 — 그래서 사용자는 자격 증명을 다시 입력하지 않고 로그인 상태를 유지합니다.

## 흐름

```
┌─────────┐  1. login (user + pass)   ┌────────────┐
│ Client  │ ────────────────────────▶ │ Auth server│
│         │ ◀──── access + refresh ─── │            │
└─────────┘                            └────────────┘
     │  2. API 호출: Authorization: Bearer <access>
     ▼
┌────────────┐  서명 + exp 검증   (DB 조회 없음)
│ Resource   │ ──── 200 OK ────▶ (access 아직 유효)
│ API        │ ──── 401 ───────▶ (access 만료됨)
└────────────┘
     │  3. 401 시: POST /token { refresh }
     ▼
┌────────────┐  검증 + 회전
│ Auth server│ ──── 새 access (+ 새 refresh) ────▶ 호출 재시도
└────────────┘
```

1. **Login** — 사용자는 한 번 인증합니다; 서버는 **access token**(짧은 TTL)과 **refresh token**(긴 TTL)을 반환합니다.
2. **API 접근** — 클라이언트는 모든 요청에서 `Authorization: Bearer …`에 access token을 보냅니다. API는 이를 stateless하게 검증하고(서명 + `exp`) 응답합니다 — session store가 필요 없습니다.
3. **만료 시 갱신** — API가 `401`을 반환하면(또는 클라이언트가 `exp`가 가까워졌음을 감지하면), 클라이언트는 **refresh token**을 auth 서버의 `/token` endpoint로 POST하여 새 access token을 받은 후 원래 요청을 재시도합니다. 사용자는 아무것도 알아채지 못합니다.
4. **로그아웃 / 폐기** — 서버는 refresh token을 삭제하거나 denylist에 넣습니다; 다음 갱신이 실패하고 세션이 종료됩니다(현재 access token도 몇 분 내에 스스로 소멸합니다).

```js
// 클라이언트 인터셉터: 401에서 한 번 갱신한 후 재시도.
async function apiFetch(url, opts = {}) {
  let res = await fetch(url, withAuth(opts, accessToken));
  if (res.status === 401) {
    accessToken = await refreshAccessToken(refreshToken); // POST /token
    res = await fetch(url, withAuth(opts, accessToken));   // 재시도
  }
  return res;
}
```

## refresh token 회전

모범 사례는 **회전(rotation)**입니다: 각 갱신 호출은 *새* refresh token을 반환하고 이전 것을 무효화합니다. 오래된(이미 사용된) refresh token이 다시 제시되면 이는 탈취를 나타냅니다 — 서버는 전체 토큰 패밀리를 폐기하고 재로그인을 강제합니다. 이는 탈취된 refresh token의 피해를 제한합니다.

## 저장

- **Refresh token** → `httpOnly`, `Secure`, `SameSite` 쿠키로 하여 JavaScript(따라서 XSS)가 읽을 수 없게 합니다.
- **Access token** → 클라이언트의 메모리에 보관합니다; 짧은 수명이 노출을 제한합니다.
- 피할 수 있다면 둘 다 `localStorage`에 넣지 마세요 — 주입된 어떤 스크립트든 읽을 수 있습니다.

## 왜 중요한가

이 흐름은 현대 SPA, 모바일 앱, API에서 세션 관리의 근간이므로, 면접관은 여러분이 이를 처음부터 끝까지 추적하기를 기대합니다: 로그인 시 둘 다 발급, access token으로 인가, 만료 시 투명하게 갱신, 그리고 안전을 위한 회전 + 폐기. 세부 사항을 올바르게 처리하는 것 — stateless 검증, token endpoint에서만 갱신, 재사용 감지가 있는 회전, 그리고 `httpOnly` 저장 — 이 매끄럽고 안전한 세션과 하나의 탈취된 토큰이 장기적인 계정 탈취를 의미하는 세션의 차이입니다.

흐름

refresh token 회전

저장

왜 중요한가

관련 질문