Yaya access tokens da refresh tokens ke aiki tare?

Question

IT Interview Practice · Accepted Answer

Tokens guda biyu suna bin sauki lifecycle: **access token mai gajeren rayuwa** yana authorize kowace API call, kuma **refresh token mai dogon rayuwa** yana kirkirar sabbin access tokens a shiru lokacin da suka expire — don haka user yana ci gaba da login ba tare da sake shigar da credentials ba.

## Kwararar (flow)

```
┌─────────┐  1. login (user + pass)   ┌────────────┐
│ Client  │ ────────────────────────▶ │ Auth server│
│         │ ◀──── access + refresh ─── │            │
└─────────┘                            └────────────┘
     │  2. API call: Authorization: Bearer <access>
     ▼
┌────────────┐  verify signature + exp   (no DB lookup)
│ Resource   │ ──── 200 OK ────▶ (access still valid)
│ API        │ ──── 401 ───────▶ (access expired)
└────────────┘
     │  3. on 401: POST /token { refresh }
     ▼
┌────────────┐  verify + rotate
│ Auth server│ ──── new access (+ new refresh) ────▶ retry the call
└────────────┘
```

1. **Login** — user yana authenticate sau daya; server yana mayar da **access token** (gajeren TTL) da **refresh token** (dogon TTL).
2. **Access APIs** — client yana aika access token a cikin `Authorization: Bearer …` a kan kowace request. API yana verify shi a statelessly (signature + `exp`) sannan ya amsa — babu bukatar session store.
3. **Refresh a expiry** — lokacin da API ya mayar da `401` (ko client ya ga `exp` ya kusa), client yana POST **refresh token** zuwa `/token` endpoint na auth server kuma yana samun sabon access token, sannan ya sake gwada request na asali. User ba ya lura da komai.
4. **Logout / revoke** — server yana delete ko denylist refresh token; refresh na gaba ya gaza kuma session ya kare (access token na yanzu ma yana mutuwa da kansa cikin mintuna).

```js
// Client interceptor: refresh sau daya a kan 401, sannan a sake gwadawa.
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));   // sake gwadawa
  }
  return res;
}
```

## Refresh token rotation

Mafi kyawun aiki shi ne **rotation**: kowace refresh call tana mayar da refresh token *sabo* kuma tana invalidate na tsohon. Idan aka sake gabatar da tsohon (wanda aka riga aka yi amfani da shi) refresh token, hakan yana nuni ga sata — server yana revoke dukkan token family kuma yana tilasta re-login. Wannan yana iyakance barnar refresh token da aka sace.

## Storage

- **Refresh token** → `httpOnly`, `Secure`, `SameSite` cookie domin JavaScript (kuma saboda haka XSS) ba zai iya karanta shi ba.
- **Access token** → ana ajiye shi a memory a kan client; gajeren rayuwa yana iyakance fuskantar hadari.
- Kada ka taba sanya ko wanne cikin `localStorage` idan za ka iya kaucewa — kowane injected script na iya karanta shi.

## Me ya sa yake da muhimmanci

Wannan flow shi ne kashin bayan session management a SPAs na zamani, mobile apps, da APIs, don haka masu tambayoyi suna sa ran za ka bi shi daga farko zuwa karshe: issue duka a login, authorize da access token, refresh a fili a expiry, kuma rotate + revoke domin aminci. Samun cikakkun bayanai daidai — stateless verification, refresh kawai a token endpoint, rotation da reuse detection, da `httpOnly` storage — shi ne bambanci tsakanin session mai sauki da aminci da wanda token guda da aka sace ke nufin dogon lokaci na account takeover.

Kwararar (flow)

Refresh token rotation

Storage

Me ya sa yake da muhimmanci

Tambayoyi masu alaƙa