feat: add LiteLLM OAuth2 SSO authentication button

packages/types/src/provider-settings.ts

@@ -252,6 +252,10 @@ const litellmSchema = baseProviderSettingsSchema.extend({
 	litellmApiKey: z.string().optional(),
 	litellmModelId: z.string().optional(),
 	litellmUsePromptCache: z.boolean().optional(),
+	// OAuth metadata (optional)
+	litellmTokenType: z.string().optional(),
+	litellmTokenExpiresAt: z.string().optional(),
+	litellmTokenScope: z.string().optional(),
 })
 
 const cerebrasSchema = apiModelIdProviderModelSchema.extend({

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

@@ -30,6 +30,7 @@ import {
 	requestyDefaultModelId,
 	openRouterDefaultModelId,
 	glamaDefaultModelId,
+	litellmDefaultModelId,
 	ORGANIZATION_ALLOW_ALL,
 	DEFAULT_TERMINAL_OUTPUT_CHARACTER_LIMIT,
 	DEFAULT_WRITE_DELAY_MS,
@@ -1254,6 +1255,60 @@ export class ClineProvider
 		await this.upsertProviderProfile(currentApiConfigName, newConfiguration)
 	}
 
+	// LiteLLM OAuth2 SSO integration
+	// Flow: User clicks SSO button -> LiteLLM OAuth page -> redirect back with access_token
+	// Token is stored as API key for the LiteLLM provider. Based on LiteLLM PR #13227.
+	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,
+			litellmTokenType: tokenType,
+			litellmTokenExpiresAt: expiresAt,
+			litellmTokenScope: scope,
+		}
+		await this.upsertProviderProfile(currentApiConfigName, newConfiguration)
+
+		// Notify webview of the configuration update
+		await this.postStateToWebview()
+
+		// Show success message to user including token expiry information
+		vscode.window.showInformationMessage(
+			`Successfully authenticated with LiteLLM via SSO! Token expires in ${expiresIn} seconds.`,
+		)
+
+		// Schedule a pre-expiry warning if expiry is reasonable
+		try {
+			const msUntilExpiry = expiresIn * 1000
+			const warnMs = Math.max(0, msUntilExpiry - 5 * 60 * 1000) // 5 minutes before
+			if (warnMs > 0 && warnMs < 7 * 24 * 60 * 60 * 1000) {
+				setTimeout(() => {
+					void vscode.window.showWarningMessage(
+						"Your LiteLLM OAuth token is about to expire. Please re-authenticate via SSO to avoid interruptions.",
+					)
+				}, warnMs)
+			}
+		} catch {
+			// ignore scheduling errors
+		}
+	}
+
 	// Glama
 
 	async handleGlamaCallback(code: string) {

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

@@ -537,6 +537,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,17 @@ export const LiteLLM = ({
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
 
+			{(() => {
+				if (!apiConfiguration?.litellmBaseUrl || apiConfiguration?.litellmApiKey) return null
+				const authUrl = getLiteLLMAuthUrl(apiConfiguration.litellmBaseUrl, uriScheme)
+				if (!authUrl) return null
+				return (
+					<VSCodeButtonLink href={authUrl} 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,15 @@ 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) {
+	// Validate URL format to avoid malformed links
+	try {
+		// Throws on invalid URL
+		new URL(baseUrl)
+	} catch {
+		return ""
+	}
+	const cleanBaseUrl = baseUrl.replace(/\/+$/, "")
+	return `${cleanBaseUrl}/sso/key/generate?response_type=oauth_token&redirect_uri=${getCallbackUrl("litellm", uriScheme)}`
+}