Bagaimana access token dan refresh token bekerja sama?

Question

IT Interview Practice · Accepted Answer

Kedua token mengikuti siklus hidup sederhana: **access token berumur pendek** mengotorisasi setiap panggilan API, dan **refresh token berumur panjang** secara diam-diam mencetak access token baru saat kedaluwarsa — jadi pengguna tetap login tanpa memasukkan kredensial lagi.

## Alurnya

```
┌─────────┐  1. login (user + pass)   ┌────────────┐
│ Client  │ ────────────────────────▶ │ Auth server│
│         │ ◀──── access + refresh ─── │            │
└─────────┘                            └────────────┘
     │  2. panggilan API: Authorization: Bearer <access>
     ▼
┌────────────┐  verifikasi signature + exp   (tanpa lookup DB)
│ Resource   │ ──── 200 OK ────▶ (access masih valid)
│ API        │ ──── 401 ───────▶ (access kedaluwarsa)
└────────────┘
     │  3. saat 401: POST /token { refresh }
     ▼
┌────────────┐  verifikasi + rotasi
│ Auth server│ ──── access baru (+ refresh baru) ────▶ ulangi panggilan
└────────────┘
```

1. **Login** — pengguna mengautentikasi sekali; server mengembalikan sebuah **access token** (TTL pendek) dan sebuah **refresh token** (TTL panjang).
2. **Akses API** — client mengirim access token di `Authorization: Bearer …` pada setiap request. API memverifikasinya secara stateless (signature + `exp`) dan merespons — tanpa perlu session store.
3. **Refresh saat kedaluwarsa** — ketika API mengembalikan `401` (atau client melihat `exp` sudah dekat), client mem-POST **refresh token** ke endpoint `/token` server auth dan mendapat access token baru, lalu mengulangi request awal. Pengguna tidak menyadari apa pun.
4. **Logout / cabut** — server menghapus atau mem-denylist refresh token; refresh berikutnya gagal dan sesi berakhir (access token saat ini tetap mati dengan sendirinya dalam hitungan menit).

```js
// Interceptor client: refresh sekali saat 401, lalu ulangi.
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));   // ulangi
  }
  return res;
}
```

## Rotasi refresh token

Praktik terbaik adalah **rotasi**: setiap panggilan refresh mengembalikan refresh token *baru* dan membatalkan yang lama. Jika refresh token lama (yang sudah dipakai) disodorkan lagi, itu menandakan pencurian — server mencabut seluruh keluarga token dan memaksa login ulang. Ini membatasi kerusakan dari refresh token yang dicuri.

## Penyimpanan

- **Refresh token** → cookie `httpOnly`, `Secure`, `SameSite` sehingga JavaScript (dan karenanya XSS) tidak bisa membacanya.
- **Access token** → disimpan di memori pada client; umur pendek membatasi eksposur.
- Jangan taruh keduanya di `localStorage` jika bisa dihindari — ia bisa dibaca oleh skrip apa pun yang disuntikkan.

## Mengapa ini penting

Alur ini adalah tulang punggung manajemen sesi di SPA, aplikasi mobile, dan API modern, jadi pewawancara mengharapkan Anda menelusurinya dari ujung ke ujung: terbitkan keduanya saat login, otorisasi dengan access token, refresh secara transparan saat kedaluwarsa, dan rotasi + cabut demi keamanan. Melakukan detailnya dengan benar — verifikasi stateless, refresh hanya di token endpoint, rotasi dengan deteksi penggunaan ulang, dan penyimpanan `httpOnly` — adalah perbedaan antara sesi yang mulus dan aman dengan sesi di mana satu token yang dicuri berarti pengambilalihan akun berumur panjang.

Alurnya

Rotasi refresh token

Penyimpanan

Mengapa ini penting

Pertanyaan terkait