diff --git a/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx new file mode 100644 index 0000000000..db2d131584 --- /dev/null +++ b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx @@ -0,0 +1,186 @@ +// @vitest-environment esm +import React from "react"; +import { render, screen, waitFor } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import { vi, describe, it, beforeEach, afterEach, expect } from "vitest"; + +/** ---------------------------- + * Mocks + * --------------------------- */ + +// next/navigation: just return empty URLSearchParams (no invitation/page) +vi.mock("next/navigation", () => ({ + useSearchParams: () => new URLSearchParams(""), +})); + +// Networking layer +vi.mock("@/components/networking", () => { + return { + // Called on mount; we don't care about its contents, only that it resolves + getUiConfig: vi.fn().mockResolvedValue({}), + // Used to build the redirect URL + proxyBaseUrl: "https://example.com", + // Called when decoding a valid token + setGlobalLitellmHeaderName: vi.fn(), + Organization: {} as any, + }; +}); + +// jwt-decode: we’ll swap implementation per test via mockImplementation +const jwtDecodeMock = vi.fn(); +vi.mock("jwt-decode", () => ({ + jwtDecode: (token: string) => jwtDecodeMock(token), +})); + +// Query client provider works fine unmocked + +// Super-light stubs for all heavy components so rendering doesn't explode +const stub = (name: string) => () =>
; +vi.mock("@/components/navbar", () => ({ default: stub("navbar") })); +vi.mock("@/components/user_dashboard", () => ({ default: stub("user-dashboard") })); +vi.mock("@/components/templates/model_dashboard", () => ({ default: stub("model-dashboard") })); +vi.mock("@/components/view_users", () => ({ default: stub("view-users") })); +vi.mock("@/components/teams", () => ({ default: stub("teams") })); +vi.mock("@/components/organizations", () => ({ + default: stub("organizations"), + fetchOrganizations: vi.fn(), // consumed in effects +})); +vi.mock("@/components/admins", () => ({ default: stub("admin-panel") })); +vi.mock("@/components/settings", () => ({ default: stub("settings") })); +vi.mock("@/components/general_settings", () => ({ default: stub("general-settings") })); +vi.mock("@/components/pass_through_settings", () => ({ default: stub("pass-through-settings") })); +vi.mock("@/components/budgets/budget_panel", () => ({ default: stub("budget-panel") })); +vi.mock("@/components/view_logs", () => ({ default: stub("spend-logs") })); +vi.mock("@/components/model_hub_table", () => ({ default: stub("model-hub-table") })); +vi.mock("@/components/new_usage", () => ({ default: stub("new-usage") })); +vi.mock("@/components/api_ref", () => ({ default: stub("api-ref") })); +vi.mock("@/components/chat_ui/ChatUI", () => ({ default: stub("chat-ui") })); +vi.mock("@/components/leftnav", () => ({ default: stub("sidebar") })); +vi.mock("@/components/usage", () => ({ default: stub("usage") })); +vi.mock("@/components/cache_dashboard", () => ({ default: stub("cache-dashboard") })); +vi.mock("@/components/guardrails", () => ({ default: stub("guardrails") })); +vi.mock("@/components/prompts", () => ({ default: stub("prompts") })); +vi.mock("@/components/transform_request", () => ({ default: stub("transform-request") })); +vi.mock("@/components/mcp_tools", () => ({ MCPServers: stub("mcp-servers") })); +vi.mock("@/components/tag_management", () => ({ default: stub("tag-management") })); +vi.mock("@/components/vector_store_management", () => ({ default: stub("vector-stores") })); +vi.mock("@/components/ui_theme_settings", () => ({ default: stub("ui-theme-settings") })); +vi.mock("@/components/organisms/create_key_button", () => ({ fetchUserModels: vi.fn() })); +vi.mock("@/components/common_components/fetch_teams", () => ({ fetchTeams: vi.fn() })); +vi.mock("@/components/ui/ui-loading-spinner", () => ({ + UiLoadingSpinner: stub("spinner"), +})); +vi.mock("@/contexts/ThemeContext", () => ({ + ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children}, +})); +vi.mock("@/lib/cva.config", () => ({ + cx: (...args: string[]) => args.join(" "), +})); + +import CreateKeyPage from "@/app/page"; + +/** ---------------------------- + * Helpers + * --------------------------- */ + +function setCookie(raw: string) { + // JSDOM allows simple string assignment to document.cookie + document.cookie = raw; +} + +function clearAllCookies() { + // JSDOM doesn't give an API to clear; overwrite with empty string + // plus ensure we wipe known names used by this app. + document.cookie = "token=; Max-Age=0; Path=/"; +} + +const originalLocation = window.location; + +beforeEach(() => { + // Fresh module state & DOM + vi.clearAllMocks(); + clearAllCookies(); + + // Make location.replace spy-able to validate redirect + delete (window as any).location; + // minimal location object with replace and assign stubs + (window as any).location = { + ...originalLocation, + href: "http://localhost/", + assign: vi.fn(), + replace: vi.fn(), + }; +}); + +afterEach(() => { + // Restore location to avoid leaking across test envs + delete (window as any).location; + (window as any).location = originalLocation; +}); + +/** ---------------------------- + * Tests + * --------------------------- */ + +describe("CreateKeyPage auth behavior", () => { + it("redirects to SSO when cookie token is expired and clears it (no spasms)", async () => { + // Arrange: expired token in cookie + setCookie("token=expiredtoken"); + + // jwtDecode returns past exp → expired + jwtDecodeMock.mockImplementation((tok: string) => { + expect(tok).toBe("expiredtoken"); + return { exp: Math.floor(Date.now() / 1000) - 60 }; // expired 60s ago + }); + + // Spy on cookie writes to ensure we clear with Max-Age=0 + const cookieSetSpy = vi.spyOn(document, "cookie", "set"); + + // Act + render(); + + // Assert: we eventually redirect to SSO login (single replace, not assign/href) + await waitFor(() => { + expect(window.location.replace).toHaveBeenCalledWith("https://example.com/sso/key/generate"); + }); + + // And we attempted to clear the cookie (defensive deletion) + const wroteDeletion = cookieSetSpy.mock.calls.some( + (args) => typeof args[0] === "string" && args[0].includes("Max-Age=0") && args[0].startsWith("token="), + ); + expect(wroteDeletion).toBe(true); + }); + + it("does NOT redirect when token is valid and renders the app chrome", async () => { + // Arrange: valid token in cookie + setCookie("token=validtoken"); + + // jwtDecode returns future exp and expected shape + jwtDecodeMock.mockImplementation((tok: string) => { + expect(tok).toBe("validtoken"); + return { + exp: Math.floor(Date.now() / 1000) + 60 * 60, // 1h in the future + key: "accessKey-123", + user_role: "app_user", + user_email: "user@example.com", + login_method: "username_password", + premium_user: false, + auth_header_name: "x-litellm-auth", + user_id: "u_123", + }; + }); + + // Act + render(); + + // Assert: no redirect + await waitFor(() => { + expect(window.location.replace).not.toHaveBeenCalled(); + }); + + // And some top-level UI appears (Navbar stub) + await waitFor(() => { + expect(screen.getByTestId("navbar")).toBeInTheDocument(); + }); + }); +});