From 2699bb161f414975982d0cafdef0d55152d998f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Mu=C5=A1tar?= <victor.mustar@gmail.com>
Date: Fri, 5 Dec 2025 14:00:22 +0100
Subject: [PATCH 1/3] Add MCP OAuth 2.1 authentication support

Implements OAuth 2.1 authentication for MCP servers, including discovery, PKCE flow, token management, and UI integration. Adds new services, stores, and types for OAuth, updates AddServerForm and ServerCard components for authentication flow, and injects tokens into server requests. Conversation page now uses authenticated servers. MCP server deletion cleans up OAuth data.
---
 src/lib/components/mcp/AddServerForm.svelte   | 202 +++++++++-
 src/lib/components/mcp/ServerCard.svelte      | 132 +++++++
 src/lib/services/mcpOAuthService.ts           | 363 ++++++++++++++++++
 src/lib/stores/mcpOAuthTokens.ts              | 250 ++++++++++++
 src/lib/stores/mcpServers.ts                  |  57 ++-
 src/lib/types/McpOAuth.ts                     |  94 +++++
 src/lib/types/Tool.ts                         |   2 +
 src/lib/utils/pkce.ts                         |  69 ++++
 .../api/mcp/oauth/callback/+page.svelte       | 163 ++++++++
 src/routes/conversation/[id]/+page.svelte     |   6 +-
 10 files changed, 1330 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/services/mcpOAuthService.ts
 create mode 100644 src/lib/stores/mcpOAuthTokens.ts
 create mode 100644 src/lib/types/McpOAuth.ts
 create mode 100644 src/lib/utils/pkce.ts
 create mode 100644 src/routes/api/mcp/oauth/callback/+page.svelte

diff --git a/src/lib/components/mcp/AddServerForm.svelte b/src/lib/components/mcp/AddServerForm.svelte
index 96a389b5202..26f93025a19 100644
--- a/src/lib/components/mcp/AddServerForm.svelte
+++ b/src/lib/components/mcp/AddServerForm.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
+	import { onMount, onDestroy } from "svelte";
 	import type { KeyValuePair } from "$lib/types/Tool";
+	import type { OAuthServerMetadata } from "$lib/types/McpOAuth";
 	import {
 		validateMcpServerUrl,
 		validateHeader,
 		isSensitiveHeader,
 	} from "$lib/utils/mcpValidation";
+	import { checkOAuthRequired, startOAuthFlow } from "$lib/services/mcpOAuthService";
+	import { reloadFromStorage } from "$lib/stores/mcpOAuthTokens";
 	import IconEye from "~icons/carbon/view";
 	import IconEyeOff from "~icons/carbon/view-off";
 	import IconTrash from "~icons/carbon/trash-can";
 	import IconAdd from "~icons/carbon/add";
 	import IconWarning from "~icons/carbon/warning";
+	import IconLocked from "~icons/carbon/locked";
+	import IconCheckmark from "~icons/carbon/checkmark-filled";
+	import IconPending from "~icons/carbon/pending-filled";
 
 	interface Props {
-		onsubmit: (server: { name: string; url: string; headers?: KeyValuePair[] }) => void;
+		onsubmit: (server: {
+			name: string;
+			url: string;
+			headers?: KeyValuePair[];
+			oauthEnabled?: boolean;
+		}) => void;
 		oncancel: () => void;
 		initialName?: string;
 		initialUrl?: string;
@@ -35,6 +47,129 @@
 	let showHeaderValues = $state<Record<number, boolean>>({});
 	let error = $state<string | null>(null);
 
+	let isCheckingOAuth = $state(false);
+	let oauthRequired = $state(false);
+	let oauthMetadata = $state<OAuthServerMetadata | null>(null);
+	let oauthCompleted = $state(false);
+	let oauthError = $state<string | null>(null);
+	let oauthCheckTimeout: ReturnType<typeof setTimeout> | undefined;
+	let pendingServerId = $state<string | null>(null);
+	let oauthPopup = $state<Window | null>(null);
+	let popupPollTimer: ReturnType<typeof setInterval> | undefined;
+
+	$effect(() => {
+		if (url) {
+			oauthRequired = false;
+			oauthMetadata = null;
+			oauthCompleted = false;
+			oauthError = null;
+
+			clearTimeout(oauthCheckTimeout);
+			oauthCheckTimeout = setTimeout(() => {
+				checkServerOAuth();
+			}, 500);
+		}
+	});
+
+	async function checkServerOAuth() {
+		if (!url.trim()) return;
+
+		const urlValidation = validateMcpServerUrl(url);
+		if (!urlValidation) return;
+
+		isCheckingOAuth = true;
+		oauthError = null;
+
+		try {
+			const result = await checkOAuthRequired(url);
+			oauthRequired = result.required;
+			oauthMetadata = result.metadata ?? null;
+
+			if (result.error) {
+				oauthError = result.error;
+			}
+		} catch (err) {
+			console.error("OAuth check failed:", err);
+			oauthError = err instanceof Error ? err.message : "Failed to check authentication";
+		} finally {
+			isCheckingOAuth = false;
+		}
+	}
+
+	async function handleStartOAuth() {
+		if (!oauthMetadata) return;
+
+		pendingServerId = `pending-${crypto.randomUUID()}`;
+		oauthError = null;
+
+		if (popupPollTimer) {
+			clearInterval(popupPollTimer);
+			popupPollTimer = undefined;
+		}
+
+		try {
+			oauthPopup = await startOAuthFlow(
+				pendingServerId,
+				url,
+				name || "MCP Server",
+				oauthMetadata,
+				window.location.href
+			);
+
+			if (oauthPopup) {
+				popupPollTimer = setInterval(() => {
+					if (oauthPopup?.closed) {
+						clearInterval(popupPollTimer);
+						popupPollTimer = undefined;
+						oauthPopup = null;
+
+						if (!oauthCompleted) {
+							oauthError = "Authentication window was closed";
+						}
+					}
+				}, 500);
+			}
+		} catch (err) {
+			oauthError = err instanceof Error ? err.message : "Failed to start authentication";
+			pendingServerId = null;
+			oauthPopup = null;
+		}
+	}
+
+	function handleOAuthMessage(event: MessageEvent) {
+		if (event.origin !== window.location.origin) return;
+
+		if (event.data?.type === "mcp-oauth-complete") {
+			if (event.data.serverId === pendingServerId || pendingServerId) {
+				if (popupPollTimer) {
+					clearInterval(popupPollTimer);
+					popupPollTimer = undefined;
+				}
+				oauthPopup = null;
+
+				if (event.data.success) {
+					oauthCompleted = true;
+					oauthError = null;
+					reloadFromStorage();
+				} else {
+					oauthError = event.data.error || "Authentication failed";
+				}
+			}
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener("message", handleOAuthMessage);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener("message", handleOAuthMessage);
+		clearTimeout(oauthCheckTimeout);
+		if (popupPollTimer) {
+			clearInterval(popupPollTimer);
+		}
+	});
+
 	function addHeader() {
 		headers = [...headers, { key: "", value: "" }];
 	}
@@ -68,6 +203,11 @@
 			return false;
 		}
 
+		if (oauthRequired && !oauthCompleted) {
+			error = "Please complete OAuth authentication first";
+			return false;
+		}
+
 		// Validate headers
 		for (let i = 0; i < headers.length; i++) {
 			const header = headers[i];
@@ -94,6 +234,7 @@
 			name: name.trim(),
 			url: url.trim(),
 			headers: filteredHeaders.length > 0 ? filteredHeaders : undefined,
+			oauthEnabled: oauthRequired && oauthCompleted,
 		});
 	}
 </script>
@@ -128,11 +269,64 @@
 			placeholder="https://example.com/mcp"
 			class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
 		/>
-		<!-- <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-			Only HTTPS is supported (e.g., https://localhost:5101).
-		</p> -->
 	</div>
 
+	<!-- OAuth Status -->
+	{#if isCheckingOAuth}
+		<div class="flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-2 dark:bg-gray-800">
+			<IconPending class="size-4 animate-spin text-gray-500 dark:text-gray-400" />
+			<span class="text-sm text-gray-600 dark:text-gray-400">
+				Checking authentication requirements...
+			</span>
+		</div>
+	{:else if oauthRequired}
+		<div
+			class="rounded-lg border p-4 {oauthCompleted
+				? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20'
+				: 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20'}"
+		>
+			<div class="flex items-start gap-3">
+				{#if oauthCompleted}
+					<div
+						class="flex size-8 items-center justify-center rounded-full bg-green-100 dark:bg-green-800/50"
+					>
+						<IconCheckmark class="size-5 text-green-600 dark:text-green-400" />
+					</div>
+					<div>
+						<p class="font-medium text-green-800 dark:text-green-200">Authenticated</p>
+						<p class="mt-0.5 text-sm text-green-700 dark:text-green-300">
+							OAuth authentication completed successfully. You can now add this server.
+						</p>
+					</div>
+				{:else}
+					<div
+						class="flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-800/50"
+					>
+						<IconLocked class="size-5 text-blue-600 dark:text-blue-400" />
+					</div>
+					<div class="flex-1">
+						<p class="font-medium text-blue-800 dark:text-blue-200">Authentication Required</p>
+						<p class="mt-0.5 text-sm text-blue-700 dark:text-blue-300">
+							This server requires OAuth authentication to access its tools.
+						</p>
+						{#if oauthError}
+							<p class="mt-2 text-sm text-red-600 dark:text-red-400">
+								{oauthError}
+							</p>
+						{/if}
+						<button
+							type="button"
+							onclick={handleStartOAuth}
+							class="mt-3 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+						>
+							Sign in with OAuth
+						</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
 	<!-- HTTP Headers -->
 	<details class="rounded-lg border border-gray-200 dark:border-gray-700">
 		<summary class="cursor-pointer px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
diff --git a/src/lib/components/mcp/ServerCard.svelte b/src/lib/components/mcp/ServerCard.svelte
index 694cd1ee803..ba3a8b519f8 100644
--- a/src/lib/components/mcp/ServerCard.svelte
+++ b/src/lib/components/mcp/ServerCard.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { onMount, onDestroy } from "svelte";
 	import type { MCPServer } from "$lib/types/Tool";
 	import { toggleServer, healthCheckServer, deleteCustomServer } from "$lib/stores/mcpServers";
+	import { mcpOAuthTokens, mcpOAuthConfigs, reloadFromStorage } from "$lib/stores/mcpOAuthTokens";
+	import { discoverOAuthMetadata, startOAuthFlow } from "$lib/services/mcpOAuthService";
 	import IconCheckmark from "~icons/carbon/checkmark-filled";
 	import IconWarning from "~icons/carbon/warning-filled";
 	import IconPending from "~icons/carbon/pending-filled";
@@ -8,6 +11,7 @@
 	import IconTrash from "~icons/carbon/trash-can";
 	import LucideHammer from "~icons/lucide/hammer";
 	import IconSettings from "~icons/carbon/settings";
+	import IconLocked from "~icons/carbon/locked";
 	import Switch from "$lib/components/Switch.svelte";
 	import { getMcpServerFaviconUrl } from "$lib/utils/favicon";
 
@@ -19,11 +23,70 @@
 	let { server, isSelected }: Props = $props();
 
 	let isLoadingHealth = $state(false);
+	let isReauthenticating = $state(false);
+	let oauthPopup = $state<Window | null>(null);
+	let popupPollTimer: ReturnType<typeof setInterval> | undefined;
+	let oauthError = $state<string | null>(null);
 
 	// Show a quick-access link ONLY for the exact HF MCP login endpoint
 	import { isStrictHfMcpLogin as isStrictHfMcpLoginUrl } from "$lib/utils/hf";
 	const isHfMcp = $derived.by(() => isStrictHfMcpLoginUrl(server.url));
 
+	const tokenStatus = $derived.by(() => {
+		const tokens = $mcpOAuthTokens;
+		const configs = $mcpOAuthConfigs;
+		const hasToken = tokens.has(server.id);
+		const hasConfig = configs.has(server.id);
+
+		if (!server.oauthEnabled && !hasToken && !hasConfig) return "none";
+
+		const token = tokens.get(server.id);
+		if (!token) return "missing";
+		if (Date.now() > token.expiresAt - 5 * 60 * 1000) return "expired";
+		if (Date.now() > token.expiresAt - 10 * 60 * 1000) return "expiring";
+		return "valid";
+	});
+
+	function startPopupPolling() {
+		if (popupPollTimer) {
+			clearInterval(popupPollTimer);
+		}
+
+		popupPollTimer = setInterval(() => {
+			if (oauthPopup?.closed) {
+				clearInterval(popupPollTimer);
+				popupPollTimer = undefined;
+				oauthPopup = null;
+				isReauthenticating = false;
+			}
+		}, 500);
+	}
+
+	async function handleReauthenticate() {
+		isReauthenticating = true;
+		oauthError = null;
+		try {
+			const metadata = await discoverOAuthMetadata(server.url);
+			if (metadata) {
+				oauthPopup = await startOAuthFlow(
+					server.id,
+					server.url,
+					server.name,
+					metadata,
+					window.location.href
+				);
+
+				if (oauthPopup) {
+					startPopupPolling();
+				}
+			}
+		} catch (err) {
+			console.error("Re-authentication failed:", err);
+			oauthError = err instanceof Error ? err.message : "Re-authentication failed";
+			isReauthenticating = false;
+		}
+	}
+
 	const statusInfo = $derived.by(() => {
 		switch (server.status) {
 			case "connected":
@@ -77,6 +140,38 @@
 	function handleDelete() {
 		deleteCustomServer(server.id);
 	}
+
+	function handleOAuthMessage(event: MessageEvent) {
+		if (event.origin !== window.location.origin) return;
+
+		if (event.data?.type === "mcp-oauth-complete" && event.data?.serverId === server.id) {
+			if (popupPollTimer) {
+				clearInterval(popupPollTimer);
+				popupPollTimer = undefined;
+			}
+			oauthPopup = null;
+			isReauthenticating = false;
+
+			if (event.data.success) {
+				oauthError = null;
+				reloadFromStorage(); // Sync tokens from popup's localStorage writes
+				healthCheckServer(server);
+			} else {
+				oauthError = event.data.error || "Authentication failed";
+			}
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener("message", handleOAuthMessage);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener("message", handleOAuthMessage);
+		if (popupPollTimer) {
+			clearInterval(popupPollTimer);
+		}
+	});
 </script>
 
 <div
@@ -146,6 +241,43 @@
 			</div>
 		{/if}
 
+		<!-- OAuth Error -->
+		{#if oauthError}
+			<div class="mb-2">
+				<div
+					class="rounded bg-red-50 px-2 py-1 text-xs text-red-800 dark:bg-red-900/20 dark:text-red-200"
+				>
+					{oauthError}
+				</div>
+			</div>
+		{/if}
+
+		<!-- OAuth Token Status -->
+		{#if tokenStatus === "expired" || tokenStatus === "missing"}
+			<div class="mb-2">
+				<div class="flex items-center gap-2 rounded bg-amber-50 px-2 py-1.5 dark:bg-amber-900/20">
+					<IconLocked class="size-4 flex-shrink-0 text-amber-600 dark:text-amber-400" />
+					<span class="flex-1 text-xs text-amber-800 dark:text-amber-200">
+						Authentication expired
+					</span>
+					<button
+						onclick={handleReauthenticate}
+						disabled={isReauthenticating}
+						class="rounded bg-amber-600 px-2 py-0.5 text-xs font-medium text-white hover:bg-amber-700 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-600"
+					>
+						{isReauthenticating ? "..." : "Re-authenticate"}
+					</button>
+				</div>
+			</div>
+		{:else if tokenStatus === "expiring"}
+			<div class="mb-2">
+				<div class="flex items-center gap-2 rounded bg-yellow-50 px-2 py-1.5 dark:bg-yellow-900/20">
+					<IconWarning class="size-4 flex-shrink-0 text-yellow-600 dark:text-yellow-400" />
+					<span class="text-xs text-yellow-800 dark:text-yellow-200"> Token expires soon </span>
+				</div>
+			</div>
+		{/if}
+
 		<!-- Actions -->
 		<div class="flex flex-wrap gap-1">
 			<button
diff --git a/src/lib/services/mcpOAuthService.ts b/src/lib/services/mcpOAuthService.ts
new file mode 100644
index 00000000000..68be2268755
--- /dev/null
+++ b/src/lib/services/mcpOAuthService.ts
@@ -0,0 +1,363 @@
+/**
+ * MCP OAuth Service
+ * Handles OAuth discovery, flow initiation, and token exchange
+ */
+
+import { base } from "$app/paths";
+import { generatePKCE } from "$lib/utils/pkce";
+import {
+	saveFlowState,
+	clearFlowState,
+	setToken,
+	setOAuthConfig,
+	getOAuthConfig,
+	getToken,
+	isTokenExpired,
+} from "$lib/stores/mcpOAuthTokens";
+import type {
+	OAuthServerMetadata,
+	McpOAuthToken,
+	McpOAuthFlowState,
+	OAuthDiscoveryResult,
+	TokenResponse,
+	ClientRegistrationResponse,
+} from "$lib/types/McpOAuth";
+
+const CALLBACK_PATH = "/api/mcp/oauth/callback";
+const FLOW_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes
+
+/**
+ * Discover OAuth server metadata from MCP server URL
+ * Checks /.well-known/oauth-authorization-server per RFC 8414
+ */
+export async function discoverOAuthMetadata(
+	serverUrl: string
+): Promise<OAuthServerMetadata | null> {
+	try {
+		const url = new URL(serverUrl);
+		// Per MCP spec: discovery at authorization base URL (server URL with path removed)
+		const wellKnownUrl = `${url.origin}/.well-known/oauth-authorization-server`;
+
+		const response = await fetch(wellKnownUrl, {
+			headers: { Accept: "application/json" },
+			// Short timeout for discovery
+			signal: AbortSignal.timeout(10000),
+		});
+
+		if (!response.ok) {
+			// Server doesn't support OAuth discovery - not an error
+			return null;
+		}
+
+		const metadata = (await response.json()) as OAuthServerMetadata;
+
+		// Validate required fields per OAuth 2.0 Authorization Server Metadata
+		if (!metadata.authorization_endpoint || !metadata.token_endpoint) {
+			console.warn("OAuth metadata missing required endpoints");
+			return null;
+		}
+
+		// Validate PKCE support (required by MCP OAuth 2.1)
+		if (
+			metadata.code_challenge_methods_supported &&
+			!metadata.code_challenge_methods_supported.includes("S256")
+		) {
+			console.warn("OAuth server does not support required S256 PKCE method");
+			return null;
+		}
+
+		return metadata;
+	} catch (error) {
+		// Discovery failure is not an error - server may not require OAuth
+		console.debug("OAuth discovery failed (server may not require OAuth):", error);
+		return null;
+	}
+}
+
+/**
+ * Check if an MCP server requires OAuth authentication
+ */
+export async function checkOAuthRequired(serverUrl: string): Promise<OAuthDiscoveryResult> {
+	try {
+		const metadata = await discoverOAuthMetadata(serverUrl);
+		if (metadata) {
+			return { required: true, metadata };
+		}
+		return { required: false };
+	} catch (error) {
+		return {
+			required: false,
+			error: error instanceof Error ? error.message : "Discovery failed",
+		};
+	}
+}
+
+/**
+ * Register as an OAuth client using Dynamic Client Registration (RFC 7591)
+ * Falls back to CIMD (Client ID Metadata Document) style if registration fails
+ */
+export async function registerOAuthClient(
+	metadata: OAuthServerMetadata,
+	_serverUrl: string
+): Promise<string> {
+	const callbackUrl = `${window.location.origin}${base}${CALLBACK_PATH}`;
+
+	// If Dynamic Client Registration endpoint is available, try it
+	if (metadata.registration_endpoint) {
+		try {
+			const response = await fetch(metadata.registration_endpoint, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					client_name: "Chat UI MCP Client",
+					redirect_uris: [callbackUrl],
+					token_endpoint_auth_method: "none", // Public client (no secret)
+					grant_types: ["authorization_code", "refresh_token"],
+					response_types: ["code"],
+				}),
+				signal: AbortSignal.timeout(10000),
+			});
+
+			if (response.ok) {
+				const data = (await response.json()) as ClientRegistrationResponse;
+				return data.client_id;
+			}
+		} catch (error) {
+			console.warn("Dynamic client registration failed, falling back to CIMD:", error);
+		}
+	}
+
+	// Fall back to CIMD: use our well-known URL as client_id
+	// This follows the November 2025 MCP spec update for Client ID Metadata Documents
+	return `${window.location.origin}${base}/.well-known/oauth-cimd`;
+}
+
+/**
+ * Build the callback URL for OAuth redirects
+ */
+export function getCallbackUrl(): string {
+	return `${window.location.origin}${base}${CALLBACK_PATH}`;
+}
+
+/**
+ * Open a centered popup window for OAuth
+ */
+function openOAuthPopup(url: string, width: number, height: number): Window | null {
+	const left = Math.round(window.screenX + (window.innerWidth - width) / 2);
+	const top = Math.round(window.screenY + (window.innerHeight - height) / 2);
+
+	return window.open(
+		url,
+		"mcp-oauth",
+		`popup=yes,width=${width},height=${height},top=${top},left=${left},toolbar=no,menubar=no,scrollbars=yes`
+	);
+}
+
+/**
+ * Start OAuth flow for an MCP server
+ * Opens a popup for better UX (preserves app state), falls back to redirect if popup blocked
+ * Returns the popup window reference if opened, null if using redirect fallback
+ */
+export async function startOAuthFlow(
+	serverId: string,
+	serverUrl: string,
+	serverName: string,
+	metadata: OAuthServerMetadata,
+	returnTo?: string
+): Promise<Window | null> {
+	// Generate PKCE values
+	const pkce = await generatePKCE();
+
+	// Register/get client ID
+	const clientId = await registerOAuthClient(metadata, serverUrl);
+
+	// Build callback URL
+	const callbackUrl = getCallbackUrl();
+
+	// Save flow state to survive redirect/popup
+	const flowState: McpOAuthFlowState = {
+		serverId,
+		serverUrl,
+		serverName,
+		pkce,
+		metadata,
+		clientId,
+		startedAt: Date.now(),
+		returnTo,
+	};
+	saveFlowState(flowState);
+
+	// Build authorization URL
+	const authUrl = new URL(metadata.authorization_endpoint);
+	authUrl.searchParams.set("response_type", "code");
+	authUrl.searchParams.set("client_id", clientId);
+	authUrl.searchParams.set("redirect_uri", callbackUrl);
+	authUrl.searchParams.set("code_challenge", pkce.codeChallenge);
+	authUrl.searchParams.set("code_challenge_method", "S256");
+	authUrl.searchParams.set("state", pkce.state);
+
+	// Add scopes if server specifies supported scopes
+	if (metadata.scopes_supported?.length) {
+		// Request all supported scopes
+		authUrl.searchParams.set("scope", metadata.scopes_supported.join(" "));
+	}
+
+	// Try to open popup (better UX - keeps app state)
+	const popup = openOAuthPopup(authUrl.toString(), 600, 700);
+
+	if (popup) {
+		// Popup opened successfully
+		return popup;
+	}
+
+	// Popup blocked - fall back to redirect
+	console.warn("OAuth popup blocked, falling back to redirect");
+	window.location.href = authUrl.toString();
+	return null;
+}
+
+/**
+ * Exchange authorization code for tokens
+ * Called from the callback page after OAuth redirect
+ */
+export async function exchangeCodeForTokens(
+	code: string,
+	flowState: McpOAuthFlowState
+): Promise<McpOAuthToken> {
+	const callbackUrl = getCallbackUrl();
+
+	const response = await fetch(flowState.metadata.token_endpoint, {
+		method: "POST",
+		headers: { "Content-Type": "application/x-www-form-urlencoded" },
+		body: new URLSearchParams({
+			grant_type: "authorization_code",
+			code,
+			redirect_uri: callbackUrl,
+			client_id: flowState.clientId,
+			code_verifier: flowState.pkce.codeVerifier,
+		}),
+	});
+
+	if (!response.ok) {
+		const errorText = await response.text();
+		clearFlowState();
+		throw new Error(`Token exchange failed: ${errorText}`);
+	}
+
+	const data = (await response.json()) as TokenResponse;
+
+	// Calculate expiry timestamp
+	// Use || to catch 0 or falsy values, ensure minimum 1 hour expiry
+	const expiresIn = data.expires_in && data.expires_in > 0 ? data.expires_in : 3600;
+
+	const token: McpOAuthToken = {
+		accessToken: data.access_token,
+		refreshToken: data.refresh_token,
+		expiresAt: Date.now() + expiresIn * 1000,
+		tokenType: data.token_type ?? "Bearer",
+		scope: data.scope,
+	};
+
+	// Store the token and OAuth config
+	setToken(flowState.serverId, token);
+	setOAuthConfig(flowState.serverId, {
+		serverId: flowState.serverId,
+		serverUrl: flowState.serverUrl,
+		clientId: flowState.clientId,
+		metadata: flowState.metadata,
+	});
+
+	// Clear flow state
+	clearFlowState();
+
+	return token;
+}
+
+/**
+ * Refresh an expired OAuth token
+ */
+export async function refreshOAuthToken(serverId: string): Promise<McpOAuthToken | null> {
+	const config = getOAuthConfig(serverId);
+	const token = getToken(serverId);
+
+	if (!config || !token?.refreshToken) {
+		return null;
+	}
+
+	try {
+		const response = await fetch(config.metadata.token_endpoint, {
+			method: "POST",
+			headers: { "Content-Type": "application/x-www-form-urlencoded" },
+			body: new URLSearchParams({
+				grant_type: "refresh_token",
+				refresh_token: token.refreshToken,
+				client_id: config.clientId,
+			}),
+		});
+
+		if (!response.ok) {
+			console.warn("Token refresh failed:", response.status);
+			return null;
+		}
+
+		const data = (await response.json()) as TokenResponse;
+		const expiresIn = data.expires_in && data.expires_in > 0 ? data.expires_in : 3600;
+
+		const newToken: McpOAuthToken = {
+			accessToken: data.access_token,
+			refreshToken: data.refresh_token ?? token.refreshToken, // Keep old if not returned
+			expiresAt: Date.now() + expiresIn * 1000,
+			tokenType: data.token_type ?? "Bearer",
+			scope: data.scope ?? token.scope,
+		};
+
+		setToken(serverId, newToken);
+		return newToken;
+	} catch (error) {
+		console.error("Token refresh error:", error);
+		return null;
+	}
+}
+
+/**
+ * Validate OAuth flow state (called from callback)
+ */
+export function validateFlowState(
+	flowState: McpOAuthFlowState | null,
+	state: string
+): { valid: boolean; error?: string } {
+	if (!flowState) {
+		return { valid: false, error: "OAuth flow state not found. Please try again." };
+	}
+
+	// Validate state to prevent CSRF
+	if (state !== flowState.pkce.state) {
+		return { valid: false, error: "Invalid state parameter. Possible CSRF attack." };
+	}
+
+	// Check flow hasn't expired
+	if (Date.now() - flowState.startedAt > FLOW_TIMEOUT_MS) {
+		return { valid: false, error: "OAuth flow expired. Please try again." };
+	}
+
+	return { valid: true };
+}
+
+/**
+ * Get a valid token for a server, refreshing if necessary
+ */
+export async function getValidToken(serverId: string): Promise<McpOAuthToken | null> {
+	const token = getToken(serverId);
+
+	if (!token) {
+		return null;
+	}
+
+	// If token is expired, try to refresh
+	if (isTokenExpired(token)) {
+		const refreshed = await refreshOAuthToken(serverId);
+		return refreshed;
+	}
+
+	return token;
+}
diff --git a/src/lib/stores/mcpOAuthTokens.ts b/src/lib/stores/mcpOAuthTokens.ts
new file mode 100644
index 00000000000..d68c7e04b16
--- /dev/null
+++ b/src/lib/stores/mcpOAuthTokens.ts
@@ -0,0 +1,250 @@
+/**
+ * MCP OAuth Token Store
+ * Manages OAuth tokens and flow state in localStorage
+ */
+
+import { writable, get } from "svelte/store";
+import { browser } from "$app/environment";
+import { env as publicEnv } from "$env/dynamic/public";
+import type { McpOAuthToken, McpOAuthFlowState, McpOAuthConfig } from "$lib/types/McpOAuth";
+
+// Match the key prefix pattern from mcpServers.ts
+function toKeyPart(s: string | undefined): string {
+	return (s || "").toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
+}
+
+const appLabel = toKeyPart(publicEnv.PUBLIC_APP_ASSETS || publicEnv.PUBLIC_APP_NAME);
+const KEY_PREFIX = appLabel || "app";
+
+const STORAGE_KEYS = {
+	OAUTH_TOKENS: `${KEY_PREFIX}:mcp:oauth-tokens`,
+	OAUTH_CONFIGS: `${KEY_PREFIX}:mcp:oauth-configs`,
+	OAUTH_FLOW: `${KEY_PREFIX}:mcp:oauth-flow`,
+} as const;
+
+// Token expiry buffer: consider expired 5 minutes before actual expiry
+const EXPIRY_BUFFER_MS = 5 * 60 * 1000;
+// Near expiry warning: 10 minutes before expiry
+const NEAR_EXPIRY_MS = 10 * 60 * 1000;
+
+/**
+ * Load tokens from localStorage
+ */
+function loadTokens(): Map<string, McpOAuthToken> {
+	if (!browser) return new Map();
+
+	try {
+		const json = localStorage.getItem(STORAGE_KEYS.OAUTH_TOKENS);
+		if (!json) return new Map();
+		const obj = JSON.parse(json) as Record<string, McpOAuthToken>;
+		return new Map(Object.entries(obj));
+	} catch (error) {
+		console.error("Failed to load MCP OAuth tokens:", error);
+		return new Map();
+	}
+}
+
+/**
+ * Save tokens to localStorage
+ */
+function saveTokens(tokens: Map<string, McpOAuthToken>) {
+	if (!browser) return;
+
+	try {
+		const obj = Object.fromEntries(tokens);
+		localStorage.setItem(STORAGE_KEYS.OAUTH_TOKENS, JSON.stringify(obj));
+	} catch (error) {
+		console.error("Failed to save MCP OAuth tokens:", error);
+	}
+}
+
+/**
+ * Load OAuth configs from localStorage
+ */
+function loadConfigs(): Map<string, McpOAuthConfig> {
+	if (!browser) return new Map();
+
+	try {
+		const json = localStorage.getItem(STORAGE_KEYS.OAUTH_CONFIGS);
+		if (!json) return new Map();
+		const obj = JSON.parse(json) as Record<string, McpOAuthConfig>;
+		return new Map(Object.entries(obj));
+	} catch (error) {
+		console.error("Failed to load MCP OAuth configs:", error);
+		return new Map();
+	}
+}
+
+/**
+ * Save OAuth configs to localStorage
+ */
+function saveConfigs(configs: Map<string, McpOAuthConfig>) {
+	if (!browser) return;
+
+	try {
+		const obj = Object.fromEntries(configs);
+		localStorage.setItem(STORAGE_KEYS.OAUTH_CONFIGS, JSON.stringify(obj));
+	} catch (error) {
+		console.error("Failed to save MCP OAuth configs:", error);
+	}
+}
+
+// Svelte stores
+export const mcpOAuthTokens = writable<Map<string, McpOAuthToken>>(loadTokens());
+export const mcpOAuthConfigs = writable<Map<string, McpOAuthConfig>>(loadConfigs());
+export const mcpOAuthFlowState = writable<McpOAuthFlowState | null>(null);
+
+// Auto-persist tokens when they change
+if (browser) {
+	mcpOAuthTokens.subscribe(saveTokens);
+	mcpOAuthConfigs.subscribe(saveConfigs);
+}
+
+/**
+ * Save OAuth flow state (persisted to survive redirects)
+ */
+export function saveFlowState(state: McpOAuthFlowState) {
+	if (!browser) return;
+
+	try {
+		localStorage.setItem(STORAGE_KEYS.OAUTH_FLOW, JSON.stringify(state));
+		mcpOAuthFlowState.set(state);
+	} catch (error) {
+		console.error("Failed to save OAuth flow state:", error);
+	}
+}
+
+/**
+ * Load OAuth flow state from localStorage
+ */
+export function loadFlowState(): McpOAuthFlowState | null {
+	if (!browser) return null;
+
+	try {
+		const json = localStorage.getItem(STORAGE_KEYS.OAUTH_FLOW);
+		if (!json) return null;
+		const state = JSON.parse(json) as McpOAuthFlowState;
+		mcpOAuthFlowState.set(state);
+		return state;
+	} catch (error) {
+		console.error("Failed to load OAuth flow state:", error);
+		return null;
+	}
+}
+
+/**
+ * Clear OAuth flow state
+ */
+export function clearFlowState() {
+	if (!browser) return;
+
+	try {
+		localStorage.removeItem(STORAGE_KEYS.OAUTH_FLOW);
+		mcpOAuthFlowState.set(null);
+	} catch (error) {
+		console.error("Failed to clear OAuth flow state:", error);
+	}
+}
+
+/**
+ * Set a token for a server
+ */
+export function setToken(serverId: string, token: McpOAuthToken) {
+	mcpOAuthTokens.update((tokens) => {
+		tokens.set(serverId, token);
+		return new Map(tokens);
+	});
+}
+
+/**
+ * Get a token for a server
+ */
+export function getToken(serverId: string): McpOAuthToken | undefined {
+	return get(mcpOAuthTokens).get(serverId);
+}
+
+/**
+ * Remove a token for a server
+ */
+export function removeToken(serverId: string) {
+	mcpOAuthTokens.update((tokens) => {
+		tokens.delete(serverId);
+		return new Map(tokens);
+	});
+}
+
+/**
+ * Set OAuth config for a server
+ */
+export function setOAuthConfig(serverId: string, config: McpOAuthConfig) {
+	mcpOAuthConfigs.update((configs) => {
+		configs.set(serverId, config);
+		return new Map(configs);
+	});
+}
+
+/**
+ * Get OAuth config for a server
+ */
+export function getOAuthConfig(serverId: string): McpOAuthConfig | undefined {
+	return get(mcpOAuthConfigs).get(serverId);
+}
+
+/**
+ * Remove OAuth config for a server
+ */
+export function removeOAuthConfig(serverId: string) {
+	mcpOAuthConfigs.update((configs) => {
+		configs.delete(serverId);
+		return new Map(configs);
+	});
+}
+
+/**
+ * Check if a token is expired (with buffer)
+ */
+export function isTokenExpired(token: McpOAuthToken): boolean {
+	return Date.now() > token.expiresAt - EXPIRY_BUFFER_MS;
+}
+
+/**
+ * Check if a token is near expiry (for warning UI)
+ */
+export function isTokenNearExpiry(token: McpOAuthToken): boolean {
+	return Date.now() > token.expiresAt - NEAR_EXPIRY_MS;
+}
+
+/**
+ * Get token status for a server
+ */
+export function getTokenStatus(
+	serverId: string
+): "none" | "valid" | "expiring" | "expired" | "missing" {
+	const config = getOAuthConfig(serverId);
+	if (!config) return "none"; // Server doesn't use OAuth
+
+	const token = getToken(serverId);
+	if (!token) return "missing";
+	if (isTokenExpired(token)) return "expired";
+	if (isTokenNearExpiry(token)) return "expiring";
+	return "valid";
+}
+
+/**
+ * Clean up tokens and configs for a deleted server
+ */
+export function cleanupServerOAuth(serverId: string) {
+	removeToken(serverId);
+	removeOAuthConfig(serverId);
+}
+
+/**
+ * Reload tokens and configs from localStorage
+ * Used to sync after OAuth popup completes (popup has separate in-memory stores)
+ */
+export function reloadFromStorage() {
+	if (!browser) return;
+
+	mcpOAuthTokens.set(loadTokens());
+	mcpOAuthConfigs.set(loadConfigs());
+}
diff --git a/src/lib/stores/mcpServers.ts b/src/lib/stores/mcpServers.ts
index 8ce5f38ff65..0dab7bb6c1f 100644
--- a/src/lib/stores/mcpServers.ts
+++ b/src/lib/stores/mcpServers.ts
@@ -9,6 +9,7 @@ import { base } from "$app/paths";
 import { env as publicEnv } from "$env/dynamic/public";
 import { browser } from "$app/environment";
 import type { MCPServer, ServerStatus, MCPTool } from "$lib/types/Tool";
+import { getToken, isTokenExpired, cleanupServerOAuth } from "$lib/stores/mcpOAuthTokens";
 
 // Namespace storage by app identity to avoid collisions across apps
 function toKeyPart(s: string | undefined): string {
@@ -137,6 +138,41 @@ export const allBaseServersEnabled = derived(
 // Note: Authorization overlay (with user's HF token) for the Hugging Face MCP host
 // is applied server-side when enabled via MCP_FORWARD_HF_USER_TOKEN.
 
+/**
+ * Get enabled servers with OAuth tokens injected into headers
+ */
+export function getServersWithAuth(): MCPServer[] {
+	const servers = get(enabledServers);
+
+	return servers.map((server) => {
+		const token = getToken(server.id);
+
+		if (server.oauthEnabled || token) {
+			if (!token || isTokenExpired(token)) {
+				return { ...server, authRequired: true };
+			}
+
+			const headers = server.headers ? [...server.headers] : [];
+			const authHeaderIndex = headers.findIndex((h) => h.key.toLowerCase() === "authorization");
+			const tokenType = token.tokenType.charAt(0).toUpperCase() + token.tokenType.slice(1);
+			const authHeader = {
+				key: "Authorization",
+				value: `${tokenType} ${token.accessToken}`,
+			};
+
+			if (authHeaderIndex >= 0) {
+				headers[authHeaderIndex] = authHeader;
+			} else {
+				headers.push(authHeader);
+			}
+
+			return { ...server, headers, authRequired: false, oauthEnabled: true };
+		}
+
+		return server;
+	});
+}
+
 /**
  * Refresh base servers from API and merge with custom servers
  */
@@ -280,6 +316,7 @@ export function deleteCustomServer(id: string) {
 		return newSet;
 	});
 
+	cleanupServerOAuth(id);
 	refreshMcpServers();
 }
 
@@ -317,10 +354,28 @@ export async function healthCheckServer(
 	try {
 		updateServerStatus(server.id, "connecting");
 
+		const headers = server.headers ? [...server.headers] : [];
+		const token = getToken(server.id);
+
+		if (token && !isTokenExpired(token)) {
+			const authHeaderIndex = headers.findIndex((h) => h.key.toLowerCase() === "authorization");
+			const tokenType = token.tokenType.charAt(0).toUpperCase() + token.tokenType.slice(1);
+			const authHeader = {
+				key: "Authorization",
+				value: `${tokenType} ${token.accessToken}`,
+			};
+
+			if (authHeaderIndex >= 0) {
+				headers[authHeaderIndex] = authHeader;
+			} else {
+				headers.push(authHeader);
+			}
+		}
+
 		const response = await fetch(`${base}/api/mcp/health`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ url: server.url, headers: server.headers }),
+			body: JSON.stringify({ url: server.url, headers }),
 		});
 
 		const result = await response.json();
diff --git a/src/lib/types/McpOAuth.ts b/src/lib/types/McpOAuth.ts
new file mode 100644
index 00000000000..82e946cff84
--- /dev/null
+++ b/src/lib/types/McpOAuth.ts
@@ -0,0 +1,94 @@
+/**
+ * MCP OAuth 2.1 Type Definitions
+ * Following the MCP Authorization spec
+ */
+
+/**
+ * OAuth server metadata from .well-known/oauth-authorization-server
+ * Per RFC 8414 (OAuth 2.0 Authorization Server Metadata)
+ */
+export interface OAuthServerMetadata {
+	issuer: string;
+	authorization_endpoint: string;
+	token_endpoint: string;
+	registration_endpoint?: string; // For Dynamic Client Registration (RFC 7591)
+	scopes_supported?: string[];
+	response_types_supported?: string[];
+	code_challenge_methods_supported?: string[]; // Should include "S256" for PKCE
+	token_endpoint_auth_methods_supported?: string[];
+	grant_types_supported?: string[];
+}
+
+/**
+ * PKCE state for in-progress OAuth flows
+ */
+export interface PKCEState {
+	codeVerifier: string;
+	codeChallenge: string;
+	state: string; // CSRF protection
+}
+
+/**
+ * Stored OAuth token data per MCP server
+ */
+export interface McpOAuthToken {
+	accessToken: string;
+	refreshToken?: string;
+	expiresAt: number; // Unix timestamp in milliseconds
+	tokenType: string; // Usually "Bearer"
+	scope?: string;
+}
+
+/**
+ * OAuth configuration stored per server
+ */
+export interface McpOAuthConfig {
+	serverId: string;
+	serverUrl: string;
+	clientId: string;
+	metadata: OAuthServerMetadata;
+}
+
+/**
+ * OAuth flow state (persisted during active auth flow to survive redirects)
+ */
+export interface McpOAuthFlowState {
+	serverId: string;
+	serverUrl: string;
+	serverName: string;
+	pkce: PKCEState;
+	metadata: OAuthServerMetadata;
+	clientId: string;
+	startedAt: number; // Unix timestamp for flow timeout
+	returnTo?: string; // URL to return to after OAuth
+}
+
+/**
+ * Result of OAuth discovery check
+ */
+export interface OAuthDiscoveryResult {
+	required: boolean;
+	metadata?: OAuthServerMetadata;
+	error?: string;
+}
+
+/**
+ * Token exchange response from OAuth token endpoint
+ */
+export interface TokenResponse {
+	access_token: string;
+	token_type: string;
+	expires_in?: number;
+	refresh_token?: string;
+	scope?: string;
+}
+
+/**
+ * Dynamic Client Registration response (RFC 7591)
+ */
+export interface ClientRegistrationResponse {
+	client_id: string;
+	client_secret?: string;
+	client_id_issued_at?: number;
+	client_secret_expires_at?: number;
+}
diff --git a/src/lib/types/Tool.ts b/src/lib/types/Tool.ts
index e2172e17ce0..9c83c287c7c 100644
--- a/src/lib/types/Tool.ts
+++ b/src/lib/types/Tool.ts
@@ -66,6 +66,8 @@ export interface MCPServer {
 	errorMessage?: string;
 	// Indicates server reports or appears to require OAuth or other auth
 	authRequired?: boolean;
+	// OAuth 2.1 support
+	oauthEnabled?: boolean;
 }
 
 export interface MCPServerApi {
diff --git a/src/lib/utils/pkce.ts b/src/lib/utils/pkce.ts
new file mode 100644
index 00000000000..c4dc33e4e25
--- /dev/null
+++ b/src/lib/utils/pkce.ts
@@ -0,0 +1,69 @@
+/**
+ * PKCE (Proof Key for Code Exchange) utilities
+ * Implements RFC 7636 for OAuth 2.0 public clients
+ */
+
+import type { PKCEState } from "$lib/types/McpOAuth";
+
+/**
+ * Generate a cryptographically secure random string
+ * Uses Web Crypto API for secure random generation
+ */
+function generateRandomString(length: number): string {
+	const array = new Uint8Array(length);
+	crypto.getRandomValues(array);
+	return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+/**
+ * Base64URL encode a buffer (RFC 7636 compliant)
+ * - Uses URL-safe alphabet (- instead of +, _ instead of /)
+ * - Removes padding (=)
+ */
+function base64UrlEncode(buffer: ArrayBuffer): string {
+	const bytes = new Uint8Array(buffer);
+	let binary = "";
+	for (const byte of bytes) {
+		binary += String.fromCharCode(byte);
+	}
+	return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+/**
+ * Generate PKCE code verifier and challenge
+ *
+ * Per RFC 7636:
+ * - code_verifier: 43-128 character random string (we use 64 hex chars = 128 chars)
+ * - code_challenge: BASE64URL(SHA256(code_verifier))
+ * - code_challenge_method: "S256"
+ *
+ * @returns PKCEState with verifier, challenge, and state for CSRF protection
+ */
+export async function generatePKCE(): Promise<PKCEState> {
+	// Code verifier: high-entropy random string
+	// 64 bytes = 128 hex characters, well within 43-128 char range
+	const codeVerifier = generateRandomString(64);
+
+	// Code challenge: SHA-256 hash of verifier, base64url encoded
+	const encoder = new TextEncoder();
+	const data = encoder.encode(codeVerifier);
+	const digest = await crypto.subtle.digest("SHA-256", data);
+	const codeChallenge = base64UrlEncode(digest);
+
+	// State parameter for CSRF protection
+	const state = generateRandomString(32);
+
+	return { codeVerifier, codeChallenge, state };
+}
+
+/**
+ * Verify that a code challenge matches a code verifier
+ * Used for testing/validation purposes
+ */
+export async function verifyPKCE(codeVerifier: string, codeChallenge: string): Promise<boolean> {
+	const encoder = new TextEncoder();
+	const data = encoder.encode(codeVerifier);
+	const digest = await crypto.subtle.digest("SHA-256", data);
+	const computedChallenge = base64UrlEncode(digest);
+	return computedChallenge === codeChallenge;
+}
diff --git a/src/routes/api/mcp/oauth/callback/+page.svelte b/src/routes/api/mcp/oauth/callback/+page.svelte
new file mode 100644
index 00000000000..e0891c4faed
--- /dev/null
+++ b/src/routes/api/mcp/oauth/callback/+page.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+	import { loadFlowState, clearFlowState } from "$lib/stores/mcpOAuthTokens";
+	import { exchangeCodeForTokens, validateFlowState } from "$lib/services/mcpOAuthService";
+	import IconCheckmark from "~icons/carbon/checkmark-filled";
+	import IconWarning from "~icons/carbon/warning-filled";
+	import IconPending from "~icons/carbon/pending-filled";
+
+	type Status = "processing" | "success" | "error";
+
+	let status = $state<Status>("processing");
+	let errorMessage = $state<string>("");
+	let serverName = $state<string>("");
+	let returnTo = $state<string | undefined>(undefined);
+
+	// Helper to notify parent window (for popup mode)
+	function notifyParent(serverId: string | undefined, success: boolean, error?: string) {
+		if (window.opener) {
+			window.opener.postMessage(
+				{
+					type: "mcp-oauth-complete",
+					serverId,
+					success,
+					error,
+				},
+				window.location.origin
+			);
+		}
+	}
+
+	// Check if we're in popup mode
+	const isPopup = typeof window !== "undefined" && window.opener !== null;
+
+	onMount(async () => {
+		const url = new URL(window.location.href);
+		const code = url.searchParams.get("code");
+		const state = url.searchParams.get("state");
+		const error = url.searchParams.get("error");
+		const errorDesc = url.searchParams.get("error_description");
+
+		// Load stored flow state early to get serverId for error notifications
+		const flowState = loadFlowState();
+
+		// Handle OAuth error response from authorization server
+		if (error) {
+			status = "error";
+			errorMessage = errorDesc || error;
+			clearFlowState();
+
+			// Notify parent in popup mode
+			if (isPopup) {
+				notifyParent(flowState?.serverId, false, errorMessage);
+			}
+			return;
+		}
+
+		// Validate required parameters
+		if (!code || !state) {
+			status = "error";
+			errorMessage = "Missing authorization code or state parameter";
+			clearFlowState();
+
+			if (isPopup) {
+				notifyParent(flowState?.serverId, false, errorMessage);
+			}
+			return;
+		}
+
+		const validation = validateFlowState(flowState, state);
+		if (!validation.valid || !flowState) {
+			status = "error";
+			errorMessage = validation.error || "Invalid flow state";
+			clearFlowState();
+
+			if (isPopup) {
+				notifyParent(flowState?.serverId, false, errorMessage);
+			}
+			return;
+		}
+
+		serverName = flowState.serverName || flowState.serverUrl;
+		returnTo = flowState.returnTo;
+
+		try {
+			await exchangeCodeForTokens(code, flowState);
+			status = "success";
+
+			if (isPopup) {
+				notifyParent(flowState.serverId, true);
+				setTimeout(() => window.close(), 500);
+			} else {
+				setTimeout(() => {
+					goto(returnTo || `${base}/`);
+				}, 1500);
+			}
+		} catch (err) {
+			status = "error";
+			errorMessage = err instanceof Error ? err.message : "Token exchange failed";
+			clearFlowState();
+
+			if (isPopup) {
+				notifyParent(flowState.serverId, false, errorMessage);
+			}
+		}
+	});
+
+	function handleReturn() {
+		goto(returnTo || `${base}/`);
+	}
+</script>
+
+<div class="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900">
+	<div class="w-full max-w-md rounded-xl bg-white p-8 shadow-lg dark:bg-gray-800">
+		<div class="text-center">
+			{#if status === "processing"}
+				<div
+					class="mx-auto flex size-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30"
+				>
+					<IconPending class="size-8 animate-spin text-blue-600 dark:text-blue-400" />
+				</div>
+				<h1 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">
+					Completing Authentication...
+				</h1>
+				<p class="mt-2 text-gray-600 dark:text-gray-400">
+					Please wait while we complete the OAuth flow.
+				</p>
+			{:else if status === "success"}
+				<div
+					class="mx-auto flex size-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
+				>
+					<IconCheckmark class="size-8 text-green-600 dark:text-green-400" />
+				</div>
+				<h1 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">
+					Authentication Successful!
+				</h1>
+				<p class="mt-2 text-gray-600 dark:text-gray-400">
+					You can now use <span class="font-medium">{serverName}</span>
+				</p>
+				<p class="mt-4 text-sm text-gray-500 dark:text-gray-500">Redirecting...</p>
+			{:else}
+				<div
+					class="mx-auto flex size-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30"
+				>
+					<IconWarning class="size-8 text-red-600 dark:text-red-400" />
+				</div>
+				<h1 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">
+					Authentication Failed
+				</h1>
+				<p class="mt-2 text-sm text-red-600 dark:text-red-400">
+					{errorMessage}
+				</p>
+				<button
+					onclick={handleReturn}
+					class="mt-6 rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
+				>
+					Return to Chat
+				</button>
+			{/if}
+		</div>
+	</div>
+</div>
diff --git a/src/routes/conversation/[id]/+page.svelte b/src/routes/conversation/[id]/+page.svelte
index 16a01a0d20c..627fd42a672 100644
--- a/src/routes/conversation/[id]/+page.svelte
+++ b/src/routes/conversation/[id]/+page.svelte
@@ -17,7 +17,7 @@
 	import { fetchMessageUpdates } from "$lib/utils/messageUpdates";
 	import type { v4 } from "uuid";
 	import { useSettingsStore } from "$lib/stores/settings.js";
-	import { enabledServers } from "$lib/stores/mcpServers";
+	import { getServersWithAuth } from "$lib/stores/mcpServers";
 	import { browser } from "$app/environment";
 	import {
 		addBackgroundGeneration,
@@ -220,8 +220,8 @@
 					messageId,
 					isRetry,
 					files: isRetry ? userMessage?.files : base64Files,
-					selectedMcpServerNames: $enabledServers.map((s) => s.name),
-					selectedMcpServers: $enabledServers.map((s) => ({
+					selectedMcpServerNames: getServersWithAuth().map((s) => s.name),
+					selectedMcpServers: getServersWithAuth().map((s) => ({
 						name: s.name,
 						url: s.url,
 						headers: s.headers,

From 9ce1b903d014290e3461898ee9ce8acde90ef369 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Mu=C5=A1tar?= <victor.mustar@gmail.com>
Date: Fri, 5 Dec 2025 14:57:32 +0100
Subject: [PATCH 2/3] Refactor OAuth handling and server auth injection

Centralizes OAuth header injection logic in mcpServers store, improves token expiry checks, and streamlines OAuth flow handling in AddServerForm and ServerCard components. Also optimizes usage of getServersWithAuth in conversation page and cleans up redundant code and comments for maintainability.
---
 src/lib/components/mcp/AddServerForm.svelte | 36 +++++------
 src/lib/components/mcp/ServerCard.svelte    | 39 +++++++-----
 src/lib/services/mcpOAuthService.ts         | 29 +--------
 src/lib/stores/mcpOAuthTokens.ts            | 56 +----------------
 src/lib/stores/mcpServers.ts                | 67 +++++++++++----------
 src/routes/conversation/[id]/+page.svelte   |  5 +-
 6 files changed, 84 insertions(+), 148 deletions(-)

diff --git a/src/lib/components/mcp/AddServerForm.svelte b/src/lib/components/mcp/AddServerForm.svelte
index 26f93025a19..fddfe07213c 100644
--- a/src/lib/components/mcp/AddServerForm.svelte
+++ b/src/lib/components/mcp/AddServerForm.svelte
@@ -20,6 +20,7 @@
 
 	interface Props {
 		onsubmit: (server: {
+			id?: string;
 			name: string;
 			url: string;
 			headers?: KeyValuePair[];
@@ -74,14 +75,14 @@
 	async function checkServerOAuth() {
 		if (!url.trim()) return;
 
-		const urlValidation = validateMcpServerUrl(url);
-		if (!urlValidation) return;
+		const validUrl = validateMcpServerUrl(url);
+		if (!validUrl) return;
 
 		isCheckingOAuth = true;
 		oauthError = null;
 
 		try {
-			const result = await checkOAuthRequired(url);
+			const result = await checkOAuthRequired(validUrl);
 			oauthRequired = result.required;
 			oauthMetadata = result.metadata ?? null;
 
@@ -140,20 +141,20 @@
 		if (event.origin !== window.location.origin) return;
 
 		if (event.data?.type === "mcp-oauth-complete") {
-			if (event.data.serverId === pendingServerId || pendingServerId) {
-				if (popupPollTimer) {
-					clearInterval(popupPollTimer);
-					popupPollTimer = undefined;
-				}
-				oauthPopup = null;
-
-				if (event.data.success) {
-					oauthCompleted = true;
-					oauthError = null;
-					reloadFromStorage();
-				} else {
-					oauthError = event.data.error || "Authentication failed";
-				}
+			if (event.data.serverId !== pendingServerId) return;
+
+			if (popupPollTimer) {
+				clearInterval(popupPollTimer);
+				popupPollTimer = undefined;
+			}
+			oauthPopup = null;
+
+			if (event.data.success) {
+				oauthCompleted = true;
+				oauthError = null;
+				reloadFromStorage();
+			} else {
+				oauthError = event.data.error || "Authentication failed";
 			}
 		}
 	}
@@ -231,6 +232,7 @@
 		const filteredHeaders = headers.filter((h) => h.key.trim() && h.value.trim());
 
 		onsubmit({
+			id: pendingServerId ?? undefined,
 			name: name.trim(),
 			url: url.trim(),
 			headers: filteredHeaders.length > 0 ? filteredHeaders : undefined,
diff --git a/src/lib/components/mcp/ServerCard.svelte b/src/lib/components/mcp/ServerCard.svelte
index ba3a8b519f8..2a1eb5d4098 100644
--- a/src/lib/components/mcp/ServerCard.svelte
+++ b/src/lib/components/mcp/ServerCard.svelte
@@ -2,7 +2,13 @@
 	import { onMount, onDestroy } from "svelte";
 	import type { MCPServer } from "$lib/types/Tool";
 	import { toggleServer, healthCheckServer, deleteCustomServer } from "$lib/stores/mcpServers";
-	import { mcpOAuthTokens, mcpOAuthConfigs, reloadFromStorage } from "$lib/stores/mcpOAuthTokens";
+	import {
+		mcpOAuthTokens,
+		mcpOAuthConfigs,
+		reloadFromStorage,
+		isTokenExpired,
+		isTokenNearExpiry,
+	} from "$lib/stores/mcpOAuthTokens";
 	import { discoverOAuthMetadata, startOAuthFlow } from "$lib/services/mcpOAuthService";
 	import IconCheckmark from "~icons/carbon/checkmark-filled";
 	import IconWarning from "~icons/carbon/warning-filled";
@@ -42,8 +48,8 @@
 
 		const token = tokens.get(server.id);
 		if (!token) return "missing";
-		if (Date.now() > token.expiresAt - 5 * 60 * 1000) return "expired";
-		if (Date.now() > token.expiresAt - 10 * 60 * 1000) return "expiring";
+		if (isTokenExpired(token)) return "expired";
+		if (isTokenNearExpiry(token)) return "expiring";
 		return "valid";
 	});
 
@@ -67,18 +73,23 @@
 		oauthError = null;
 		try {
 			const metadata = await discoverOAuthMetadata(server.url);
-			if (metadata) {
-				oauthPopup = await startOAuthFlow(
-					server.id,
-					server.url,
-					server.name,
-					metadata,
-					window.location.href
-				);
+			if (!metadata) {
+				oauthError = "This server does not support OAuth authentication.";
+				isReauthenticating = false;
+				return;
+			}
+			oauthPopup = await startOAuthFlow(
+				server.id,
+				server.url,
+				server.name,
+				metadata,
+				window.location.href
+			);
 
-				if (oauthPopup) {
-					startPopupPolling();
-				}
+			if (oauthPopup) {
+				startPopupPolling();
+			} else {
+				isReauthenticating = false;
 			}
 		} catch (err) {
 			console.error("Re-authentication failed:", err);
diff --git a/src/lib/services/mcpOAuthService.ts b/src/lib/services/mcpOAuthService.ts
index 68be2268755..aac24f945ce 100644
--- a/src/lib/services/mcpOAuthService.ts
+++ b/src/lib/services/mcpOAuthService.ts
@@ -74,9 +74,6 @@ export async function discoverOAuthMetadata(
 	}
 }
 
-/**
- * Check if an MCP server requires OAuth authentication
- */
 export async function checkOAuthRequired(serverUrl: string): Promise<OAuthDiscoveryResult> {
 	try {
 		const metadata = await discoverOAuthMetadata(serverUrl);
@@ -132,16 +129,10 @@ export async function registerOAuthClient(
 	return `${window.location.origin}${base}/.well-known/oauth-cimd`;
 }
 
-/**
- * Build the callback URL for OAuth redirects
- */
 export function getCallbackUrl(): string {
 	return `${window.location.origin}${base}${CALLBACK_PATH}`;
 }
 
-/**
- * Open a centered popup window for OAuth
- */
 function openOAuthPopup(url: string, width: number, height: number): Window | null {
 	const left = Math.round(window.screenX + (window.innerWidth - width) / 2);
 	const top = Math.round(window.screenY + (window.innerHeight - height) / 2);
@@ -153,11 +144,7 @@ function openOAuthPopup(url: string, width: number, height: number): Window | nu
 	);
 }
 
-/**
- * Start OAuth flow for an MCP server
- * Opens a popup for better UX (preserves app state), falls back to redirect if popup blocked
- * Returns the popup window reference if opened, null if using redirect fallback
- */
+// Opens popup for OAuth, falls back to redirect if blocked
 export async function startOAuthFlow(
 	serverId: string,
 	serverUrl: string,
@@ -216,10 +203,6 @@ export async function startOAuthFlow(
 	return null;
 }
 
-/**
- * Exchange authorization code for tokens
- * Called from the callback page after OAuth redirect
- */
 export async function exchangeCodeForTokens(
 	code: string,
 	flowState: McpOAuthFlowState
@@ -273,9 +256,6 @@ export async function exchangeCodeForTokens(
 	return token;
 }
 
-/**
- * Refresh an expired OAuth token
- */
 export async function refreshOAuthToken(serverId: string): Promise<McpOAuthToken | null> {
 	const config = getOAuthConfig(serverId);
 	const token = getToken(serverId);
@@ -319,9 +299,6 @@ export async function refreshOAuthToken(serverId: string): Promise<McpOAuthToken
 	}
 }
 
-/**
- * Validate OAuth flow state (called from callback)
- */
 export function validateFlowState(
 	flowState: McpOAuthFlowState | null,
 	state: string
@@ -343,9 +320,7 @@ export function validateFlowState(
 	return { valid: true };
 }
 
-/**
- * Get a valid token for a server, refreshing if necessary
- */
+// Returns token, refreshing if expired
 export async function getValidToken(serverId: string): Promise<McpOAuthToken | null> {
 	const token = getToken(serverId);
 
diff --git a/src/lib/stores/mcpOAuthTokens.ts b/src/lib/stores/mcpOAuthTokens.ts
index d68c7e04b16..3043770c01b 100644
--- a/src/lib/stores/mcpOAuthTokens.ts
+++ b/src/lib/stores/mcpOAuthTokens.ts
@@ -27,9 +27,6 @@ const EXPIRY_BUFFER_MS = 5 * 60 * 1000;
 // Near expiry warning: 10 minutes before expiry
 const NEAR_EXPIRY_MS = 10 * 60 * 1000;
 
-/**
- * Load tokens from localStorage
- */
 function loadTokens(): Map<string, McpOAuthToken> {
 	if (!browser) return new Map();
 
@@ -44,9 +41,6 @@ function loadTokens(): Map<string, McpOAuthToken> {
 	}
 }
 
-/**
- * Save tokens to localStorage
- */
 function saveTokens(tokens: Map<string, McpOAuthToken>) {
 	if (!browser) return;
 
@@ -58,9 +52,6 @@ function saveTokens(tokens: Map<string, McpOAuthToken>) {
 	}
 }
 
-/**
- * Load OAuth configs from localStorage
- */
 function loadConfigs(): Map<string, McpOAuthConfig> {
 	if (!browser) return new Map();
 
@@ -75,9 +66,6 @@ function loadConfigs(): Map<string, McpOAuthConfig> {
 	}
 }
 
-/**
- * Save OAuth configs to localStorage
- */
 function saveConfigs(configs: Map<string, McpOAuthConfig>) {
 	if (!browser) return;
 
@@ -100,9 +88,6 @@ if (browser) {
 	mcpOAuthConfigs.subscribe(saveConfigs);
 }
 
-/**
- * Save OAuth flow state (persisted to survive redirects)
- */
 export function saveFlowState(state: McpOAuthFlowState) {
 	if (!browser) return;
 
@@ -114,9 +99,6 @@ export function saveFlowState(state: McpOAuthFlowState) {
 	}
 }
 
-/**
- * Load OAuth flow state from localStorage
- */
 export function loadFlowState(): McpOAuthFlowState | null {
 	if (!browser) return null;
 
@@ -132,9 +114,6 @@ export function loadFlowState(): McpOAuthFlowState | null {
 	}
 }
 
-/**
- * Clear OAuth flow state
- */
 export function clearFlowState() {
 	if (!browser) return;
 
@@ -146,9 +125,6 @@ export function clearFlowState() {
 	}
 }
 
-/**
- * Set a token for a server
- */
 export function setToken(serverId: string, token: McpOAuthToken) {
 	mcpOAuthTokens.update((tokens) => {
 		tokens.set(serverId, token);
@@ -156,16 +132,10 @@ export function setToken(serverId: string, token: McpOAuthToken) {
 	});
 }
 
-/**
- * Get a token for a server
- */
 export function getToken(serverId: string): McpOAuthToken | undefined {
 	return get(mcpOAuthTokens).get(serverId);
 }
 
-/**
- * Remove a token for a server
- */
 export function removeToken(serverId: string) {
 	mcpOAuthTokens.update((tokens) => {
 		tokens.delete(serverId);
@@ -173,9 +143,6 @@ export function removeToken(serverId: string) {
 	});
 }
 
-/**
- * Set OAuth config for a server
- */
 export function setOAuthConfig(serverId: string, config: McpOAuthConfig) {
 	mcpOAuthConfigs.update((configs) => {
 		configs.set(serverId, config);
@@ -183,16 +150,10 @@ export function setOAuthConfig(serverId: string, config: McpOAuthConfig) {
 	});
 }
 
-/**
- * Get OAuth config for a server
- */
 export function getOAuthConfig(serverId: string): McpOAuthConfig | undefined {
 	return get(mcpOAuthConfigs).get(serverId);
 }
 
-/**
- * Remove OAuth config for a server
- */
 export function removeOAuthConfig(serverId: string) {
 	mcpOAuthConfigs.update((configs) => {
 		configs.delete(serverId);
@@ -200,23 +161,14 @@ export function removeOAuthConfig(serverId: string) {
 	});
 }
 
-/**
- * Check if a token is expired (with buffer)
- */
 export function isTokenExpired(token: McpOAuthToken): boolean {
 	return Date.now() > token.expiresAt - EXPIRY_BUFFER_MS;
 }
 
-/**
- * Check if a token is near expiry (for warning UI)
- */
 export function isTokenNearExpiry(token: McpOAuthToken): boolean {
 	return Date.now() > token.expiresAt - NEAR_EXPIRY_MS;
 }
 
-/**
- * Get token status for a server
- */
 export function getTokenStatus(
 	serverId: string
 ): "none" | "valid" | "expiring" | "expired" | "missing" {
@@ -230,18 +182,12 @@ export function getTokenStatus(
 	return "valid";
 }
 
-/**
- * Clean up tokens and configs for a deleted server
- */
 export function cleanupServerOAuth(serverId: string) {
 	removeToken(serverId);
 	removeOAuthConfig(serverId);
 }
 
-/**
- * Reload tokens and configs from localStorage
- * Used to sync after OAuth popup completes (popup has separate in-memory stores)
- */
+// Sync stores from localStorage after OAuth popup completes
 export function reloadFromStorage() {
 	if (!browser) return;
 
diff --git a/src/lib/stores/mcpServers.ts b/src/lib/stores/mcpServers.ts
index 0dab7bb6c1f..01e9bbffb87 100644
--- a/src/lib/stores/mcpServers.ts
+++ b/src/lib/stores/mcpServers.ts
@@ -8,7 +8,8 @@ import { writable, derived, get } from "svelte/store";
 import { base } from "$app/paths";
 import { env as publicEnv } from "$env/dynamic/public";
 import { browser } from "$app/environment";
-import type { MCPServer, ServerStatus, MCPTool } from "$lib/types/Tool";
+import type { MCPServer, ServerStatus, MCPTool, KeyValuePair } from "$lib/types/Tool";
+import type { McpOAuthToken } from "$lib/types/McpOAuth";
 import { getToken, isTokenExpired, cleanupServerOAuth } from "$lib/stores/mcpOAuthTokens";
 
 // Namespace storage by app identity to avoid collisions across apps
@@ -138,6 +139,29 @@ export const allBaseServersEnabled = derived(
 // Note: Authorization overlay (with user's HF token) for the Hugging Face MCP host
 // is applied server-side when enabled via MCP_FORWARD_HF_USER_TOKEN.
 
+/**
+ * Inject OAuth token into headers as Authorization header
+ */
+function injectOAuthHeader(
+	headers: KeyValuePair[] | undefined,
+	token: McpOAuthToken
+): KeyValuePair[] {
+	const result = headers ? [...headers] : [];
+	const authHeaderIndex = result.findIndex((h) => h.key.toLowerCase() === "authorization");
+	const tokenType = token.tokenType.charAt(0).toUpperCase() + token.tokenType.slice(1);
+	const authHeader = {
+		key: "Authorization",
+		value: `${tokenType} ${token.accessToken}`,
+	};
+
+	if (authHeaderIndex >= 0) {
+		result[authHeaderIndex] = authHeader;
+	} else {
+		result.push(authHeader);
+	}
+	return result;
+}
+
 /**
  * Get enabled servers with OAuth tokens injected into headers
  */
@@ -152,20 +176,7 @@ export function getServersWithAuth(): MCPServer[] {
 				return { ...server, authRequired: true };
 			}
 
-			const headers = server.headers ? [...server.headers] : [];
-			const authHeaderIndex = headers.findIndex((h) => h.key.toLowerCase() === "authorization");
-			const tokenType = token.tokenType.charAt(0).toUpperCase() + token.tokenType.slice(1);
-			const authHeader = {
-				key: "Authorization",
-				value: `${tokenType} ${token.accessToken}`,
-			};
-
-			if (authHeaderIndex >= 0) {
-				headers[authHeaderIndex] = authHeader;
-			} else {
-				headers.push(authHeader);
-			}
-
+			const headers = injectOAuthHeader(server.headers, token);
 			return { ...server, headers, authRequired: false, oauthEnabled: true };
 		}
 
@@ -269,10 +280,12 @@ export function disableAllServers() {
 /**
  * Add a custom MCP server
  */
-export function addCustomServer(server: Omit<MCPServer, "id" | "type" | "status">): string {
+export function addCustomServer(
+	server: Omit<MCPServer, "id" | "type" | "status"> & { id?: string }
+): string {
 	const newServer: MCPServer = {
 		...server,
-		id: crypto.randomUUID(),
+		id: server.id || crypto.randomUUID(),
 		type: "custom",
 		status: "disconnected",
 	};
@@ -354,23 +367,11 @@ export async function healthCheckServer(
 	try {
 		updateServerStatus(server.id, "connecting");
 
-		const headers = server.headers ? [...server.headers] : [];
 		const token = getToken(server.id);
-
-		if (token && !isTokenExpired(token)) {
-			const authHeaderIndex = headers.findIndex((h) => h.key.toLowerCase() === "authorization");
-			const tokenType = token.tokenType.charAt(0).toUpperCase() + token.tokenType.slice(1);
-			const authHeader = {
-				key: "Authorization",
-				value: `${tokenType} ${token.accessToken}`,
-			};
-
-			if (authHeaderIndex >= 0) {
-				headers[authHeaderIndex] = authHeader;
-			} else {
-				headers.push(authHeader);
-			}
-		}
+		const headers =
+			token && !isTokenExpired(token)
+				? injectOAuthHeader(server.headers, token)
+				: (server.headers ?? []);
 
 		const response = await fetch(`${base}/api/mcp/health`, {
 			method: "POST",
diff --git a/src/routes/conversation/[id]/+page.svelte b/src/routes/conversation/[id]/+page.svelte
index 627fd42a672..bd694cf0e79 100644
--- a/src/routes/conversation/[id]/+page.svelte
+++ b/src/routes/conversation/[id]/+page.svelte
@@ -212,6 +212,7 @@
 
 			const messageUpdatesAbortController = new AbortController();
 
+			const mcpServers = getServersWithAuth();
 			const messageUpdatesIterator = await fetchMessageUpdates(
 				page.params.id,
 				{
@@ -220,8 +221,8 @@
 					messageId,
 					isRetry,
 					files: isRetry ? userMessage?.files : base64Files,
-					selectedMcpServerNames: getServersWithAuth().map((s) => s.name),
-					selectedMcpServers: getServersWithAuth().map((s) => ({
+					selectedMcpServerNames: mcpServers.map((s) => s.name),
+					selectedMcpServers: mcpServers.map((s) => ({
 						name: s.name,
 						url: s.url,
 						headers: s.headers,

From 622ae1f83971ce105bfc209e17c49a9618dbcf89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Mu=C5=A1tar?= <victor.mustar@gmail.com>
Date: Fri, 5 Dec 2025 15:43:34 +0100
Subject: [PATCH 3/3] Add server-side OAuth discovery proxy and improve auth UI

Introduces a server-side endpoint for OAuth metadata discovery to avoid CORS issues and support RFC 9728 probing. Updates the client service to use this proxy, adds ProtectedResourceMetadata type, and improves ServerCard UI to better indicate authentication requirements.
---
 src/lib/components/mcp/ServerCard.svelte     |  14 ++-
 src/lib/services/mcpOAuthService.ts          |  43 ++-----
 src/lib/types/McpOAuth.ts                    |  12 ++
 src/routes/api/mcp/oauth/discover/+server.ts | 124 +++++++++++++++++++
 4 files changed, 157 insertions(+), 36 deletions(-)
 create mode 100644 src/routes/api/mcp/oauth/discover/+server.ts

diff --git a/src/lib/components/mcp/ServerCard.svelte b/src/lib/components/mcp/ServerCard.svelte
index 2a1eb5d4098..64c06a98912 100644
--- a/src/lib/components/mcp/ServerCard.svelte
+++ b/src/lib/components/mcp/ServerCard.svelte
@@ -44,7 +44,11 @@
 		const hasToken = tokens.has(server.id);
 		const hasConfig = configs.has(server.id);
 
-		if (!server.oauthEnabled && !hasToken && !hasConfig) return "none";
+		if (!server.oauthEnabled && !hasToken && !hasConfig) {
+			// Health check returned 401 but OAuth wasn't set up - prompt for authentication
+			if (server.authRequired) return "missing";
+			return "none";
+		}
 
 		const token = tokens.get(server.id);
 		if (!token) return "missing";
@@ -269,14 +273,18 @@
 				<div class="flex items-center gap-2 rounded bg-amber-50 px-2 py-1.5 dark:bg-amber-900/20">
 					<IconLocked class="size-4 flex-shrink-0 text-amber-600 dark:text-amber-400" />
 					<span class="flex-1 text-xs text-amber-800 dark:text-amber-200">
-						Authentication expired
+						{tokenStatus === "expired" ? "Authentication expired" : "Authentication required"}
 					</span>
 					<button
 						onclick={handleReauthenticate}
 						disabled={isReauthenticating}
 						class="rounded bg-amber-600 px-2 py-0.5 text-xs font-medium text-white hover:bg-amber-700 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-600"
 					>
-						{isReauthenticating ? "..." : "Re-authenticate"}
+						{isReauthenticating
+							? "..."
+							: tokenStatus === "expired"
+								? "Re-authenticate"
+								: "Authenticate"}
 					</button>
 				</div>
 			</div>
diff --git a/src/lib/services/mcpOAuthService.ts b/src/lib/services/mcpOAuthService.ts
index aac24f945ce..cf081ae2bf2 100644
--- a/src/lib/services/mcpOAuthService.ts
+++ b/src/lib/services/mcpOAuthService.ts
@@ -28,48 +28,25 @@ const FLOW_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes
 
 /**
  * Discover OAuth server metadata from MCP server URL
- * Checks /.well-known/oauth-authorization-server per RFC 8414
+ * Uses server-side proxy to avoid CORS issues with RFC 9728 discovery
  */
 export async function discoverOAuthMetadata(
 	serverUrl: string
 ): Promise<OAuthServerMetadata | null> {
 	try {
-		const url = new URL(serverUrl);
-		// Per MCP spec: discovery at authorization base URL (server URL with path removed)
-		const wellKnownUrl = `${url.origin}/.well-known/oauth-authorization-server`;
-
-		const response = await fetch(wellKnownUrl, {
-			headers: { Accept: "application/json" },
-			// Short timeout for discovery
-			signal: AbortSignal.timeout(10000),
+		const response = await fetch(`${base}/api/mcp/oauth/discover`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ url: serverUrl }),
+			signal: AbortSignal.timeout(20000),
 		});
 
-		if (!response.ok) {
-			// Server doesn't support OAuth discovery - not an error
-			return null;
-		}
-
-		const metadata = (await response.json()) as OAuthServerMetadata;
-
-		// Validate required fields per OAuth 2.0 Authorization Server Metadata
-		if (!metadata.authorization_endpoint || !metadata.token_endpoint) {
-			console.warn("OAuth metadata missing required endpoints");
-			return null;
-		}
-
-		// Validate PKCE support (required by MCP OAuth 2.1)
-		if (
-			metadata.code_challenge_methods_supported &&
-			!metadata.code_challenge_methods_supported.includes("S256")
-		) {
-			console.warn("OAuth server does not support required S256 PKCE method");
-			return null;
-		}
+		if (!response.ok) return null;
 
-		return metadata;
+		const data = await response.json();
+		return data.metadata ?? null;
 	} catch (error) {
-		// Discovery failure is not an error - server may not require OAuth
-		console.debug("OAuth discovery failed (server may not require OAuth):", error);
+		console.debug("OAuth discovery failed:", error);
 		return null;
 	}
 }
diff --git a/src/lib/types/McpOAuth.ts b/src/lib/types/McpOAuth.ts
index 82e946cff84..c48c84ee07e 100644
--- a/src/lib/types/McpOAuth.ts
+++ b/src/lib/types/McpOAuth.ts
@@ -92,3 +92,15 @@ export interface ClientRegistrationResponse {
 	client_id_issued_at?: number;
 	client_secret_expires_at?: number;
 }
+
+/**
+ * Protected Resource Metadata (RFC 9728)
+ */
+export interface ProtectedResourceMetadata {
+	resource: string;
+	authorization_servers?: string[];
+	scopes_supported?: string[];
+	bearer_methods_supported?: string[];
+	resource_name?: string;
+	resource_documentation?: string;
+}
diff --git a/src/routes/api/mcp/oauth/discover/+server.ts b/src/routes/api/mcp/oauth/discover/+server.ts
new file mode 100644
index 00000000000..ef827a013b2
--- /dev/null
+++ b/src/routes/api/mcp/oauth/discover/+server.ts
@@ -0,0 +1,124 @@
+import type { RequestHandler } from "./$types";
+import { isValidUrl } from "$lib/server/urlSafety";
+
+interface DiscoveryRequest {
+	url: string;
+}
+
+interface OAuthServerMetadata {
+	issuer: string;
+	authorization_endpoint: string;
+	token_endpoint: string;
+	registration_endpoint?: string;
+	scopes_supported?: string[];
+	response_types_supported?: string[];
+	code_challenge_methods_supported?: string[];
+	token_endpoint_auth_methods_supported?: string[];
+	grant_types_supported?: string[];
+}
+
+interface ProtectedResourceMetadata {
+	resource: string;
+	authorization_servers?: string[];
+	scopes_supported?: string[];
+}
+
+function parseResourceMetadataUrl(wwwAuthenticate: string): string | null {
+	const match = wwwAuthenticate.match(/resource_metadata="([^"]+)"/);
+	return match?.[1] ?? null;
+}
+
+async function fetchJson<T>(url: string, signal: AbortSignal): Promise<T | null> {
+	try {
+		const response = await fetch(url, {
+			headers: { Accept: "application/json" },
+			signal,
+		});
+		if (!response.ok) return null;
+		return (await response.json()) as T;
+	} catch {
+		return null;
+	}
+}
+
+async function fetchAuthServerMetadata(
+	issuerUrl: string,
+	signal: AbortSignal
+): Promise<OAuthServerMetadata | null> {
+	const url = new URL(issuerUrl);
+	const wellKnownUrl = `${url.origin}/.well-known/oauth-authorization-server`;
+	const metadata = await fetchJson<OAuthServerMetadata>(wellKnownUrl, signal);
+
+	if (!metadata?.authorization_endpoint || !metadata?.token_endpoint) return null;
+	if (
+		metadata.code_challenge_methods_supported &&
+		!metadata.code_challenge_methods_supported.includes("S256")
+	) {
+		return null;
+	}
+	return metadata;
+}
+
+export const POST: RequestHandler = async ({ request }) => {
+	const controller = new AbortController();
+	const timeoutId = setTimeout(() => controller.abort(), 15000);
+
+	try {
+		const body: DiscoveryRequest = await request.json();
+		const { url } = body;
+
+		if (!url || !isValidUrl(url)) {
+			return new Response(JSON.stringify({ error: "Invalid URL" }), {
+				status: 400,
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		// RFC 9728: Probe the server to get resource_metadata from WWW-Authenticate
+		const probeResponse = await fetch(url, {
+			method: "GET",
+			signal: controller.signal,
+		});
+
+		if (probeResponse.status === 401) {
+			const wwwAuth = probeResponse.headers.get("www-authenticate") ?? "";
+			const prmUrl = parseResourceMetadataUrl(wwwAuth);
+
+			if (prmUrl) {
+				const prm = await fetchJson<ProtectedResourceMetadata>(prmUrl, controller.signal);
+				if (prm?.authorization_servers?.[0]) {
+					const metadata = await fetchAuthServerMetadata(
+						prm.authorization_servers[0],
+						controller.signal
+					);
+					if (metadata) {
+						clearTimeout(timeoutId);
+						return new Response(JSON.stringify({ metadata }), {
+							headers: { "Content-Type": "application/json" },
+						});
+					}
+				}
+			}
+		}
+
+		// Fallback: same-origin well-known
+		const metadata = await fetchAuthServerMetadata(url, controller.signal);
+		clearTimeout(timeoutId);
+
+		if (metadata) {
+			return new Response(JSON.stringify({ metadata }), {
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		return new Response(JSON.stringify({ metadata: null }), {
+			headers: { "Content-Type": "application/json" },
+		});
+	} catch (error) {
+		clearTimeout(timeoutId);
+		return new Response(
+			JSON.stringify({ error: error instanceof Error ? error.message : "Discovery failed" }),
+			{ status: 500, headers: { "Content-Type": "application/json" } }
+		);
+	}
+};