ai hub req auth working

ui/litellm-dashboard/src/app/(dashboard)/hooks/uiSettings/useUISettings.ts

@@ -6,11 +6,9 @@ import useAuthorized from "../useAuthorized";
 const uiSettingsKeys = createQueryKeys("uiSettings");
 
 export const useUISettings = () => {
-  const { accessToken } = useAuthorized();
   return useQuery<Record<string, any>>({
     queryKey: uiSettingsKeys.list({}),
-    queryFn: async () => await getUiSettings(accessToken),
-    enabled: !!accessToken,
+    queryFn: async () => await getUiSettings(),
     staleTime: 60 * 60 * 1000, // 1 hour - data rarely changes
     gcTime: 60 * 60 * 1000, // 1 hour - keep in cache for 1 hour
   });

ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx

@@ -27,6 +27,9 @@ import { Copy } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
+import { checkTokenValidity } from "@/utils/jwtUtils";
+import { getCookie } from "@/utils/cookieUtils";
 
 interface ModelHubTableProps {
   accessToken: string | null;
@@ -76,6 +79,30 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
   const [isMcpModalVisible, setIsMcpModalVisible] = useState(false);
   const [isMakeMcpPublicModalVisible, setIsMakeMcpPublicModalVisible] = useState(false);
   const router = useRouter();
+  const { data: uiSettings, isLoading: isUISettingsLoading } = useUISettings();
+
+  // Check authentication requirement for public AI Hub
+  useEffect(() => {
+    // Only check when UI settings are loaded and this is a public page
+    if (isUISettingsLoading || !publicPage) {
+      return;
+    }
+
+    const requireAuth = uiSettings?.values?.require_auth_for_public_ai_hub;
+
+    // If require_auth_for_public_ai_hub is true, verify token
+    if (requireAuth === true) {
+      const token = getCookie("token");
+      const isTokenValid = checkTokenValidity(token);
+
+      // If token is invalid, redirect to login
+      if (!isTokenValid) {
+        router.replace(`${getProxyBaseUrl()}/ui/login`);
+        return;
+      }
+    }
+    // If require_auth_for_public_ai_hub is false, allow public access (no change)
+  }, [isUISettingsLoading, publicPage, uiSettings, router]);
 
   useEffect(() => {
     const fetchData = async (accessToken: string) => {

ui/litellm-dashboard/src/components/networking.tsx

@@ -8736,14 +8736,11 @@ export const loginCall = async (username: string, password: string): Promise<Log
   return data;
 };
 
-export const getUiSettings = async (accessToken: string) => {
+export const getUiSettings = async () => {
   const proxyBaseUrl = getProxyBaseUrl();
   const url = proxyBaseUrl ? `${proxyBaseUrl}/get/ui_settings` : `/get/ui_settings`;
   const response = await fetch(url, {
     method: "GET",
-    headers: {
-      [globalLitellmHeaderName]: `Bearer ${accessToken}`,
-    },
   });
   if (!response.ok) {
     const errorData = await response.json();