@oxyhq/auth 2.0.4 → 2.0.5

package/src/hooks/queryClient.ts

@@ -1,112 +1,169 @@
-import { QueryClient } from '@tanstack/react-query';
+/**
+ * Web QueryClient with offline-first defaults + localStorage persistence.
+ *
+ * Mirrors the persistence behaviour in `@oxyhq/services/queryClient` so
+ * web auth apps (FedCM, popup, redirect flows) survive a page reload with
+ * cached identity + paused mutations intact.
+ *
+ * Persistence is opt-in via `attachQueryPersistence(...)` so SSR callers
+ * (Next.js getServerSideProps, Vite SSR, tests) can create a stateless
+ * client without touching `window`.
+ */
+
+import { QueryClient, type Mutation, type Query } from '@tanstack/react-query';
+import {
+  persistQueryClient,
+  type PersistedClient,
+} from '@tanstack/react-query-persist-client';
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
 import type { StorageInterface } from '../utils/storageHelpers';
 
-const QUERY_CACHE_KEY = 'oxy_query_cache';
-const QUERY_CACHE_VERSION = '1';
+const QUERY_CACHE_KEY = 'oxy_auth_query_cache_v2';
+const QUERY_CACHE_MAX_AGE = 30 * 24 * 60 * 60 * 1000;
+const QUERY_PERSIST_THROTTLE_MS = 1_000;
+
+/**
+ * Query-key prefixes whose data is safe to restore across reloads.
+ * Web auth surfaces are session/profile heavy — lists and history are not
+ * persisted to keep the localStorage footprint small.
+ */
+const PERSISTED_QUERY_PREFIXES: ReadonlyArray<string> = [
+  'accounts',
+  'users',
+  'sessions',
+  'auth',
+];
+
+function shouldDehydrateQuery(query: Query): boolean {
+  if (query.state.status !== 'success') return false;
+  const head = query.queryKey[0];
+  return typeof head === 'string' && PERSISTED_QUERY_PREFIXES.includes(head);
+}
+
+function shouldDehydrateMutation(_mutation: Mutation): boolean {
+  return true;
+}
 
 /**
- * Custom persistence adapter for TanStack Query using our StorageInterface
+ * Best-effort detection — works in browsers, Node SSR, and React Server
+ * Components. `localStorage` is gated behind `window` because Node and edge
+ * runtimes may polyfill `globalThis.localStorage` inconsistently.
  */
-export const createPersistenceAdapter = (storage: StorageInterface) => {
-  return {
-    persistClient: async (client: any) => {
-      try {
-        const serialized = JSON.stringify({
-          clientState: client,
-          timestamp: Date.now(),
-          version: QUERY_CACHE_VERSION,
-        });
-        await storage.setItem(QUERY_CACHE_KEY, serialized);
-      } catch (error) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn('[QueryClient] Failed to persist cache:', error);
-        }
+function getBrowserLocalStorage(): Storage | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    if (!window.localStorage) return null;
+    return window.localStorage;
+  } catch {
+    // Access blocked (Safari Private Mode, sandboxed iframe, etc.)
+    return null;
+  }
+}
+
+export const createPersistenceAdapter = (storage: StorageInterface) => ({
+  persistClient: async (client: unknown): Promise<void> => {
+    try {
+      await storage.setItem(QUERY_CACHE_KEY, JSON.stringify(client));
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('[QueryClient] Failed to persist cache', error);
       }
-    },
-    restoreClient: async () => {
-      try {
-        const cached = await storage.getItem(QUERY_CACHE_KEY);
-        if (!cached) return undefined;
-
-        const parsed = JSON.parse(cached);
-        
-        // Check version compatibility
-        if (parsed.version !== QUERY_CACHE_VERSION) {
-          // Clear old cache on version mismatch
-          await storage.removeItem(QUERY_CACHE_KEY);
-          return undefined;
-        }
-
-        // Check if cache is too old (30 days)
-        const maxAge = 30 * 24 * 60 * 60 * 1000;
-        if (parsed.timestamp && Date.now() - parsed.timestamp > maxAge) {
-          await storage.removeItem(QUERY_CACHE_KEY);
-          return undefined;
-        }
-
-        return parsed.clientState;
-      } catch (error) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn('[QueryClient] Failed to restore cache:', error);
-        }
-        return undefined;
+    }
+  },
+  restoreClient: async (): Promise<unknown> => {
+    try {
+      const cached = await storage.getItem(QUERY_CACHE_KEY);
+      return cached ? JSON.parse(cached) : undefined;
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('[QueryClient] Failed to restore cache', error);
       }
-    },
-    removeClient: async () => {
-      try {
-        await storage.removeItem(QUERY_CACHE_KEY);
-      } catch (error) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn('[QueryClient] Failed to remove cache:', error);
-        }
+      return undefined;
+    }
+  },
+  removeClient: async (): Promise<void> => {
+    try {
+      await storage.removeItem(QUERY_CACHE_KEY);
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('[QueryClient] Failed to remove cache', error);
       }
-    },
-  };
-};
+    }
+  },
+});
 
-/**
- * Create a QueryClient with offline-first configuration
- */
-export const createQueryClient = (storage?: StorageInterface | null): QueryClient => {
-  const client = new QueryClient({
+export const createQueryClient = (): QueryClient =>
+  new QueryClient({
     defaultOptions: {
       queries: {
-        // Data is fresh for 5 minutes
         staleTime: 5 * 60 * 1000,
-        // Keep unused data in cache for 10 minutes
-        gcTime: 10 * 60 * 1000,
-        // Retry 3 times with exponential backoff
+        gcTime: 30 * 60 * 1000,
         retry: 3,
-        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
-        // Refetch on reconnect
+        retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
         refetchOnReconnect: true,
-        // Don't refetch on window focus (better for mobile)
         refetchOnWindowFocus: false,
-        // Offline-first: use cache when offline
         networkMode: 'offlineFirst',
       },
       mutations: {
-        // Retry once for mutations
         retry: 1,
-        // Offline-first: queue mutations when offline
         networkMode: 'offlineFirst',
       },
     },
   });
 
-  // Note: Persistence is handled by TanStack Query's built-in persistence
-  // For now, we rely on the query client's default behavior with networkMode: 'offlineFirst'
-  // The cache will be available in memory and queries will use cached data when offline
-  // Full persistence to AsyncStorage can be added later with @tanstack/react-query-persist-client if needed
-
-  return client;
-};
+export interface AttachPersistenceResult {
+  restored: Promise<void>;
+  unsubscribe: () => void;
+}
 
 /**
- * Clear persisted query cache
+ * Wire `persistQueryClient` to browser `localStorage` (or a no-op when not
+ * in a browser). Returns the restore promise so consumers can `await` it
+ * before exposing the client to <Suspense> boundaries.
  */
-export const clearQueryCache = async (storage: StorageInterface): Promise<void> => {
-  const adapter = createPersistenceAdapter(storage);
-  await adapter.removeClient();
+export const attachQueryPersistence = (
+  queryClient: QueryClient,
+): AttachPersistenceResult => {
+  const localStorage = getBrowserLocalStorage();
+  if (!localStorage) {
+    return { restored: Promise.resolve(), unsubscribe: () => {} };
+  }
+
+  const persister = createSyncStoragePersister({
+    storage: localStorage,
+    key: QUERY_CACHE_KEY,
+    throttleTime: QUERY_PERSIST_THROTTLE_MS,
+  });
+
+  const [unsubscribe, restored] = persistQueryClient({
+    queryClient,
+    persister,
+    maxAge: QUERY_CACHE_MAX_AGE,
+    dehydrateOptions: {
+      shouldDehydrateQuery,
+      shouldDehydrateMutation,
+    },
+  });
+
+  restored.catch((error) => {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('[QueryClient] Failed to restore persisted cache', error);
+    }
+  });
+
+  return { unsubscribe, restored };
+};
+
+export const clearQueryCache = async (
+  storage: StorageInterface,
+): Promise<void> => {
+  try {
+    await storage.removeItem(QUERY_CACHE_KEY);
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('[QueryClient] Failed to remove cache', error);
+    }
+  }
 };
 
+export type { PersistedClient };

package/src/hooks/useFileDownloadUrl.ts

@@ -1,11 +1,5 @@
 import { useEffect, useState } from 'react';
-import { OxyServices } from '@oxyhq/core';
-
-let oxyInstance: OxyServices | null = null;
-
-export const setOxyFileUrlInstance = (instance: OxyServices) => {
-  oxyInstance = instance;
-};
+import type { OxyServices } from '@oxyhq/core';
 
 export interface UseFileDownloadUrlOptions {
   variant?: string;
@@ -21,38 +15,21 @@ export interface UseFileDownloadUrlResult {
 /**
  * Hook to resolve a file's download URL asynchronously.
  *
- * Prefers the provided `oxyServices` instance, falls back to the module-level
- * singleton set via `setOxyFileUrlInstance`.
- *
  * Uses `getFileDownloadUrlAsync` first, falling back to the synchronous
  * `getFileDownloadUrl` if the async call fails.
  */
 export const useFileDownloadUrl = (
-  fileIdOrServices?: string | OxyServices | null,
-  fileIdOrOptions?: string | UseFileDownloadUrlOptions | null,
-  maybeOptions?: UseFileDownloadUrlOptions
+  oxyServices: OxyServices | null | undefined,
+  fileId: string | null | undefined,
+  options?: UseFileDownloadUrlOptions,
 ): UseFileDownloadUrlResult => {
-  // Support two call signatures:
-  // 1. useFileDownloadUrl(oxyServices, fileId, options)  — preferred
-  // 2. useFileDownloadUrl(fileId, options)               — legacy (uses singleton)
-  let services: OxyServices | null;
-  let fileId: string | null | undefined;
-  let options: UseFileDownloadUrlOptions | undefined;
-
-  if (fileIdOrServices instanceof OxyServices) {
-    services = fileIdOrServices;
-    fileId = typeof fileIdOrOptions === 'string' ? fileIdOrOptions : null;
-    options = maybeOptions;
-  } else {
-    services = oxyInstance;
-    fileId = typeof fileIdOrServices === 'string' ? fileIdOrServices : null;
-    options = typeof fileIdOrOptions === 'object' && fileIdOrOptions !== null ? fileIdOrOptions as UseFileDownloadUrlOptions : undefined;
-  }
-
   const [url, setUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
+  const variant = options?.variant;
+  const expiresIn = options?.expiresIn;
+
   useEffect(() => {
     if (!fileId) {
       setUrl(null);
@@ -61,7 +38,7 @@ export const useFileDownloadUrl = (
       return;
     }
 
-    if (!services) {
+    if (!oxyServices) {
       setUrl(null);
       setLoading(false);
       setError(new Error('OxyServices instance not configured for useFileDownloadUrl'));
@@ -69,22 +46,22 @@ export const useFileDownloadUrl = (
     }
 
     let cancelled = false;
-    const instance = services;
+    const instance = oxyServices;
+    const targetFileId = fileId;
 
     const load = async () => {
       setLoading(true);
       setError(null);
 
       try {
-        const { variant, expiresIn } = options || {};
         let resolvedUrl: string | null = null;
 
         if (typeof instance.getFileDownloadUrlAsync === 'function') {
-          resolvedUrl = await instance.getFileDownloadUrlAsync(fileId!, variant, expiresIn);
+          resolvedUrl = await instance.getFileDownloadUrlAsync(targetFileId, variant, expiresIn);
         }
 
         if (!resolvedUrl && typeof instance.getFileDownloadUrl === 'function') {
-          resolvedUrl = instance.getFileDownloadUrl(fileId!, variant, expiresIn);
+          resolvedUrl = instance.getFileDownloadUrl(targetFileId, variant, expiresIn);
         }
 
         if (!cancelled) {
@@ -94,8 +71,7 @@ export const useFileDownloadUrl = (
         // Fallback to sync URL on error where possible
         try {
           if (typeof instance.getFileDownloadUrl === 'function') {
-            const { variant, expiresIn } = options || {};
-            const fallbackUrl = instance.getFileDownloadUrl(fileId!, variant, expiresIn);
+            const fallbackUrl = instance.getFileDownloadUrl(targetFileId, variant, expiresIn);
             if (!cancelled) {
               setUrl(fallbackUrl || null);
               setError(err instanceof Error ? err : new Error(String(err)));
@@ -103,7 +79,7 @@ export const useFileDownloadUrl = (
             return;
           }
         } catch {
-          // ignore secondary failure
+          // Secondary failure: surface the original error below.
         }
 
         if (!cancelled) {
@@ -121,7 +97,7 @@ export const useFileDownloadUrl = (
     return () => {
       cancelled = true;
     };
-  }, [fileId, services, options?.variant, options?.expiresIn]);
+  }, [fileId, oxyServices, variant, expiresIn]);
 
   return { url, loading, error };
 };

package/src/hooks/useSessionSocket.ts

@@ -27,12 +27,40 @@ function readTokenFromStorage(): string | null {
   if (typeof window === 'undefined') return null;
   try {
     return window.localStorage.getItem(LS_ACCESS_TOKEN_KEY);
-  } catch {
+  } catch (err) {
+    console.warn('[oxy.session-socket] localStorage read failed:', err);
     return null;
   }
 }
 
-type SocketIOFactory = (uri: string, opts?: Record<string, unknown>) => unknown;
+/**
+ * Minimal subset of the socket.io-client Socket API used by this hook.
+ * We avoid importing socket.io-client types directly because the package
+ * is an optional peer dependency.
+ *
+ * `on()` uses a generic per-call handler signature because each socket event
+ * carries its own payload shape.
+ */
+interface MinimalSocket {
+  id?: string;
+  disconnected: boolean;
+  connect: () => void;
+  disconnect: () => void;
+  on<Args extends unknown[] = unknown[]>(
+    event: string,
+    handler: (...args: Args) => void
+  ): void;
+}
+
+/**
+ * Socket extended with a private property used to track the cross-tab
+ * storage event listener so cleanup can remove it.
+ */
+interface SocketWithStorageHandler extends MinimalSocket {
+  __oxyStorageHandler?: (event: StorageEvent) => void;
+}
+
+type SocketIOFactory = (uri: string, opts?: Record<string, unknown>) => MinimalSocket;
 
 let _io: SocketIOFactory | null = null;
 let _ioLoadAttempted = false;
@@ -42,11 +70,14 @@ async function getSocketIO(): Promise<SocketIOFactory | null> {
   if (_ioLoadAttempted) return null;
   _ioLoadAttempted = true;
   try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const mod: any = await import('socket.io-client');
-    _io = (mod.io ?? mod.default) as SocketIOFactory;
+    const mod = (await import('socket.io-client')) as {
+      io?: SocketIOFactory;
+      default?: SocketIOFactory;
+    };
+    _io = mod.io ?? mod.default ?? null;
     return _io;
-  } catch {
+  } catch (err) {
+    console.warn('[oxy.session-socket] socket.io-client import failed:', err);
     debug.warn('socket.io-client is not installed. useSessionSocket will be disabled. Install it with: bun add socket.io-client');
     return null;
   }
@@ -72,7 +103,7 @@ export function useSessionSocket(options?: UseSessionSocketOptions) {
     return active?.deviceId ?? null;
   }, [sessions, activeSessionId]);
 
-  const socketRef = useRef<any>(null);
+  const socketRef = useRef<SocketWithStorageHandler | null>(null);
 
   // Store callbacks and values in refs to avoid reconnecting when they change
   const clearSessionStateRef = useRef(clearSessionState);
@@ -128,7 +159,7 @@ export function useSessionSocket(options?: UseSessionSocketOptions) {
       // If no token is available at all, we skip the initial connect and let
       // the storage listener or retry logic connect when a token appears.
       const token = resolveToken();
-      socketRef.current = ioFn(baseURL, {
+      const socket: SocketWithStorageHandler = ioFn(baseURL, {
         transports: ['websocket'],
         autoConnect: !!token, // don't auto-connect when there is no token
         auth: (cb: (data: { token: string }) => void) => {
@@ -145,7 +176,7 @@ export function useSessionSocket(options?: UseSessionSocketOptions) {
           cb({ token: resolved });
         },
       });
-      const socket = socketRef.current;
+      socketRef.current = socket;
 
       // Server auto-joins the user to `user:<userId>` room on connection
       const handleConnect = () => {
@@ -188,6 +219,27 @@ export function useSessionSocket(options?: UseSessionSocketOptions) {
         return Promise.resolve();
       };
 
+      const triggerLocalSignOut = async (toastMessage: string, errorContext: string) => {
+        if (onRemoteSignOutRef.current) {
+          onRemoteSignOutRef.current();
+        } else {
+          toast.info(toastMessage);
+        }
+        // Clear local state since the server has already removed the session.
+        // Await so storage cleanup completes before any subsequent navigation.
+        try {
+          await clearSessionStateRef.current();
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            logger.error(
+              `Failed to clear session state after ${errorContext}`,
+              error instanceof Error ? error : new Error(String(error)),
+              { component: 'useSessionSocket' },
+            );
+          }
+        }
+      };
+
       const handleSessionUpdate = async (data: {
         type: string;
         sessionId?: string;
@@ -199,96 +251,74 @@ export function useSessionSocket(options?: UseSessionSocketOptions) {
         const currentActiveSessionId = activeSessionIdRef.current;
         const deviceId = currentDeviceIdRef.current;
 
-        // Handle different event types
-        if (data.type === 'session_removed') {
-          // Track removed session
-          if (data.sessionId && onSessionRemovedRef.current) {
-            onSessionRemovedRef.current(data.sessionId);
-          }
-
-          // If the removed sessionId matches the current activeSessionId, immediately clear state
-          if (data.sessionId === currentActiveSessionId) {
-            if (onRemoteSignOutRef.current) {
-              onRemoteSignOutRef.current();
-            } else {
-              toast.info('You have been signed out remotely.');
+        // Strict whitelist. Every event type that may sign the user out must
+        // appear in the switch. Anything unknown falls through to `default`,
+        // which only logs in dev. This guards against future server-side event
+        // additions (e.g. `session_created` after a successful sign-in)
+        // accidentally triggering sign-out via a fallback branch that compares
+        // `data.sessionId === currentActiveSessionId` — that branch would match
+        // the user's NEW session id and trigger an instant remote sign-out
+        // toast on every login.
+        switch (data.type) {
+          case 'session_removed': {
+            if (data.sessionId && onSessionRemovedRef.current) {
+              onSessionRemovedRef.current(data.sessionId);
             }
-            try {
-              await clearSessionStateRef.current();
-            } catch (error) {
-              if (process.env.NODE_ENV !== 'production') {
-                logger.error('Failed to clear session state after session_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
-              }
+            if (data.sessionId && data.sessionId === currentActiveSessionId) {
+              await triggerLocalSignOut('You have been signed out remotely.', 'session_removed');
+            } else {
+              refreshSessions();
             }
-          } else {
-            refreshSessions();
+            break;
           }
-        } else if (data.type === 'device_removed') {
-          // Track all removed sessions from this device
-          if (data.sessionIds && onSessionRemovedRef.current) {
-            for (const sessionId of data.sessionIds) {
-              onSessionRemovedRef.current(sessionId);
+          case 'device_removed': {
+            if (data.sessionIds && onSessionRemovedRef.current) {
+              for (const sessionId of data.sessionIds) {
+                onSessionRemovedRef.current(sessionId);
+              }
             }
-          }
-
-          // If the removed deviceId matches the current device, immediately clear state
-          if (data.deviceId && data.deviceId === deviceId) {
-            if (onRemoteSignOutRef.current) {
-              onRemoteSignOutRef.current();
+            if (data.deviceId && deviceId && data.deviceId === deviceId) {
+              await triggerLocalSignOut(
+                'This device has been removed. You have been signed out.',
+                'device_removed',
+              );
             } else {
-              toast.info('This device has been removed. You have been signed out.');
-            }
-            try {
-              await clearSessionStateRef.current();
-            } catch (error) {
-              if (process.env.NODE_ENV !== 'production') {
-                logger.error('Failed to clear session state after device_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
-              }
+              refreshSessions();
             }
-          } else {
-            refreshSessions();
+            break;
           }
-        } else if (data.type === 'sessions_removed') {
-          // Track all removed sessions
-          if (data.sessionIds && onSessionRemovedRef.current) {
-            for (const sessionId of data.sessionIds) {
-              onSessionRemovedRef.current(sessionId);
+          case 'sessions_removed': {
+            if (data.sessionIds && onSessionRemovedRef.current) {
+              for (const sessionId of data.sessionIds) {
+                onSessionRemovedRef.current(sessionId);
+              }
             }
-          }
-
-          // If the current activeSessionId is in the removed sessionIds list, immediately clear state
-          if (data.sessionIds && currentActiveSessionId && data.sessionIds.includes(currentActiveSessionId)) {
-            if (onRemoteSignOutRef.current) {
-              onRemoteSignOutRef.current();
+            if (
+              data.sessionIds &&
+              currentActiveSessionId &&
+              data.sessionIds.includes(currentActiveSessionId)
+            ) {
+              await triggerLocalSignOut('You have been signed out remotely.', 'sessions_removed');
             } else {
-              toast.info('You have been signed out remotely.');
+              refreshSessions();
             }
-            try {
-              await clearSessionStateRef.current();
-            } catch (error) {
-              if (process.env.NODE_ENV !== 'production') {
-                logger.error('Failed to clear session state after sessions_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
-              }
-            }
-          } else {
+            break;
+          }
+          case 'session_created':
+          case 'session_update': {
+            // Lifecycle event for the current user. Just resync the sessions
+            // list — never sign out.
             refreshSessions();
+            break;
           }
-        } else {
-          // For other event types (e.g., session_created), refresh sessions
-          refreshSessions();
-
-          // If the current session was logged out (legacy behavior), handle it specially
-          if (data.sessionId === currentActiveSessionId) {
-            if (onRemoteSignOutRef.current) {
-              onRemoteSignOutRef.current();
-            } else {
-              toast.info('You have been signed out remotely.');
-            }
-            try {
-              await clearSessionStateRef.current();
-            } catch (error) {
-              debug.error('Failed to clear session state after session_update:', error);
+          default: {
+            if (process.env.NODE_ENV !== 'production') {
+              logger.warn('Unknown session socket event type', {
+                component: 'useSessionSocket',
+                type: data.type,
+              });
             }
+            break;
           }
         }
       };
@@ -311,7 +341,7 @@ export function useSessionSocket(options?: UseSessionSocketOptions) {
       if (typeof window !== 'undefined') {
         window.addEventListener('storage', handleStorageEvent);
         // Store the handler so cleanup can remove it
-        (socket as any).__oxyStorageHandler = handleStorageEvent;
+        socket.__oxyStorageHandler = handleStorageEvent;
       }
     });
 
@@ -320,12 +350,14 @@ export function useSessionSocket(options?: UseSessionSocketOptions) {
       if (authRetryTimer) {
         clearTimeout(authRetryTimer);
       }
-      if (socketRef.current) {
+      const currentSocket = socketRef.current;
+      if (currentSocket) {
         // Remove cross-tab storage listener
-        if (typeof window !== 'undefined' && (socketRef.current as any).__oxyStorageHandler) {
-          window.removeEventListener('storage', (socketRef.current as any).__oxyStorageHandler);
+        const storageHandler = currentSocket.__oxyStorageHandler;
+        if (typeof window !== 'undefined' && storageHandler) {
+          window.removeEventListener('storage', storageHandler);
         }
-        socketRef.current.disconnect();
+        currentSocket.disconnect();
         socketRef.current = null;
       }
     };