diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/uiSettings/useUISettings.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/uiSettings/useUISettings.ts index 46a0254d0d..f6d5035018 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/uiSettings/useUISettings.ts +++ b/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>({ 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 }); diff --git a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx index 4843713e5a..71b84e281d 100644 --- a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx +++ b/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 = ({ 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) => { diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index ca4c16a781..d5447e0d13 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -8736,14 +8736,11 @@ export const loginCall = async (username: string, password: string): Promise { +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();