🔒 fix: Robust Cache Reset on User Logout (#1324)

* refactor(Logout): rely on hooks for mutation behavior

* fix: logging out now correctly resets cache, disallowing any cache mixing between the next logged in user on the same browser

* chore: remove additional localStorage values on logout

client/src/components/Nav/Logout.tsx

@@ -7,18 +7,10 @@ const Logout = forwardRef(() => {
   const { logout } = useAuthContext();
   const localize = useLocalize();
 
-  const handleLogout = () => {
-    localStorage.removeItem('lastConversationSetup');
-    localStorage.removeItem('lastSelectedTools');
-    localStorage.removeItem('lastAssistant');
-    localStorage.removeItem('autoScroll');
-    logout();
-  };
-
   return (
     <button
       className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
-      onClick={handleLogout}
+      onClick={() => logout()}
     >
       <LogOutIcon />
       {localize('com_nav_log_out')}

client/src/data-provider/mutations.ts

@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { UseMutationResult } from '@tanstack/react-query';
 import type {
   FileUploadResponse,
@@ -10,9 +10,13 @@ import type {
   UpdatePresetOptions,
   DeletePresetOptions,
   PresetDeleteResponse,
+  LogoutOptions,
   TPreset,
 } from 'librechat-data-provider';
+
 import { dataService, MutationKeys } from 'librechat-data-provider';
+import { useSetRecoilState } from 'recoil';
+import store from '~/store';
 
 export const useUploadImageMutation = (
   options?: UploadMutationOptions,
@@ -69,3 +73,29 @@ export const useDeletePresetMutation = (
     ...(options || {}),
   });
 };
+
+/* login/logout */
+export const useLogoutUserMutation = (
+  options?: LogoutOptions,
+): UseMutationResult<unknown, unknown, undefined, unknown> => {
+  const queryClient = useQueryClient();
+  const setDefaultPreset = useSetRecoilState(store.defaultPreset);
+  return useMutation([MutationKeys.logoutUser], {
+    mutationFn: () => dataService.logout(),
+
+    ...(options || {}),
+    onSuccess: (...args) => {
+      options?.onSuccess?.(...args);
+    },
+    onMutate: (...args) => {
+      setDefaultPreset(null);
+      queryClient.removeQueries();
+      localStorage.removeItem('lastConversationSetup');
+      localStorage.removeItem('lastSelectedModel');
+      localStorage.removeItem('lastSelectedTools');
+      localStorage.removeItem('filesToDelete');
+      localStorage.removeItem('lastAssistant');
+      options?.onMutate?.(...args);
+    },
+  });
+};

client/src/data-provider/queries.ts

@@ -1,5 +1,16 @@
 import { UseQueryOptions, useQuery, QueryObserverResult } from '@tanstack/react-query';
 import { QueryKeys, dataService } from 'librechat-data-provider';
+import type { TPreset } from 'librechat-data-provider';
+export const useGetPresetsQuery = (
+  config?: UseQueryOptions<TPreset[]>,
+): QueryObserverResult<TPreset[], unknown> => {
+  return useQuery<TPreset[]>([QueryKeys.presets], () => dataService.getPresets(), {
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    ...config,
+  });
+};
 
 export const useGetEndpointsConfigOverride = <TData = unknown | boolean>(
   config?: UseQueryOptions<unknown | boolean, unknown, TData>,

client/src/hooks/AuthContext.tsx

@@ -12,13 +12,13 @@ import {
   TLoginResponse,
   setTokenHeader,
   useLoginUserMutation,
-  useLogoutUserMutation,
   useGetUserQuery,
   useRefreshTokenMutation,
   TLoginUser,
 } from 'librechat-data-provider';
-import { TAuthConfig, TUserContext, TAuthContext, TResError } from '~/common';
 import { useNavigate } from 'react-router-dom';
+import { TAuthConfig, TUserContext, TAuthContext, TResError } from '~/common';
+import { useLogoutUserMutation } from '~/data-provider';
 import useTimeout from './useTimeout';
 
 const AuthContext = createContext<TAuthContext | undefined>(undefined);
@@ -30,20 +30,11 @@ const AuthContextProvider = ({
   authConfig?: TAuthConfig;
   children: ReactNode;
 }) => {
+  const navigate = useNavigate();
   const [user, setUser] = useState<TUser | undefined>(undefined);
   const [token, setToken] = useState<string | undefined>(undefined);
   const [error, setError] = useState<string | undefined>(undefined);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
-
-  const navigate = useNavigate();
-
-  const loginUser = useLoginUserMutation();
-  const logoutUser = useLogoutUserMutation();
-  const userQuery = useGetUserQuery({ enabled: !!token });
-  const refreshToken = useRefreshTokenMutation();
-
-  const doSetError = useTimeout({ callback: (error) => setError(error as string | undefined) });
-
   const setUserContext = useCallback(
     (userContext: TUserContext) => {
       const { token, isAuthenticated, user, redirect } = userContext;
@@ -60,23 +51,10 @@ const AuthContextProvider = ({
     },
     [navigate],
   );
+  const doSetError = useTimeout({ callback: (error) => setError(error as string | undefined) });
 
-  const login = (data: TLoginUser) => {
-    loginUser.mutate(data, {
-      onSuccess: (data: TLoginResponse) => {
-        const { user, token } = data;
-        setUserContext({ token, isAuthenticated: true, user, redirect: '/c/new' });
-      },
-      onError: (error: TResError | unknown) => {
-        const resError = error as TResError;
-        doSetError(resError.message);
-        navigate('/login', { replace: true });
-      },
-    });
-  };
-
-  const logout = useCallback(() => {
-    logoutUser.mutate(undefined, {
+  const loginUser = useLoginUserMutation();
+  const logoutUser = useLogoutUserMutation({
     onSuccess: () => {
       setUserContext({
         token: undefined,
@@ -95,7 +73,24 @@ const AuthContextProvider = ({
       });
     },
   });
-  }, [setUserContext, doSetError, logoutUser]);
+
+  const logout = useCallback(() => logoutUser.mutate(undefined), [logoutUser]);
+  const userQuery = useGetUserQuery({ enabled: !!token });
+  const refreshToken = useRefreshTokenMutation();
+
+  const login = (data: TLoginUser) => {
+    loginUser.mutate(data, {
+      onSuccess: (data: TLoginResponse) => {
+        const { user, token } = data;
+        setUserContext({ token, isAuthenticated: true, user, redirect: '/c/new' });
+      },
+      onError: (error: TResError | unknown) => {
+        const resError = error as TResError;
+        doSetError(resError.message);
+        navigate('/login', { replace: true });
+      },
+    });
+  };
 
   const silentRefresh = useCallback(() => {
     if (authConfig?.test) {

client/src/hooks/Conversations/usePresets.ts

@@ -1,16 +1,15 @@
-import {
-  QueryKeys,
-  modularEndpoints,
-  useGetPresetsQuery,
-  useCreatePresetMutation,
-} from 'librechat-data-provider';
+import { QueryKeys, modularEndpoints, useCreatePresetMutation } from 'librechat-data-provider';
 import filenamify from 'filenamify';
 import { useCallback, useEffect, useRef } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import exportFromJSON from 'export-from-json';
 import { useQueryClient } from '@tanstack/react-query';
 import type { TPreset } from 'librechat-data-provider';
-import { useUpdatePresetMutation, useDeletePresetMutation } from '~/data-provider';
+import {
+  useUpdatePresetMutation,
+  useDeletePresetMutation,
+  useGetPresetsQuery,
+} from '~/data-provider';
 import { useChatContext, useToastContext } from '~/Providers';
 import useNavigateToConvo from '~/hooks/useNavigateToConvo';
 import useDefaultConvo from '~/hooks/useDefaultConvo';
@@ -22,22 +21,28 @@ import store from '~/store';
 
 export default function usePresets() {
   const localize = useLocalize();
-  const { user } = useAuthContext();
+  const hasLoaded = useRef(false);
   const queryClient = useQueryClient();
   const { showToast } = useToastContext();
-  const hasLoaded = useRef(false);
+  const { user, isAuthenticated } = useAuthContext();
 
   const [_defaultPreset, setDefaultPreset] = useRecoilState(store.defaultPreset);
   const setPresetModalVisible = useSetRecoilState(store.presetModalVisible);
   const { preset, conversation, newConversation, setPreset } = useChatContext();
-  const presetsQuery = useGetPresetsQuery({ enabled: !!user });
+  const presetsQuery = useGetPresetsQuery({ enabled: !!user && isAuthenticated });
 
   useEffect(() => {
-    if (_defaultPreset || !presetsQuery.data || hasLoaded.current) {
+    const { data: presets } = presetsQuery;
+    if (_defaultPreset || !presets || hasLoaded.current) {
       return;
     }
 
-    const defaultPreset = presetsQuery.data.find((p) => p.defaultPreset);
+    if (presets && presets.length > 0 && user && presets[0].user !== user?.id) {
+      presetsQuery.refetch();
+      return;
+    }
+
+    const defaultPreset = presets.find((p) => p.defaultPreset);
     if (!defaultPreset) {
       hasLoaded.current = true;
       return;
@@ -49,7 +54,7 @@ export default function usePresets() {
     hasLoaded.current = true;
     // dependencies are stable and only needed once
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [presetsQuery.data]);
+  }, [presetsQuery.data, user]);
 
   const setPresets = useCallback(
     (presets: TPreset[]) => {

packages/data-provider/src/data-service.ts

@@ -1,5 +1,5 @@
 import * as f from './types/files';
-import * as p from './types/presets';
+import * as m from './types/mutations';
 import * as a from './types/assistants';
 import * as t from './types';
 import * as s from './schemas';
@@ -82,7 +82,7 @@ export function updatePreset(payload: s.TPreset): Promise<s.TPreset> {
   return request.post(endpoints.presets(), payload);
 }
 
-export function deletePreset(arg: s.TPreset | undefined): Promise<p.PresetDeleteResponse> {
+export function deletePreset(arg: s.TPreset | undefined): Promise<m.PresetDeleteResponse> {
   return request.post(endpoints.deletePreset(), arg);
 }
 

packages/data-provider/src/index.ts

@@ -2,7 +2,7 @@
 export * from './types';
 export * from './types/assistants';
 export * from './types/files';
-export * from './types/presets';
+export * from './types/mutations';
 /*
  * react query
  * TODO: move to client, or move schemas/types to their own package

packages/data-provider/src/keys.ts

@@ -23,4 +23,5 @@ export enum MutationKeys {
   fileDelete = 'fileDelete',
   updatePreset = 'updatePreset',
   deletePreset = 'deletePreset',
+  logoutUser = 'logoutUser',
 }

packages/data-provider/src/react-query-service.ts

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-query';
 import * as t from './types';
 import * as s from './schemas';
-import * as p from './types/presets';
+import * as m from './types/mutations';
 import * as dataService from './data-service';
 import request from './request';
 import { QueryKeys } from './keys';
@@ -306,19 +306,8 @@ export const useUpdatePresetMutation = (): UseMutationResult<
   });
 };
 
-export const useGetPresetsQuery = (
-  config?: UseQueryOptions<s.TPreset[]>,
-): QueryObserverResult<s.TPreset[], unknown> => {
-  return useQuery<s.TPreset[]>([QueryKeys.presets], () => dataService.getPresets(), {
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    refetchOnMount: false,
-    ...config,
-  });
-};
-
 export const useDeletePresetMutation = (): UseMutationResult<
-  p.PresetDeleteResponse,
+  m.PresetDeleteResponse,
   unknown,
   s.TPreset | undefined,
   unknown
@@ -370,14 +359,8 @@ export const useLoginUserMutation = (): UseMutationResult<
 > => {
   const queryClient = useQueryClient();
   return useMutation((payload: t.TLoginUser) => dataService.login(payload), {
-    onSuccess: () => {
-      queryClient.invalidateQueries([QueryKeys.user]);
-      queryClient.invalidateQueries([QueryKeys.presets]);
-      queryClient.invalidateQueries([QueryKeys.conversation]);
-      queryClient.invalidateQueries([QueryKeys.allConversations]);
-    },
     onMutate: () => {
-      queryClient.invalidateQueries([QueryKeys.models]);
+      queryClient.removeQueries();
     },
   });
 };
@@ -396,15 +379,6 @@ export const useRegisterUserMutation = (): UseMutationResult<
   });
 };
 
-export const useLogoutUserMutation = (): UseMutationResult<unknown> => {
-  const queryClient = useQueryClient();
-  return useMutation(() => dataService.logout(), {
-    onSuccess: () => {
-      queryClient.invalidateQueries([QueryKeys.user]);
-    },
-  });
-};
-
 export const useRefreshTokenMutation = (): UseMutationResult<
   t.TRefreshTokenResponse,
   unknown,
@@ -414,7 +388,12 @@ export const useRefreshTokenMutation = (): UseMutationResult<
   const queryClient = useQueryClient();
   return useMutation(() => request.refreshToken(), {
     onMutate: () => {
-      queryClient.invalidateQueries([QueryKeys.models]);
+      queryClient.removeQueries();
+      localStorage.removeItem('lastConversationSetup');
+      localStorage.removeItem('lastSelectedModel');
+      localStorage.removeItem('lastSelectedTools');
+      localStorage.removeItem('filesToDelete');
+      localStorage.removeItem('lastAssistant');
     },
   });
 };

packages/data-provider/src/types/mutations.ts

@@ -20,3 +20,9 @@ export type DeletePresetOptions = {
   onMutate?: (variables: TPreset | undefined) => void | Promise<unknown>;
   onError?: (error: unknown, variables: TPreset | undefined, context?: unknown) => void;
 };
+
+export type LogoutOptions = {
+  onSuccess?: (data: unknown, variables: undefined, context?: unknown) => void;
+  onMutate?: (variables: undefined) => void | Promise<unknown>;
+  onError?: (error: unknown, variables: undefined, context?: unknown) => void;
+};