diff --git a/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx b/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx index 888f3066252..02b7e3af09c 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx @@ -91,6 +91,47 @@ describe("OAuthFormFields", () => { }); }); + describe("token endpoint auth method selector", () => { + it("renders directly below the Token URL field in interactive mode", () => { + render( + + + , + ); + const tokenUrlLabel = screen.getByText("Token URL (optional)"); + const authMethodLabel = screen.getByText("Token Endpoint Auth Method (optional)"); + expect(tokenUrlLabel.compareDocumentPosition(authMethodLabel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy(); + }); + + it("renders directly below the Token URL field in M2M mode", () => { + render( + + + , + ); + const tokenUrlLabel = screen.getByText("Token URL"); + const authMethodLabel = screen.getByText("Token Endpoint Auth Method (optional)"); + expect(tokenUrlLabel.compareDocumentPosition(authMethodLabel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy(); + }); + + it("offers client_secret_basic and client_secret_post options", async () => { + render( + + + , + ); + const authMethodLabel = screen.getByText("Token Endpoint Auth Method (optional)"); + const selector = authMethodLabel.closest(".ant-form-item")!.querySelector(".ant-select-selector")!; + await act(async () => { + fireEvent.mouseDown(selector); + }); + await waitFor(() => { + expect(screen.getByText("Client Secret Basic")).toBeInTheDocument(); + expect(screen.getByText("Client Secret Post")).toBeInTheDocument(); + }); + }); + }); + // ── token_validation_json inline JSON validator ────────────────────────────── describe("token_validation_json validation", () => { diff --git a/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx b/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx index 27d90d5ae1a..93afefe4358 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx @@ -3,6 +3,7 @@ import { Form, Input, InputNumber, Select, Tooltip } from "antd"; import { InfoCircleOutlined } from "@ant-design/icons"; import { Button, TextInput } from "@tremor/react"; import { OAUTH_FLOW } from "./types"; +import TokenEndpointAuthMethodField from "./TokenEndpointAuthMethodField"; interface OAuthFlowStatus { startOAuthFlow: () => void; @@ -101,6 +102,7 @@ const OAuthFormFields: React.FC = ({ > + = ({ > + = ({ isEditing = false }) => ( + + Token Endpoint Auth Method (optional) + + + + + } + name={["credentials", "token_endpoint_auth_method"]} + > +