Frontender's notes [ru]

⁣⁣🔐 Координация вкладок через BroadcastChannel и Web Locks: refresh токенов без гонок Классическая проблема SPA с несколькими вкладками: 1. Access token истёк. 2. Пользователь открывает 3 вкладки. 3. Все вкладки одновременно получают 401. 4. Все делают /auth/refresh. 5. Если refresh token ротируется — первая вкладка обновила его, остальные уже пришли со старым refresh token. 6. Итог: logout, invalid_grant, странные баги авторизации. Решение: сделать refresh single-flight на весь origin. Для этого удобно совместить два API: - Web Locks — гарантирует, что refresh выполняет только одна вкладка. - BroadcastChannel — быстро сообщает остальным вкладкам результат refresh. Идея простая: - каждая вкладка перед refresh пытается взять lock; - внутри lock обязательно повторно проверяет, не обновил ли токен кто-то другой; - после успешного refresh рассылает новый access token/метаданные в остальные вкладки; - остальные вкладки обновляют своё состояние и не делают лишний refresh. Пример:

const channel = new BroadcastChannel('auth'); let accessToken: string | null = null; let accessTokenExp = 0; const REFRESH_LOCK = 'auth-refresh-lock'; const SKEW = 30_000; function isAccessTokenFresh() { return accessToken && accessTokenExp - Date.now() > SKEW; } function applySession(session: { accessToken: string; accessTokenExp: number; }) { accessToken = session.accessToken; accessTokenExp = session.accessTokenExp; } channel.onmessage = (event) => { const message = event.data; if (message.type === 'auth:refreshed') { applySession(message.session); } if (message.type === 'auth:refresh-failed') { accessToken = null; accessTokenExp = 0; } }; async function refreshSession() { const response = await fetch('/auth/refresh', { method: 'POST', credentials: 'include', }); if (!response.ok) { throw new Error('Refresh failed'); } return response.json(); } export async function getAccessToken() { if (isAccessTokenFresh()) { return accessToken; } return navigator.locks.request( REFRESH_LOCK, { mode: 'exclusive' }, async () => { // Пока мы ждали lock, // другая вкладка уже могла обновить токен. if (isAccessTokenFresh()) { return accessToken; } try { const session = await refreshSession(); applySession(session); channel.postMessage({ type: 'auth:refreshed', session, }); return accessToken; } catch (error) { channel.postMessage({ type: 'auth:refresh-failed', }); throw error; } }, ); }

Что здесь важно: 1. Lock должен быть общим для всех вкладок одного origin Например: auth-refresh-lock. 2. Проверка свежести токена должна быть дважды До lock — быстрый путь. Внутри lock — защита от очереди вкладок, которые ждали, пока первая завершит refresh. 3. BroadcastChannel не заменяет состояние Он не хранит последнее сообщение. Если вкладка открылась позже, она не получит старый auth:refreshed. Поэтому при старте всё равно нужно восстанавливать состояние: из memory/cache, через /session, silent refresh или другой механизм приложения. 4. Refresh token лучше не хранить в JS Оптимальный вариант — refresh token в HttpOnly Secure SameSite cookie, а /auth/refresh вызывается с credentials: 'include'. 5. Не забывайте про fallback BroadcastChannel поддерживается широко, но Web Locks есть не везде. Для критичных продуктов нужен fallback: mutex через localStorage с TTL или перенос refresh-логики в SharedWorker/Service Worker, если архитектура позволяет.