fix: allow clearing fetch cache on sign out

packages/clerk-js/src/core/cacheClearManager.ts

@@ -0,0 +1,28 @@
+import { debugLogger } from '@/utils/debug';
+
+const clearCallbacks = new Map<string, () => void>();
+
+/**
+ * Registers a callback to be executed when caches are cleared.
+ * @param id - Unique identifier for the callback
+ * @param callback - Function to execute when clearing caches
+ * @returns Function to unregister the callback
+ */
+export const registerClearCallback = (id: string, callback: () => void): (() => void) => {
+  clearCallbacks.set(id, callback);
+  return () => clearCallbacks.delete(id);
+};
+
+/**
+ * Clears all registered caches by executing all registered callbacks.
+ * Continues execution even if individual callbacks throw errors.
+ */
+export const clearAllCaches = (): void => {
+  clearCallbacks.forEach(callback => {
+    try {
+      callback();
+    } catch (error) {
+      debugLogger.error('Error executing clear callback', { error }, 'CacheClearManager');
+    }
+  });
+};

packages/clerk-js/src/core/clerk.ts

@@ -525,6 +525,15 @@ export class Clerk implements ClerkInterface {
       // Notify other tabs that user is signing out and clean up cookies.
       eventBus.emit(events.UserSignOut, null);
 
+      if (typeof window !== 'undefined') {
+        try {
+          const { clearAllCaches } = await import('./cacheClearManager');
+          clearAllCaches();
+        } catch (error) {
+          debugLogger.debug('CacheClearManager not available during signOut, skipping cache clear', { error }, 'clerk');
+        }
+      }
+
       this.#setTransitiveState();
 
       await tracker.track(async () => {

packages/clerk-js/src/core/requestCache.ts

@@ -0,0 +1,61 @@
+import { debugLogger } from '@/utils/debug';
+
+export type RequestCacheState<T = unknown> = {
+  data: T | null;
+  error: Error | null;
+  isLoading: boolean;
+  isValidating: boolean;
+  cachedAt?: number;
+};
+
+const cache = new Map<string, RequestCacheState<unknown>>();
+const subscribers = new Set<() => void>();
+
+/**
+ * Gets a cache entry
+ */
+export const getCacheEntry = <T>(key: string): RequestCacheState<T> | undefined => {
+  return cache.get(key) as RequestCacheState<T> | undefined;
+};
+
+/**
+ * Sets a cache entry and notifies subscribers
+ */
+export const setCacheEntry = <T>(
+  key: string,
+  state: RequestCacheState<T> | ((current: RequestCacheState<T> | undefined) => RequestCacheState<T>),
+): void => {
+  const currentState = cache.get(key) as RequestCacheState<T> | undefined;
+  const newState = typeof state === 'function' ? state(currentState) : state;
+  cache.set(key, newState as RequestCacheState<unknown>);
+  notifySubscribers();
+};
+
+/**
+ * Subscribes to cache changes
+ */
+export const subscribe = (callback: () => void): (() => void) => {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+};
+
+/**
+ * Clears the entire request cache
+ */
+export const clearRequestCache = (): void => {
+  cache.clear();
+  notifySubscribers();
+};
+
+/**
+ * Notifies all subscribers of cache changes
+ */
+const notifySubscribers = (): void => {
+  subscribers.forEach(callback => {
+    try {
+      callback();
+    } catch (error) {
+      debugLogger.error('Error executing subscriber callback', { error }, 'RequestCache');
+    }
+  });
+};

packages/clerk-js/src/ui/hooks/useFetch.ts

@@ -1,54 +1,43 @@
 import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react';
 
-export type State<Data = any, Error = any> = {
-  data: Data | null;
-  error: Error | null;
-  /**
-   * if there's an ongoing request and no "loaded data"
-   */
-  isLoading: boolean;
-  /**
-   * if there's a request or revalidation loading
-   */
-  isValidating: boolean;
-  cachedAt?: number;
-};
-
-/**
- * Global cache for storing status of fetched resources
- */
-let requestCache = new Map<string, State>();
-
-/**
- * A set to store subscribers in order to notify when the value of a key of `requestCache` changes
- */
-const subscribers = new Set<() => void>();
+import { registerClearCallback } from '@/core/cacheClearManager';
+import {
+  clearRequestCache,
+  getCacheEntry,
+  type RequestCacheState,
+  setCacheEntry,
+  subscribe,
+} from '@/core/requestCache';
 
 /**
  * This utility should only be used in tests to clear previously fetched data
  */
 export const clearFetchCache = () => {
-  requestCache = new Map<string, State>();
+  clearRequestCache();
 };
 
+if (typeof window !== 'undefined') {
+  registerClearCallback('useFetch', clearFetchCache);
+}
+
 const serialize = (key: unknown) => (typeof key === 'string' ? key : JSON.stringify(key));
 
 const useCache = <K = any, V = any>(
   key: K,
   serializer = serialize,
 ): {
-  getCache: () => State<V> | undefined;
-  setCache: (state: State<V> | ((params: State<V>) => State<V>)) => void;
+  getCache: () => RequestCacheState<V> | undefined;
+  setCache: (
+    state: RequestCacheState<V> | ((params: RequestCacheState<V> | undefined) => RequestCacheState<V>),
+  ) => void;
   clearCache: () => void;
   subscribeCache: (callback: () => void) => () => void;
 } => {
   const serializedKey = serializer(key);
-  const get = useCallback(() => requestCache.get(serializedKey), [serializedKey]);
+  const get = useCallback(() => getCacheEntry<V>(serializedKey), [serializedKey]);
   const set = useCallback(
-    (data: State | ((params: State) => State)) => {
-      // @ts-ignore
-      requestCache.set(serializedKey, typeof data === 'function' ? data(get()) : data);
-      subscribers.forEach(callback => callback());
+    (data: RequestCacheState<V> | ((params: RequestCacheState<V> | undefined) => RequestCacheState<V>)) => {
+      setCacheEntry(serializedKey, data);
     },
     [serializedKey],
   );
@@ -62,15 +51,14 @@ const useCache = <K = any, V = any>(
       cachedAt: undefined,
     });
   }, [set]);
-  const subscribe = useCallback((callback: () => void) => {
-    subscribers.add(callback);
-    return () => subscribers.delete(callback);
+  const subscribeCache = useCallback((callback: () => void) => {
+    return subscribe(callback);
   }, []);
 
   return {
     getCache: get,
     setCache: set,
-    subscribeCache: subscribe,
+    subscribeCache,
     clearCache: clear,
   };
 };
@@ -116,11 +104,15 @@ export const useFetch = <K, T>(
   const revalidateCache = useSyncExternalStore(subscribeRevalidationCounter, getRevalidationCounter);
 
   const revalidate = useCallback(() => {
-    setCache(d => ({
+    setCache((d: RequestCacheState<T> | undefined) => ({
+      data: null,
+      error: null,
+      isLoading: false,
+      isValidating: false,
       ...d,
       cachedAt: 0,
     }));
-    setRevalidationCounter(d => ({
+    setRevalidationCounter((d: RequestCacheState<number> | undefined) => ({
       isLoading: false,
       isValidating: false,
       error: null,