feat(ui): add token endpoint auth method selector to MCP OAuth forms

[tin-berri]

Relevant issues

Follow-up to #31635, which added the backend support

Linear ticket

Relates to LIT-4091 (resolved by #31635 on the backend); this completes it in the dashboard

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

This is a dashboard-only change with no backend behavior change, so the proof is the new field in the create and edit forms. Run the proxy and open the dashboard, then:

1. go to http://localhost:4000/ui/?page=mcp-servers and click "Add New MCP Server"
2. set Transport Type to "Streamable HTTP", enter any MCP Server URL
3. under Authentication, select "OAuth"
4. confirm a new "Token Endpoint Auth Method (optional)" dropdown shows directly under the Token URL field, defaulting to blank with placeholder "Default (Client Secret Post)", offering "Client Secret Basic" and "Client Secret Post"
5. pick "Client Secret Basic" and create the server
6. open the server's edit view; the same selector shows under "Token URL Override (optional)" with placeholder "Leave blank to keep existing (default Client Secret Post)"

To confirm the value round-trips into the credentials the gateway reads, after step 5 check the stored row:

curl -s http://localhost:4000/v1/mcp/server -H "Authorization: Bearer $LITELLM_MASTER_KEY" | jq '.[] | select(.alias=="<your_alias>") | {alias, auth_type}'

then exercise the upstream token exchange against an IdP registered for client_secret_basic (same setup as #31635) and confirm the gateway sends Authorization: Basic ... instead of credentials in the body

Type

🆕 New Feature

Changes

PR #31635 added a per-server token_endpoint_auth_method (client_secret_basic or client_secret_post) that controls how the gateway authenticates to an upstream OAuth token endpoint, but the only way to set it was hand-editing the stored credentials JSON; the dashboard had no control for it

This adds an optional "Token Endpoint Auth Method" selector directly under the Token URL field in both MCP server forms: the create form (OAuthFormFields, in both the M2M and interactive flows) and the edit form (mcp_server_edit). A small shared TokenEndpointAuthMethodField component renders the field in all three spots so the markup stays in one place

The field binds to credentials.token_endpoint_auth_method, which is exactly what the backend already reads, so no API change is needed. It is write-only by design: the credentials blob is redacted before servers are returned to the dashboard (same reason client id/secret cannot be pre-filled today), so the dropdown opens blank. Leaving it blank omits the key from the request, which preserves whatever is already stored and keeps the client_secret_post default; choosing a value overrides it. Because nothing is sent when blank, an edit that does not touch the field never disturbs the existing setting

Tests cover the create form (selecting client_secret_basic puts it in the create payload under credentials; leaving it blank omits it), the edit form (selecting it puts it in the update payload), and OAuthFormFields (the selector renders directly below Token URL in both M2M and interactive flows and offers both options). The selector tests fail on the pre-change code

[tin-berri]

@greptileai

[codspeed-hq]

Merging this PR will improve performance by 38.7%

⚡ 2 improved benchmarks
✅ 28 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	test_completion_simple_message	4.7 ms	3.2 ms	+46.38%
⚡	test_completion_with_tools	4.2 ms	3.2 ms	+31.43%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing litellm_mcp_token_endpoint_auth_method_ui (0c2b078) with litellm_internal_staging (8beb68a)}

[greptile-apps]

Greptile Summary

This PR completes the dashboard side of the per-server token_endpoint_auth_method feature (#31635): a new optional "Token Endpoint Auth Method" selector is added to the MCP server create and edit forms, binding to credentials.token_endpoint_auth_method which the backend already reads. It also folds in the follow-up from the previous review round by extracting the duplicated selectAntOption test helper into a shared testUtils.ts.

• TokenEndpointAuthMethodField.tsx — new single-responsibility component that renders the dropdown in all three form locations (M2M create, interactive create, edit), with context-aware placeholder text and allowClear so omitting a value keeps the stored default.
• testUtils.ts — selectAntOption extracted from create_mcp_server.test.tsx and re-exported; both test files now import from the shared location.
• Tests — the create-form suite gains "select sets the key" + "blank omits the key" cases, the edit-form suite gains the same pair (addressing the gap flagged in the prior review), and OAuthFormFields.test.tsx gains three positioning/option-presence tests.

Confidence Score: 5/5

Dashboard-only change with no backend logic; the new field writes directly to the credentials blob the backend already reads, and all prior review gaps are closed.

The change is well-scoped: a small new UI component inserted in two existing forms, backed by comprehensive tests that cover both the select-a-value and leave-blank-omits-key paths for every affected form. All three items flagged in the previous review round are addressed. No API surface, auth logic, or critical request path is touched.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/mcp_tools/TokenEndpointAuthMethodField.tsx	New shared component rendering the token endpoint auth method selector; uses options array directly without redundant .map(), placeholder adapts correctly to create vs. edit context.
ui/litellm-dashboard/src/components/mcp_tools/testUtils.ts	Shared selectAntOption test helper extracted from create_mcp_server.test.tsx; retains full fallback selector chain, simplifies the intermediate variable, and is re-exported cleanly for both test files.
ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx	TokenEndpointAuthMethodField inserted after the Token URL field in both M2M and interactive flows; isEditing prop forwarded correctly.
ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx	TokenEndpointAuthMethodField added after the Token URL Override field with isEditing=true; no logic changes.
ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.test.tsx	Local selectAntOption removed and replaced with the shared import; two new tests cover the "select client_secret_basic" and "leave blank omits key" cases for the create form.
ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.test.tsx	Imports shared selectAntOption; adds both "select a value" and "leave blank omits key" tests for the edit form, addressing the gap noted in the prior review.
ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx	Three new tests verify the selector renders below Token URL in both M2M and interactive modes and that both option values are present in the dropdown.

_{Reviews (5): Last reviewed commit: "feat(ui): add token endpoint auth method..." | Re-trigger Greptile}

[greptile-apps]

Greptile Summary

This PR completes dashboard support for the token_endpoint_auth_method setting introduced on the backend in #31635, adding an optional "Token Endpoint Auth Method" selector to both the MCP server create form (OAuthFormFields) and the edit form (mcp_server_edit) through a new shared TokenEndpointAuthMethodField component.

• The field binds to ["credentials", "token_endpoint_auth_method"], matching the backend field exactly. Using allowClear on the Select means a blank value produces undefined, which is correctly filtered out by the existing credentialsPayload reducer in both forms, so leaving the field blank never disturbs the stored setting.
• Tests cover the create payload (field included when selected, omitted when blank), the edit payload (field included when selected), and the rendering order within OAuthFormFields for both M2M and interactive flows.

Confidence Score: 5/5

Dashboard-only UI change with no backend modifications; integrates cleanly with existing credentials filtering.

The only finding is a redundant .map() on an already correctly shaped options array — purely cosmetic, no behavioral impact.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/mcp_tools/TokenEndpointAuthMethodField.tsx	New shared component that renders the token_endpoint_auth_method Select; form name correctly maps to credentials.token_endpoint_auth_method, allowClear ensures undefined is omitted from payload when blank, and isEditing controls the placeholder text. Minor: redundant .map() on options array.
ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx	Adds TokenEndpointAuthMethodField directly below the Token URL field in both M2M and interactive OAuth flows, passing isEditing through correctly.
ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx	Inserts TokenEndpointAuthMethodField with isEditing after Token URL Override in the inline OAuth section; field is gated by isOAuthAuthType and omitted-when-blank handling is already present in the credentialsPayload reducer.
ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx	Adds three tests: DOM ordering in both M2M and interactive modes, and options availability. Coverage is appropriate for a new UI field.
ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.test.tsx	Two new tests verify that selecting client_secret_basic includes the field in the create payload, and leaving it blank omits it. Both cases exercise the credentialsPayload reducer path.
ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.test.tsx	Adds a local selectAntOption helper and one test verifying client_secret_basic is included in the update payload. The local helper is a simpler but functionally adequate version of the one in create_mcp_server.test.tsx.

_{Reviews (2): Last reviewed commit: "feat(ui): add token endpoint auth method..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[tin-berri]

Applied the suggestion. The .map() only existed to widen the as const readonly array to the mutable shape antd's options prop wants; dropped as const and pass TOKEN_ENDPOINT_AUTH_METHOD_OPTIONS directly. Build and the 64 UI tests still green

@greptileai

[tin-berri]

Added a complementary edit-form test: when the server has no token_endpoint_auth_method defined and the selector is left blank, the update payload omits the key (so the backend merge preserves the existing value rather than clobbering it). This matches the create-form coverage

@greptileai

[tin-berri]

Extracted the duplicated selectAntOption test helper into a shared testUtils.ts and imported it from both the create and edit test suites, so the two can't drift (the edit copy had already been a trimmed variant). No behavior change; 51 UI tests across both files still pass

@greptileai