feat: add LiteLLM OAuth2 SSO authentication button

Implement OAuth2 SSO integration for LiteLLM proxy authentication:

- Add OAuth URL generator for LiteLLM SSO flow with proper redirect_uri
- Implement URI callback handler for LiteLLM OAuth2 responses
- Add ClineProvider method to handle LiteLLM OAuth callback and store tokens
- Create LiteLLM SSO authentication button in settings UI
- Add internationalization support for LiteLLM OAuth button text

This enables users to authenticate with their LiteLLM proxy via SSO by:
1. Entering their LiteLLM base URL in settings
2. Clicking "Get LiteLLM API Key via SSO" button
3. Completing OAuth flow in browser
4. Automatically receiving and storing the API token

The implementation follows OAuth2 RFC 6749 standards and supports both
JSON response format and VSCode extension redirect flows as implemented
in LiteLLM PR #13227.

Author: colesmcintosh

src/activate/handleUri.ts

@@ -35,6 +35,35 @@ export const handleUri = async (uri: vscode.Uri) => {
 			}
 			break
 		}
+		case "/litellm": {
+			const accessToken = query.get("access_token")
+			const tokenType = query.get("token_type")
+			const expiresIn = query.get("expires_in")
+			const scope = query.get("scope")
+			const error = query.get("error")
+			const errorDescription = query.get("error_description")
+
+			if (error) {
+				// Handle OAuth error
+				console.error(`LiteLLM OAuth error: ${error}`, errorDescription)
+				vscode.window.showErrorMessage(
+					`LiteLLM authentication failed: ${error}${errorDescription ? ` - ${errorDescription}` : ""}`,
+				)
+				return
+			}
+
+			if (accessToken) {
+				await visibleProvider.handleLiteLLMCallback({
+					accessToken,
+					tokenType: tokenType || "Bearer",
+					expiresIn: expiresIn ? parseInt(expiresIn, 10) : 86400,
+					scope: scope || undefined,
+				})
+			} else {
+				vscode.window.showErrorMessage("LiteLLM authentication failed: No access token received")
+			}
+			break
+		}
 		case "/auth/clerk/callback": {
 			const code = query.get("code")
 			const state = query.get("state")

src/core/webview/ClineProvider.ts

@@ -27,6 +27,7 @@ import {
 	requestyDefaultModelId,
 	openRouterDefaultModelId,
 	glamaDefaultModelId,
+	litellmDefaultModelId,
 	ORGANIZATION_ALLOW_ALL,
 	DEFAULT_TERMINAL_OUTPUT_CHARACTER_LIMIT,
 	DEFAULT_WRITE_DELAY_MS,
@@ -1236,6 +1237,38 @@ export class ClineProvider
 		await this.upsertProviderProfile(currentApiConfigName, newConfiguration)
 	}
 
+	// LiteLLM
+	async handleLiteLLMCallback(oauthResponse: {
+		accessToken: string
+		tokenType: string
+		expiresIn: number
+		scope?: string
+	}) {
+		let { apiConfiguration, currentApiConfigName } = await this.getState()
+
+		// Store the OAuth response metadata
+		const { accessToken, tokenType, expiresIn, scope } = oauthResponse
+		const expiresAt = new Date(Date.now() + expiresIn * 1000).toISOString()
+
+		this.log(
+			`LiteLLM OAuth success: ${tokenType} token expires in ${expiresIn}s (${expiresAt})${scope ? ` with scope: ${scope}` : ""}`,
+		)
+
+		const newConfiguration: ProviderSettings = {
+			...apiConfiguration,
+			apiProvider: "litellm",
+			litellmApiKey: accessToken,
+			litellmModelId: apiConfiguration?.litellmModelId || litellmDefaultModelId,
+		}
+		await this.upsertProviderProfile(currentApiConfigName, newConfiguration)
+
+		// Notify webview of the configuration update
+		await this.postStateToWebview()
+
+		// Show success message to user
+		vscode.window.showInformationMessage("Successfully authenticated with LiteLLM via SSO!")
+	}
+
 	// Glama
 
 	async handleGlamaCallback(code: string) {

webview-ui/src/components/settings/ApiOptions.tsx

@@ -523,6 +523,7 @@ const ApiOptions = ({
 					setApiConfigurationField={setApiConfigurationField}
 					organizationAllowList={organizationAllowList}
 					modelValidationError={modelValidationError}
+					uriScheme={uriScheme}
 				/>
 			)}
 

webview-ui/src/components/settings/providers/LiteLLM.tsx

@@ -10,6 +10,8 @@ import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
+import { getLiteLLMAuthUrl } from "@src/oauth/urls"
+import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 
 import { inputEventTransform } from "../transforms"
 import { ModelPicker } from "../ModelPicker"
@@ -19,13 +21,15 @@ type LiteLLMProps = {
 	setApiConfigurationField: (field: keyof ProviderSettings, value: ProviderSettings[keyof ProviderSettings]) => void
 	organizationAllowList: OrganizationAllowList
 	modelValidationError?: string
+	uriScheme?: string
 }
 
 export const LiteLLM = ({
 	apiConfiguration,
 	setApiConfigurationField,
 	organizationAllowList,
 	modelValidationError,
+	uriScheme,
 }: LiteLLMProps) => {
 	const { t } = useAppTranslation()
 	const { routerModels } = useExtensionState()
@@ -111,6 +115,15 @@ export const LiteLLM = ({
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
 
+			{apiConfiguration?.litellmBaseUrl && (
+				<VSCodeButtonLink
+					href={getLiteLLMAuthUrl(apiConfiguration.litellmBaseUrl, uriScheme)}
+					style={{ width: "100%" }}
+					appearance="primary">
+					{t("settings:providers.getLiteLLMApiKey")}
+				</VSCodeButtonLink>
+			)}
+
 			<Button
 				variant="outline"
 				onClick={handleRefreshModels}

webview-ui/src/i18n/locales/en/settings.json

@@ -235,6 +235,7 @@
 		"apiKeyStorageNotice": "API keys are stored securely in VSCode's Secret Storage",
 		"glamaApiKey": "Glama API Key",
 		"getGlamaApiKey": "Get Glama API Key",
+		"getLiteLLMApiKey": "Get LiteLLM API Key via SSO",
 		"useCustomBaseUrl": "Use custom base URL",
 		"useReasoning": "Enable reasoning",
 		"useHostHeader": "Use custom Host header",

webview-ui/src/oauth/urls.ts

@@ -15,3 +15,8 @@ export function getOpenRouterAuthUrl(uriScheme?: string) {
 export function getRequestyAuthUrl(uriScheme?: string) {
 	return `https://app.requesty.ai/oauth/authorize?callback_url=${getCallbackUrl("requesty", uriScheme)}`
 }
+
+export function getLiteLLMAuthUrl(baseUrl: string, uriScheme?: string) {
+	const cleanBaseUrl = baseUrl.replace(/\/+$/, "")
+	return `${cleanBaseUrl}/sso/key/generate?response_type=oauth_token&redirect_uri=${getCallbackUrl("litellm", uriScheme)}`
+}