Skip to content

[Feature] UI - Admin Settings: Add option for Authentication for public AI Hub #20444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yuneng-jiang merged 5 commits into from
Feb 6, 2026
Merged

[Feature] UI - Admin Settings: Add option for Authentication for public AI Hub #20444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ec4f7a3
Add option for authentication for public AI Hub
yuneng-jiang Feb 4, 2026
c47866a
useAuthorized refactor
yuneng-jiang Feb 5, 2026
28bae22
ai hub req auth working
yuneng-jiang Feb 5, 2026
bdf47eb
Adding tests
yuneng-jiang Feb 5, 2026
d016ac8
Adding tests for model hub
yuneng-jiang Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions litellm/proxy/ui_crud_endpoints/proxy_setting_endpoints.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,11 @@ class UISettings(BaseModel):
description="List of page keys that internal users (non-admins) can see in the UI sidebar. If not set, all pages are visible based on role permissions.",
)

require_auth_for_public_ai_hub: bool = Field(
default=False,
description="If true, requires authentication for accessing the public AI Hub."
)


class UISettingsResponse(SettingsResponse):
"""Response model for UI settings"""
Expand All @@ -95,6 +100,7 @@ class UISettingsResponse(SettingsResponse):
"disable_model_add_for_internal_users",
"disable_team_admin_delete_team_user",
"enabled_ui_pages_internal_users",
"require_auth_for_public_ai_hub",
}


Expand Down
72 changes: 3 additions & 69 deletions ui/litellm-dashboard/src/app/(dashboard)/hooks/uiSettings/useUISettings.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@ vi.mock("@/components/networking", () => ({
getUiSettings: vi.fn(),
}));

// Mock useAuthorized hook - we can override this in individual tests
const mockUseAuthorized = vi.fn();
vi.mock("../useAuthorized", () => ({
default: () => mockUseAuthorized(),
}));

// Mock data
const mockUISettings: Record<string, any> = {
theme: "dark",
Expand All @@ -39,18 +33,6 @@ describe("useUISettings", () => {

// Reset all mocks
vi.clearAllMocks();

// Set default mock for useAuthorized (enabled state)
mockUseAuthorized.mockReturnValue({
accessToken: "test-access-token",
userRole: "Admin",
userId: "test-user-id",
token: "test-token",
userEmail: "test@example.com",
premiumUser: false,
disabledPersonalKeyCreation: null,
showSSOBanner: false,
});
});

const wrapper = ({ children }: { children: ReactNode }) =>
Expand All @@ -74,7 +56,7 @@ describe("useUISettings", () => {

expect(result.current.data).toEqual(mockUISettings);
expect(result.current.error).toBeNull();
expect(getUiSettings).toHaveBeenCalledWith("test-access-token");
expect(getUiSettings).toHaveBeenCalledWith();
expect(getUiSettings).toHaveBeenCalledTimes(1);
});

Expand All @@ -98,58 +80,10 @@ describe("useUISettings", () => {

expect(result.current.error).toEqual(testError);
expect(result.current.data).toBeUndefined();
expect(getUiSettings).toHaveBeenCalledWith("test-access-token");
expect(getUiSettings).toHaveBeenCalledWith();
expect(getUiSettings).toHaveBeenCalledTimes(1);
});

it("should not execute query when accessToken is missing", async () => {
// Mock missing accessToken
mockUseAuthorized.mockReturnValue({
accessToken: null,
userRole: "Admin",
userId: "test-user-id",
token: null,
userEmail: "test@example.com",
premiumUser: false,
disabledPersonalKeyCreation: null,
showSSOBanner: false,
});

const { result } = renderHook(() => useUISettings(), { wrapper });

// Query should not execute
expect(result.current.isLoading).toBe(false);
expect(result.current.data).toBeUndefined();
expect(result.current.isFetched).toBe(false);

// API should not be called
expect(getUiSettings).not.toHaveBeenCalled();
});

it("should not execute query when accessToken is empty string", async () => {
// Mock empty accessToken
mockUseAuthorized.mockReturnValue({
accessToken: "",
userRole: "Admin",
userId: "test-user-id",
token: "",
userEmail: "test@example.com",
premiumUser: false,
disabledPersonalKeyCreation: null,
showSSOBanner: false,
});

const { result } = renderHook(() => useUISettings(), { wrapper });

// Query should not execute
expect(result.current.isLoading).toBe(false);
expect(result.current.data).toBeUndefined();
expect(result.current.isFetched).toBe(false);

// API should not be called
expect(getUiSettings).not.toHaveBeenCalled();
});

it("should return empty object when API returns empty settings", async () => {
// Mock API returning empty object
(getUiSettings as any).mockResolvedValue({});
Expand All @@ -163,7 +97,7 @@ describe("useUISettings", () => {
});

expect(result.current.data).toEqual({});
expect(getUiSettings).toHaveBeenCalledWith("test-access-token");
expect(getUiSettings).toHaveBeenCalledWith();
});

it("should handle network timeout error", async () => {
Expand Down
5 changes: 1 addition & 4 deletions ui/litellm-dashboard/src/app/(dashboard)/hooks/uiSettings/useUISettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import { getUiSettings } from "@/components/networking";
import { useQuery } from "@tanstack/react-query";
import { createQueryKeys } from "../common/queryKeysFactory";
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
});
Expand Down
51 changes: 36 additions & 15 deletions ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ import useAuthorized from "./useAuthorized";
// Unmock useAuthorized to test the actual implementation
vi.unmock("@/app/(dashboard)/hooks/useAuthorized");

const { replaceMock, clearTokenCookiesMock, getProxyBaseUrlMock, getUiConfigMock, isJwtExpiredMock } = vi.hoisted(() => ({
const { replaceMock, clearTokenCookiesMock, getProxyBaseUrlMock, getUiConfigMock, decodeTokenMock, checkTokenValidityMock } = vi.hoisted(() => ({
replaceMock: vi.fn(),
clearTokenCookiesMock: vi.fn(),
getProxyBaseUrlMock: vi.fn(() => "http://proxy.example"),
getUiConfigMock: vi.fn(),
isJwtExpiredMock: vi.fn(),
decodeTokenMock: vi.fn(),
checkTokenValidityMock: vi.fn(),
}));

vi.mock("next/navigation", () => ({
Expand Down Expand Up @@ -43,7 +44,8 @@ vi.mock("@/utils/jwtUtils", async (importOriginal) => {
const actual = await importOriginal<typeof import("@/utils/jwtUtils")>();
return {
...actual,
isJwtExpired: isJwtExpiredMock,
decodeToken: decodeTokenMock,
checkTokenValidity: checkTokenValidityMock,
};
});

Expand Down Expand Up @@ -77,7 +79,8 @@ describe("useAuthorized", () => {
clearTokenCookiesMock.mockReset();
getProxyBaseUrlMock.mockClear();
getUiConfigMock.mockReset();
isJwtExpiredMock.mockReset();
decodeTokenMock.mockReset();
checkTokenValidityMock.mockReset();
clearCookie();
});

Expand All @@ -88,17 +91,21 @@ describe("useAuthorized", () => {
auto_redirect_to_sso: false,
admin_ui_disabled: false,
});
isJwtExpiredMock.mockReturnValue(false);

const token = createJwt({

const decodedPayload = {
key: "api-key-123",
user_id: "user-1",
user_email: "user@example.com",
user_role: "app_admin",
premium_user: true,
disabled_non_admin_personal_key_creation: false,
login_method: "username_password",
});
};

decodeTokenMock.mockReturnValue(decodedPayload);
checkTokenValidityMock.mockReturnValue(true);

const token = createJwt(decodedPayload);
document.cookie = `token=${token}; path=/;`;

const { result } = renderHook(() => useAuthorized(), { wrapper });
Expand Down Expand Up @@ -126,6 +133,9 @@ describe("useAuthorized", () => {
admin_ui_disabled: false,
});

decodeTokenMock.mockReturnValue(null);
checkTokenValidityMock.mockReturnValue(false);

document.cookie = "token=invalid-token; path=/;";

const { result } = renderHook(() => useAuthorized(), { wrapper });
Expand All @@ -146,17 +156,21 @@ describe("useAuthorized", () => {
auto_redirect_to_sso: false,
admin_ui_disabled: true,
});
isJwtExpiredMock.mockReturnValue(false);

const token = createJwt({
const decodedPayload = {
key: "api-key-123",
user_id: "user-1",
user_email: "user@example.com",
user_role: "app_admin",
premium_user: true,
disabled_non_admin_personal_key_creation: false,
login_method: "username_password",
});
};

decodeTokenMock.mockReturnValue(decodedPayload);
checkTokenValidityMock.mockReturnValue(true);

const token = createJwt(decodedPayload);
document.cookie = `token=${token}; path=/;`;

const { result } = renderHook(() => useAuthorized(), { wrapper });
Expand All @@ -178,6 +192,9 @@ describe("useAuthorized", () => {
admin_ui_disabled: false,
});

decodeTokenMock.mockReturnValue(null);
checkTokenValidityMock.mockReturnValue(false);

// No token cookie set
const { result } = renderHook(() => useAuthorized(), { wrapper });

Expand All @@ -196,14 +213,18 @@ describe("useAuthorized", () => {
auto_redirect_to_sso: false,
admin_ui_disabled: false,
});
isJwtExpiredMock.mockReturnValue(true);

const token = createJwt({
const decodedPayload = {
key: "api-key-123",
user_id: "user-1",
user_email: "user@example.com",
user_role: "app_admin",
});
};

decodeTokenMock.mockReturnValue(decodedPayload);
checkTokenValidityMock.mockReturnValue(false);

const token = createJwt(decodedPayload);
document.cookie = `token=${token}; path=/;`;

const { result } = renderHook(() => useAuthorized(), { wrapper });
Expand All @@ -213,6 +234,6 @@ describe("useAuthorized", () => {
});

expect(replaceMock).toHaveBeenCalledWith("http://proxy.example/ui/login");
expect(isJwtExpiredMock).toHaveBeenCalledWith(token);
expect(checkTokenValidityMock).toHaveBeenCalledWith(token);
});
});
44 changes: 15 additions & 29 deletions ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

import { getProxyBaseUrl } from "@/components/networking";
import { clearTokenCookies, getCookie } from "@/utils/cookieUtils";
import { isJwtExpired } from "@/utils/jwtUtils";
import { jwtDecode } from "jwt-decode";
import { checkTokenValidity, decodeToken } from "@/utils/jwtUtils";
import { useRouter } from "next/navigation";
import { useEffect, useMemo } from "react";
import { useUIConfig } from "./uiConfig/useUIConfig";
Expand Down Expand Up @@ -43,44 +42,31 @@ const useAuthorized = () => {

const token = typeof document !== "undefined" ? getCookie("token") : null;

// Step 1: Check for missing token or expired JWT - kick out immediately (even if UI Config is loading)
const decoded = useMemo(() => decodeToken(token), [token]);
const isTokenValid = useMemo(() => checkTokenValidity(token), [token]);
const isLoading = isUIConfigLoading;
const isAuthorized = isTokenValid && !uiConfig?.admin_ui_disabled;

// Single useEffect for all redirect logic
useEffect(() => {
if (!token || (token && isJwtExpired(token))) {
if (isLoading) return;

if (!isAuthorized) {
if (token) {
clearTokenCookies();
}
router.replace(`${getProxyBaseUrl()}/ui/login`);
}
}, [token, router]);

useEffect(() => {
if (isUIConfigLoading) {
return;
}
if (uiConfig?.admin_ui_disabled) {
router.replace(`${getProxyBaseUrl()}/ui/login`);
}
}, [router, isUIConfigLoading, uiConfig]);

// Decode safely
const decoded = useMemo(() => {
if (!token) return null;
try {
return jwtDecode(token) as Record<string, any>;
} catch {
// Bad token in cookie — clear and bounce
clearTokenCookies();
router.replace(`${getProxyBaseUrl()}/ui/login`);
return null;
}
}, [token, router]);
}, [isLoading, isAuthorized, token, router]);

return {
token: token,
isLoading,
isAuthorized,
token: isAuthorized ? token : null,
accessToken: decoded?.key ?? null,
userId: decoded?.user_id ?? null,
userEmail: decoded?.user_email ?? null,
userRole: formatUserRole(decoded?.user_role ?? null),
userRole: formatUserRole(decoded?.user_role),
premiumUser: decoded?.premium_user ?? null,
disabledPersonalKeyCreation: decoded?.disabled_non_admin_personal_key_creation ?? null,
showSSOBanner: decoded?.login_method === "username_password",
Comment on lines 66 to 72
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Decoded user data is returned even when isAuthorized is false. This exposes data from expired/invalid tokens. Consider gating these fields by isAuthorized like the token field on line 65.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
Line: 66:72

Comment:
Decoded user data is returned even when `isAuthorized` is false. This exposes data from expired/invalid tokens. Consider gating these fields by `isAuthorized` like the `token` field on line 65.

How can I resolve this? If you propose a fix, please make it concise.

Expand Down
Loading
Loading