fix: prevent stale subscription cache updates

Author: sachaservan

src/hooks/use-subscription-status.ts

@@ -67,7 +67,7 @@ export const hasActiveSubscription = (
  */
 export function useSubscriptionStatus() {
   const { user, isLoaded } = useUser()
-  const [expirationTick, setExpirationTick] = useState(0)
+  const [, setExpirationTick] = useState(0)
 
   const publicMetadata = (user?.publicMetadata ?? {}) as Record<string, unknown>
   const rawChatStatus = publicMetadata['chat_subscription_status']
@@ -79,14 +79,23 @@ export function useSubscriptionStatus() {
 
   useEffect(() => {
     if (expirationTime === null) return
-    const delay = expirationTime - Date.now()
-    if (delay <= 0) return
-    const timeout = window.setTimeout(
-      () => setExpirationTick((tick) => tick + 1),
-      Math.min(delay + 1, MAX_TIMEOUT_MS),
-    )
-    return () => window.clearTimeout(timeout)
-  }, [expirationTime, expirationTick])
+    let timeout: number | undefined
+    const scheduleExpiration = () => {
+      const delay = expirationTime - Date.now()
+      if (delay <= 0) {
+        setExpirationTick((tick) => tick + 1)
+        return
+      }
+      timeout = window.setTimeout(
+        scheduleExpiration,
+        Math.min(delay + 1, MAX_TIMEOUT_MS),
+      )
+    }
+    scheduleExpiration()
+    return () => {
+      if (timeout !== undefined) window.clearTimeout(timeout)
+    }
+  }, [expirationTime])
 
   const chatSubscriptionActive =
     isLoaded &&

src/services/inference/tinfoil-client.ts

@@ -38,6 +38,7 @@ let cachedSessionTokenWasAuthenticated = false
 let cachedRateLimit: RateLimitInfo | null = null
 let remainingBeforeRequest: number | null = null
 let refreshInFlight: Promise<void> | null = null
+let sessionCacheGeneration = 0
 
 function dispatchRateLimitUpdate(): void {
   if (typeof window !== 'undefined') {
@@ -90,6 +91,7 @@ function surfaceHourlyLimit(parsedError: ServerErrorBody | null): never {
 // through the opaque path.
 async function fetchChatJWT(
   authBearer: string,
+  cacheGeneration: number,
 ): Promise<{ key: string; expiresAt: number | null } | null> {
   let response: Response
   try {
@@ -124,6 +126,7 @@ async function fetchChatJWT(
 
   const parsedError = parseErrorBody(await response.text())
   if (isHourlyLimit(response.status, parsedError)) {
+    if (cacheGeneration !== sessionCacheGeneration) return null
     surfaceHourlyLimit(parsedError)
   }
   return null
@@ -134,6 +137,8 @@ async function fetchSessionToken(): Promise<string> {
     return DEV_API_KEY
   }
 
+  const cacheGeneration = sessionCacheGeneration
+
   // If the user was previously signed in, wait for Clerk to initialize
   // the auth token manager before fetching — otherwise we'd get an
   // anonymous free-tier key that gets cached until expiry.
@@ -164,6 +169,9 @@ async function fetchSessionToken(): Promise<string> {
       )
     }
   }
+  if (cacheGeneration !== sessionCacheGeneration) {
+    return fetchSessionToken()
+  }
   const usedAuthHeader = authBearer !== null
 
   // If the cached token was fetched anonymously but we now have an
@@ -196,7 +204,10 @@ async function fetchSessionToken(): Promise<string> {
   // Anonymous users (and signed-in users without an active subscription) fall
   // back to the opaque /api/keys/chat path below.
   if (authBearer) {
-    const jwt = await fetchChatJWT(authBearer)
+    const jwt = await fetchChatJWT(authBearer, cacheGeneration)
+    if (cacheGeneration !== sessionCacheGeneration) {
+      return fetchSessionToken()
+    }
     if (jwt !== null) {
       cachedSessionToken = jwt.key
       cachedSessionTokenWasAuthenticated = true
@@ -216,9 +227,15 @@ async function fetchSessionToken(): Promise<string> {
   const response = await fetch(`${API_BASE_URL}/api/keys/chat`, {
     headers,
   })
+  if (cacheGeneration !== sessionCacheGeneration) {
+    return fetchSessionToken()
+  }
 
   if (!response.ok) {
     const errorText = await response.text()
+    if (cacheGeneration !== sessionCacheGeneration) {
+      return fetchSessionToken()
+    }
     logError('Failed to fetch session token from server', undefined, {
       component: 'tinfoil-client',
       action: 'fetchSessionToken',
@@ -242,6 +259,9 @@ async function fetchSessionToken(): Promise<string> {
   }
 
   const data = await response.json()
+  if (cacheGeneration !== sessionCacheGeneration) {
+    return fetchSessionToken()
+  }
   cachedSessionToken = data.key
   cachedSessionTokenWasAuthenticated = usedAuthHeader
   if (data.expires_at) {
@@ -295,14 +315,16 @@ export function snapshotAndDecrementRemaining(): void {
 export async function refreshRateLimit(): Promise<void> {
   if (refreshInFlight) return refreshInFlight
 
-  refreshInFlight = (async () => {
+  const refresh = (async () => {
+    const refreshGeneration = sessionCacheGeneration
     const snapshot = remainingBeforeRequest
     remainingBeforeRequest = null
     cachedSessionToken = null
     cachedSessionTokenExpiresAt = null
     try {
       await fetchSessionToken()
       if (
+        refreshGeneration === sessionCacheGeneration &&
         snapshot !== null &&
         cachedRateLimit &&
         cachedRateLimit.remaining >= snapshot
@@ -318,31 +340,38 @@ export async function refreshRateLimit(): Promise<void> {
         component: 'tinfoil-client',
         action: 'refreshRateLimit',
       })
-    } finally {
-      refreshInFlight = null
     }
   })()
+  refreshInFlight = refresh
 
-  return refreshInFlight
+  try {
+    await refresh
+  } finally {
+    if (refreshInFlight === refresh) {
+      refreshInFlight = null
+    }
+  }
 }
 
 export function resetTinfoilClient(): void {
+  sessionCacheGeneration++
   clientInstance = null
   secureClient = null
   lastSessionToken = null
   cachedSessionToken = null
   cachedSessionTokenExpiresAt = null
   cachedSessionTokenWasAuthenticated = false
-  remainingBeforeRequest = null
   cachedRateLimit = null
   remainingBeforeRequest = null
   refreshInFlight = null
 }
 
 export function invalidateSessionCache(): void {
+  sessionCacheGeneration++
   cachedSessionToken = null
   cachedSessionTokenExpiresAt = null
   cachedSessionTokenWasAuthenticated = false
+  remainingBeforeRequest = null
   if (cachedRateLimit !== null) {
     cachedRateLimit = null
     dispatchRateLimitUpdate()

tests/hooks/use-subscription-status.test.ts

@@ -18,6 +18,11 @@ describe('hasActiveSubscription', () => {
     expect(hasActiveSubscription('active', past, now)).toBe(false)
   })
 
+  it('allows trialing subscriptions with or without a future cutoff', () => {
+    expect(hasActiveSubscription('trialing', null, now)).toBe(true)
+    expect(hasActiveSubscription('trialing', future, now)).toBe(true)
+  })
+
   it('allows canceled subscriptions before their cutoff', () => {
     expect(hasActiveSubscription('canceled', future, now)).toBe(true)
   })

tests/services/inference/tinfoil-client-cache.test.ts

@@ -0,0 +1,108 @@
+import {
+  getRateLimitInfo,
+  invalidateSessionCache,
+  refreshRateLimit,
+  resetTinfoilClient,
+} from '@/services/inference/tinfoil-client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/config', () => ({
+  API_BASE_URL: 'https://api.example.com',
+  DEV_API_KEY: '',
+  IS_DEV: false,
+}))
+
+vi.mock('@/services/auth', () => ({
+  authTokenManager: {
+    isInitialized: () => false,
+    waitForInit: vi.fn(),
+    getValidToken: vi.fn(),
+  },
+}))
+
+vi.mock('@/utils/error-handling', () => ({
+  logError: vi.fn(),
+}))
+
+const chatKeyResponse = (key: string, remaining: number) =>
+  new Response(
+    JSON.stringify({
+      key,
+      is_free_tier: true,
+      rate_limit: {
+        max_requests: 7,
+        remaining,
+        resets_at: '2026-07-24T00:00:00Z',
+      },
+    }),
+    { status: 200 },
+  )
+
+describe('tinfoil-client session cache', () => {
+  beforeEach(() => {
+    resetTinfoilClient()
+    localStorage.clear()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('does not restore stale rate limits after invalidation', async () => {
+    let resolveStaleResponse: (response: Response) => void = () => {}
+    const staleResponse = new Promise<Response>((resolve) => {
+      resolveStaleResponse = resolve
+    })
+    const fetchMock = vi
+      .fn()
+      .mockReturnValueOnce(staleResponse)
+      .mockResolvedValueOnce(chatKeyResponse('current-key', 6))
+    vi.stubGlobal('fetch', fetchMock)
+
+    const refresh = refreshRateLimit()
+    await vi.waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+
+    invalidateSessionCache()
+    resolveStaleResponse(chatKeyResponse('stale-key', 1))
+    await refresh
+
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+    expect(getRateLimitInfo()?.remaining).toBe(6)
+  })
+
+  it('keeps tracking a newer refresh when an older refresh finishes', async () => {
+    let resolveOldResponse: (response: Response) => void = () => {}
+    let resolveNewResponse: (response: Response) => void = () => {}
+    const oldResponse = new Promise<Response>((resolve) => {
+      resolveOldResponse = resolve
+    })
+    const newResponse = new Promise<Response>((resolve) => {
+      resolveNewResponse = resolve
+    })
+    const fetchMock = vi
+      .fn()
+      .mockReturnValueOnce(oldResponse)
+      .mockReturnValueOnce(newResponse)
+      .mockResolvedValueOnce(chatKeyResponse('retried-key', 5))
+      .mockResolvedValue(chatKeyResponse('unexpected-key', 4))
+    vi.stubGlobal('fetch', fetchMock)
+
+    const oldRefresh = refreshRateLimit()
+    await vi.waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+
+    resetTinfoilClient()
+    const newRefresh = refreshRateLimit()
+    await vi.waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(2))
+
+    resolveOldResponse(chatKeyResponse('stale-key', 1))
+    await oldRefresh
+    expect(fetchMock).toHaveBeenCalledTimes(3)
+
+    const coalescedRefresh = refreshRateLimit()
+    expect(fetchMock).toHaveBeenCalledTimes(3)
+
+    resolveNewResponse(chatKeyResponse('current-key', 6))
+    await Promise.all([newRefresh, coalescedRefresh])
+    expect(fetchMock).toHaveBeenCalledTimes(3)
+  })
+})