Deduplicate concurrent token refresh to fix login redirect loop

The dashboard fires several authenticated requests at once (summary,
cashflow, merchants, accounts, transactions, plus the app shell's own
profile fetch). Once the 60-second access-token cookie expires, all
of them 401 together, and apiFetch had each one independently call
/api/auth/refresh. Refresh tokens are single-use and rotate on the
backend, so only the first of these racing calls succeeded — the
rest sent an already-consumed refresh token, got rejected, cleared
auth cookies, and hard-redirected to /login. Symptom: land in the
app, then get bounced back to login almost immediately, repeatedly.

Fix: share one in-flight refresh promise across all callers so a
burst of concurrent 401s triggers exactly one refresh call.
This commit is contained in:
MOHAN 2026-08-26 18:24:08 +05:30
parent 081862e1d7
commit 136f41020f

View File

@ -34,25 +34,41 @@ export function clearAuth(): void {
localStorage.removeItem(USER_KEY);
}
// Shared in-flight refresh promise so concurrent 401s (e.g. several widgets
// loading at once) all await the same refresh call instead of each firing
// their own — refresh tokens are single-use, so racing calls would otherwise
// invalidate each other and force a false session-expired logout.
let refreshInFlight: Promise<boolean> | null = null;
async function tryRefresh(): Promise<boolean> {
if (refreshInFlight) return refreshInFlight;
refreshInFlight = (async () => {
try {
const res = await fetch("/api/auth/refresh", {
method: "POST",
headers: { "Content-Type": "application/json" },
});
if (!res.ok) {
clearAuth();
return false;
}
const payload = (await res.json()) as ApiResponse<unknown>;
if (payload.error) {
clearAuth();
return false;
}
return true;
} catch {
clearAuth();
return false;
}
})();
try {
const res = await fetch("/api/auth/refresh", {
method: "POST",
headers: { "Content-Type": "application/json" },
});
if (!res.ok) {
clearAuth();
return false;
}
const payload = (await res.json()) as ApiResponse<unknown>;
if (payload.error) {
clearAuth();
return false;
}
return true;
} catch {
clearAuth();
return false;
return await refreshInFlight;
} finally {
refreshInFlight = null;
}
}