feat: re-integrate AuthContext to manage agent marketplace visibility based on authentication state

client/src/components/Conversations/Conversations.tsx

@@ -1,11 +1,11 @@
-import { useMemo, memo, type FC, useCallback, useEffect, useRef } from 'react';
+import { useMemo, memo, type FC, useCallback, useEffect, useRef, useContext } from 'react';
 import throttle from 'lodash/throttle';
 import { ChevronRight } from 'lucide-react';
 import { useRecoilValue } from 'recoil';
 import { Spinner, useMediaQuery } from '@librechat/client';
-import { TConversation, PermissionTypes, Permissions } from 'librechat-data-provider';
 import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
-import { useLocalize, TranslationKeys, useFavorites, useHasAccess } from '~/hooks';
+import { TConversation, PermissionTypes, Permissions } from 'librechat-data-provider';
+import { useLocalize, TranslationKeys, useFavorites, useHasAccess, AuthContext } from '~/hooks';
 import FavoritesList from '~/components/Nav/Favorites/FavoritesList';
 import { groupConversationsByDate, cn } from '~/utils';
 import Convo from './Convo';
@@ -90,6 +90,7 @@ const Conversations: FC<ConversationsProps> = ({
   setIsChatsExpanded,
 }) => {
   const localize = useLocalize();
+  const authContext = useContext(AuthContext);
   const search = useRecoilValue(store.search);
   const { favorites, isLoading: isFavoritesLoading } = useFavorites();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
@@ -105,7 +106,13 @@ const Conversations: FC<ConversationsProps> = ({
     permission: Permissions.USE,
   });
 
-  const showAgentMarketplace = hasAccessToAgents && hasAccessToMarketplace;
+  // Check if auth is ready (avoid race conditions)
+  const authReady =
+    authContext?.isAuthenticated !== undefined &&
+    (authContext?.isAuthenticated === false || authContext?.user !== undefined);
+
+  // Show agent marketplace when marketplace permission is enabled, auth is ready, and user has access to agents
+  const showAgentMarketplace = authReady && hasAccessToAgents && hasAccessToMarketplace;
 
   // Determine if FavoritesList will render content
   const shouldShowFavorites =

client/src/components/Nav/AgentMarketplaceButton.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { LayoutGrid } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { TooltipAnchor, Button } from '@librechat/client';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
-import { useLocalize, useHasAccess } from '~/hooks';
+import { useLocalize, useHasAccess, AuthContext } from '~/hooks';
 
 interface AgentMarketplaceButtonProps {
   isSmallScreen?: boolean;
@@ -16,6 +16,7 @@ export default function AgentMarketplaceButton({
 }: AgentMarketplaceButtonProps) {
   const navigate = useNavigate();
   const localize = useLocalize();
+  const authContext = useContext(AuthContext);
 
   const hasAccessToAgents = useHasAccess({
     permissionType: PermissionTypes.AGENTS,
@@ -34,7 +35,13 @@ export default function AgentMarketplaceButton({
     }
   }, [navigate, isSmallScreen, toggleNav]);
 
-  const showAgentMarketplace = hasAccessToAgents && hasAccessToMarketplace;
+  // Check if auth is ready (avoid race conditions)
+  const authReady =
+    authContext?.isAuthenticated !== undefined &&
+    (authContext?.isAuthenticated === false || authContext?.user !== undefined);
+
+  // Show agent marketplace when marketplace permission is enabled, auth is ready, and user has access to agents
+  const showAgentMarketplace = authReady && hasAccessToAgents && hasAccessToMarketplace;
 
   if (!showAgentMarketplace) {
     return null;

client/src/components/Nav/Favorites/FavoritesList.tsx

@@ -1,14 +1,14 @@
-import React, { useRef, useCallback, useMemo, useEffect } from 'react';
-import { LayoutGrid } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-import { useDrag, useDrop } from 'react-dnd';
+import React, { useRef, useCallback, useMemo, useEffect, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
+import { LayoutGrid } from 'lucide-react';
+import { useDrag, useDrop } from 'react-dnd';
 import { Skeleton } from '@librechat/client';
-import { QueryKeys, dataService, PermissionTypes, Permissions } from 'librechat-data-provider';
+import { useNavigate } from 'react-router-dom';
 import { useQueries, useQueryClient } from '@tanstack/react-query';
+import { QueryKeys, dataService, PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { InfiniteData } from '@tanstack/react-query';
 import type t from 'librechat-data-provider';
-import { useFavorites, useLocalize, useHasAccess } from '~/hooks';
+import { useFavorites, useLocalize, useHasAccess, AuthContext } from '~/hooks';
 import FavoriteItem from './FavoriteItem';
 import store from '~/store';
 
@@ -119,6 +119,7 @@ export default function FavoritesList({
   const navigate = useNavigate();
   const localize = useLocalize();
   const queryClient = useQueryClient();
+  const authContext = useContext(AuthContext);
   const search = useRecoilValue(store.search);
   const { favorites, reorderFavorites, isLoading: isFavoritesLoading } = useFavorites();
 
@@ -132,7 +133,13 @@ export default function FavoritesList({
     permission: Permissions.USE,
   });
 
-  const showAgentMarketplace = hasAccessToAgents && hasAccessToMarketplace;
+  // Check if auth is ready (avoid race conditions)
+  const authReady =
+    authContext?.isAuthenticated !== undefined &&
+    (authContext?.isAuthenticated === false || authContext?.user !== undefined);
+
+  // Show agent marketplace when marketplace permission is enabled, auth is ready, and user has access to agents
+  const showAgentMarketplace = authReady && hasAccessToAgents && hasAccessToMarketplace;
 
   const handleAgentMarketplace = useCallback(() => {
     navigate('/agents');