Session Expiry and the Refresh Race

• Five parallel requests on mount — Issued together; the credential is already dead
• Five 401 responses — Arrive within the same handful of tasks
• Naive: five refreshes issued — With rotation, four invalidate the one that worked
• Naive: logout the user did not ask for — The recovery path caused the failure
• Gated: one refresh; four callers await it — Single-flight promise shared by every caller
• Gated: five replays with the new credential — The user sees one slower load and nothing else

The two paths do the same amount of useful work. The difference is entirely in how many refreshes were issued for one expiry, which is why the fix is a coordination fix and not a performance one.

1let inFlight: Promise<void> | null = null
2 
3function refreshOnce(): Promise<void> {
4  // Every caller that arrives while a refresh is running awaits the same one.
5  inFlight ??= fetch('/auth/refresh', { method: 'POST', credentials: 'include' })
6    .then((res) => {
7      if (res.status === 401) throw new SessionEnded()  // revoked: do not retry
8      if (!res.ok) throw new RefreshFailed()            // transient: may retry later
9      return res.json().then(setAccessToken)
10    })
11    // finally, not then: a rejected promise left cached poisons every later call.
12    .finally(() => { inFlight = null })
13  return inFlight
14}
15 
16export async function authedFetch(input: RequestInfo, init: RequestInit = {}) {
17  const res = await fetch(input, withCredentials(init))
18  if (res.status !== 401) return res            // 403 included: not a session problem
19  if (isRefreshEndpoint(input)) return res      // never refresh the refresh
20 
21  try {
22    await refreshOnce()
23  } catch (err) {
24    identity.set(err instanceof SessionEnded
25      ? { status: 'expired', returnTo: currentPath() }   // ask the user
26      : { status: 'expired', returnTo: currentPath() })  // same UI, different log
27    throw err
28  }
29  // Exactly one replay. A second 401 is an answer, not an invitation.
30  return fetch(input, withCredentials(init))
31}

Three details do the work: ??= makes the promise the lock, finally clears it on failure as well as success, and the replay is unconditional and singular. Everything else is bookkeeping.