feat: implement BrowserOAuthProvider for handling OAuth flows and enhance MCPClientService with OAuth support

src/App.tsx

@@ -145,6 +145,21 @@ function renderMarkdown(text: string): string {
   return DOMPurify.sanitize(marked.parse(text) as string);
 }
 
+const safeStringifyToolResults = (results: any[]): string => {
+  try {
+    const stringified = JSON.stringify(results);
+    const MAX_SIZE = 5 * 1024 * 1024;
+    if (stringified.length > MAX_SIZE) {
+      console.warn(`Tool result is ${(stringified.length / 1024 / 1024).toFixed(2)}MB, truncating...`);
+      return stringified.substring(0, MAX_SIZE) + '\n\n...[TRUNCATED]';
+    }
+    return stringified;
+  } catch (error) {
+    console.error("Failed to stringify tool results:", error);
+    return JSON.stringify([{ error: "Failed to serialize tool results" }]);
+  }
+};
+
 const App: React.FC = () => {
   const [systemPrompt, setSystemPrompt] = useState<string>(
     DEFAULT_SYSTEM_PROMPT
@@ -557,7 +572,19 @@ const App: React.FC = () => {
 
         let parsedResult;
         try {
-          parsedResult = JSON.parse(result);
+          if (result.length > 100000) {
+            parsedResult = await new Promise((resolve) => {
+              setTimeout(() => {
+                try {
+                  resolve(JSON.parse(result));
+                } catch {
+                  resolve(result);
+                }
+              }, 0);
+            });
+          } else {
+            parsedResult = JSON.parse(result);
+          }
         } catch {
           parsedResult = result;
         }
@@ -659,13 +686,24 @@ const App: React.FC = () => {
         const toolCallContent = extractToolCallContent(response);
 
         if (toolCallContent) {
-          const toolResults = await executeToolCalls(toolCallContent);
+          currentMessages.push({
+            role: "assistant",
+            content: "_Processing tool results..._"
+          });
+          setMessages([...currentMessages]);
 
-          const toolMessage: ToolMessage = {
-            role: "tool",
-            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
-            renderInfo: toolResults,
-          };
+          const toolResults = await executeToolCalls(toolCallContent);
+          currentMessages.pop();
+
+          const toolMessage: ToolMessage = await new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                role: "tool" as const,
+                content: safeStringifyToolResults(toolResults.map((r) => r.result ?? null)),
+                renderInfo: toolResults,
+              });
+            }, 0);
+          });
           currentMessages.push(toolMessage);
           setMessages([...currentMessages]);
           continue;
@@ -852,13 +890,24 @@ const App: React.FC = () => {
         const toolCallContent = extractToolCallContent(response);
 
         if (toolCallContent) {
-          const toolResults = await executeToolCalls(toolCallContent);
+          currentMessages.push({
+            role: "assistant",
+            content: "_Processing tool results..._"
+          });
+          setMessages([...currentMessages]);
 
-          const toolMessage: ToolMessage = {
-            role: "tool",
-            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
-            renderInfo: toolResults,
-          };
+          const toolResults = await executeToolCalls(toolCallContent);
+          currentMessages.pop();
+
+          const toolMessage: ToolMessage = await new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                role: "tool" as const,
+                content: safeStringifyToolResults(toolResults.map((r) => r.result ?? null)),
+                renderInfo: toolResults,
+              });
+            }, 0);
+          });
           currentMessages.push(toolMessage);
           setMessages([...currentMessages]);
           continue;

src/config/constants.ts

@@ -19,7 +19,9 @@ export const STORAGE_KEYS = {
   OAUTH_REDIRECT_URI: "oauth_redirect_uri",
   OAUTH_RESOURCE: "oauth_resource",
   OAUTH_ACCESS_TOKEN: "oauth_access_token",
+  OAUTH_REFRESH_TOKEN: "oauth_refresh_token",
   OAUTH_CODE_VERIFIER: "oauth_code_verifier",
+  OAUTH_STATE: "oauth_state",
   OAUTH_MCP_SERVER_URL: "oauth_mcp_server_url",
   OAUTH_AUTHORIZATION_SERVER_METADATA: "oauth_authorization_server_metadata",
   MCP_SERVER_NAME: "mcp_server_name",

src/services/BrowserOAuthProvider.ts

@@ -0,0 +1,212 @@
+/**
+ * Browser-based OAuth Client Provider for MCP
+ *
+ * Implements the OAuthClientProvider interface from @modelcontextprotocol/sdk
+ * to handle user-facing OAuth flows in a browser environment.
+ */
+
+import type {
+  OAuthClientMetadata,
+  OAuthClientInformationMixed,
+  OAuthTokens,
+} from "@modelcontextprotocol/sdk/shared/auth.js";
+import type { OAuthClientProvider } from "@modelcontextprotocol/sdk/client/auth.js";
+import { secureStorage } from "../utils/storage";
+import { STORAGE_KEYS } from "../config/constants";
+
+export interface BrowserOAuthProviderOptions {
+  /**
+   * The redirect URI for OAuth callbacks
+   */
+  redirectUri: string;
+
+  /**
+   * Optional client name for metadata
+   */
+  clientName?: string;
+
+  /**
+   * Optional scopes to request
+   */
+  scopes?: string[];
+}
+
+/**
+ * OAuth provider for browser-based authorization code flow with PKCE.
+ *
+ * This provider handles:
+ * - Dynamic client registration
+ * - PKCE code verifier management
+ * - Token storage in localStorage/secure storage
+ * - Browser redirects for authorization
+ *
+ * @example
+ * const provider = new BrowserOAuthProvider({
+ *   redirectUri: window.location.origin + "/#/oauth/callback",
+ *   clientName: "MCP WebGPU Client",
+ *   scopes: ["read", "write"]
+ * });
+ *
+ * const transport = new StreamableHTTPClientTransport(serverUrl, {
+ *   authProvider: provider
+ * });
+ */
+export class BrowserOAuthProvider implements OAuthClientProvider {
+  private _redirectUri: string;
+  private _clientName: string;
+  private _scopes: string[];
+
+  constructor(options: BrowserOAuthProviderOptions) {
+    this._redirectUri = options.redirectUri;
+    this._clientName = options.clientName || "MCP WebGPU Client";
+    this._scopes = options.scopes || [];
+  }
+
+  get redirectUrl(): string {
+    return this._redirectUri;
+  }
+
+  get clientMetadata(): OAuthClientMetadata {
+    return {
+      client_name: this._clientName,
+      redirect_uris: [this._redirectUri],
+      grant_types: ["authorization_code"],
+      response_types: ["code"],
+      token_endpoint_auth_method: "none", // Public client (browser-based)
+    };
+  }
+
+  /**
+   * Load saved client information from localStorage
+   */
+  async clientInformation(): Promise<OAuthClientInformationMixed | undefined> {
+    const clientId = localStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_ID);
+    if (!clientId) {
+      return undefined;
+    }
+
+    const clientSecret = await secureStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET);
+
+    return {
+      client_id: clientId,
+      ...(clientSecret ? { client_secret: clientSecret } : {}),
+    };
+  }
+
+  /**
+   * Save client information after dynamic registration
+   */
+  async saveClientInformation(info: OAuthClientInformationMixed): Promise<void> {
+    localStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_ID, info.client_id);
+
+    if ("client_secret" in info && info.client_secret) {
+      await secureStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET, info.client_secret);
+    }
+  }
+
+  /**
+   * Load saved OAuth tokens
+   */
+  async tokens(): Promise<OAuthTokens | undefined> {
+    const accessToken = await secureStorage.getItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN);
+    if (!accessToken) {
+      return undefined;
+    }
+
+    const refreshToken = await secureStorage.getItem(STORAGE_KEYS.OAUTH_REFRESH_TOKEN);
+
+    return {
+      access_token: accessToken,
+      token_type: "Bearer",
+      ...(refreshToken ? { refresh_token: refreshToken } : {}),
+    };
+  }
+
+  /**
+   * Save OAuth tokens after successful authorization
+   */
+  async saveTokens(tokens: OAuthTokens): Promise<void> {
+    await secureStorage.setItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN, tokens.access_token);
+
+    if (tokens.refresh_token) {
+      await secureStorage.setItem(STORAGE_KEYS.OAUTH_REFRESH_TOKEN, tokens.refresh_token);
+    }
+  }
+
+  /**
+   * Redirect browser to authorization URL
+   */
+  redirectToAuthorization(authorizationUrl: URL): void {
+    window.location.href = authorizationUrl.toString();
+  }
+
+  /**
+   * Save PKCE code verifier before redirect
+   */
+  saveCodeVerifier(codeVerifier: string): void {
+    localStorage.setItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER, codeVerifier);
+  }
+
+  /**
+   * Load PKCE code verifier for token exchange
+   */
+  codeVerifier(): string {
+    const verifier = localStorage.getItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER);
+    if (!verifier) {
+      throw new Error("No code verifier found in storage");
+    }
+    return verifier;
+  }
+
+  /**
+   * Generate OAuth state parameter for CSRF protection
+   */
+  state(): string {
+    const state = crypto.randomUUID();
+    localStorage.setItem(STORAGE_KEYS.OAUTH_STATE, state);
+    return state;
+  }
+
+  /**
+   * Invalidate stored credentials
+   */
+  async invalidateCredentials(scope: 'all' | 'client' | 'tokens' | 'verifier'): Promise<void> {
+    switch (scope) {
+      case 'all':
+        localStorage.removeItem(STORAGE_KEYS.OAUTH_CLIENT_ID);
+        await secureStorage.removeItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET);
+        await secureStorage.removeItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN);
+        await secureStorage.removeItem(STORAGE_KEYS.OAUTH_REFRESH_TOKEN);
+        localStorage.removeItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER);
+        localStorage.removeItem(STORAGE_KEYS.OAUTH_STATE);
+        break;
+      case 'client':
+        localStorage.removeItem(STORAGE_KEYS.OAUTH_CLIENT_ID);
+        await secureStorage.removeItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET);
+        break;
+      case 'tokens':
+        await secureStorage.removeItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN);
+        await secureStorage.removeItem(STORAGE_KEYS.OAUTH_REFRESH_TOKEN);
+        break;
+      case 'verifier':
+        localStorage.removeItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER);
+        break;
+    }
+  }
+
+  /**
+   * Prepare token request parameters for authorization code exchange
+   */
+  async prepareTokenRequest(): Promise<URLSearchParams> {
+    const params = new URLSearchParams({
+      grant_type: "authorization_code",
+      redirect_uri: this._redirectUri,
+    });
+
+    if (this._scopes.length > 0) {
+      params.set("scope", this._scopes.join(" "));
+    }
+
+    return params;
+  }
+}

src/services/mcpClient.ts

@@ -9,7 +9,8 @@ import type {
   MCPClientState,
   MCPToolResult,
 } from "../types/mcp.js";
-import { MCP_CLIENT_CONFIG, STORAGE_KEYS } from "../config/constants";
+import { MCP_CLIENT_CONFIG, STORAGE_KEYS, DEFAULTS } from "../config/constants";
+import { BrowserOAuthProvider } from "./BrowserOAuthProvider";
 
 export class MCPClientService {
   private clients: Map<string, Client> = new Map();
@@ -165,61 +166,72 @@ export class MCPClientService {
       let transport;
       const url = new URL(connection.config.url);
 
-      // Prepare headers for authentication
-      const headers: Record<string, string> = {};
-      if (connection.config.auth) {
-        switch (connection.config.auth.type) {
-          case "bearer":
-            if (connection.config.auth.token) {
-              headers[
-                "Authorization"
-              ] = `Bearer ${connection.config.auth.token}`;
-            }
-            break;
-          case "basic":
-            if (
-              connection.config.auth.username &&
-              connection.config.auth.password
-            ) {
-              const credentials = btoa(
-                `${connection.config.auth.username}:${connection.config.auth.password}`
-              );
-              headers["Authorization"] = `Basic ${credentials}`;
-            }
-            break;
-          case "oauth":
-            if (connection.config.auth.token) {
-              headers[
-                "Authorization"
-              ] = `Bearer ${connection.config.auth.token}`;
-            }
-            break;
-        }
-      }
+      if (connection.config.auth?.type === "oauth") {
+        const oauthProvider = new BrowserOAuthProvider({
+          redirectUri: window.location.origin + "/#" + DEFAULTS.OAUTH_REDIRECT_PATH,
+          clientName: MCP_CLIENT_CONFIG.NAME,
+        });
 
-      switch (connection.config.transport) {
-        case "streamable-http":
+        if (connection.config.transport === "streamable-http") {
           transport = new StreamableHTTPClientTransport(url, {
-            requestInit:
-              Object.keys(headers).length > 0 ? { headers } : undefined,
+            authProvider: oauthProvider,
           });
-          break;
+        } else {
+          throw new Error("OAuth authentication is only supported with streamable-http transport");
+        }
+      } else {
+        const headers: Record<string, string> = {};
+        if (connection.config.auth) {
+          switch (connection.config.auth.type) {
+            case "bearer":
+              if (connection.config.auth.token) {
+                headers["Authorization"] = `Bearer ${connection.config.auth.token}`;
+              }
+              break;
+            case "basic":
+              if (
+                connection.config.auth.username &&
+                connection.config.auth.password
+              ) {
+                const credentials = btoa(
+                  `${connection.config.auth.username}:${connection.config.auth.password}`
+                );
+                headers["Authorization"] = `Basic ${credentials}`;
+              }
+              break;
+          }
+        }
 
-        case "sse":
-          transport = new SSEClientTransport(url, {
-            requestInit:
-              Object.keys(headers).length > 0 ? { headers } : undefined,
-          });
-          break;
+        switch (connection.config.transport) {
+          case "streamable-http":
+            transport = new StreamableHTTPClientTransport(url, {
+              requestInit:
+                Object.keys(headers).length > 0 ? { headers } : undefined,
+            });
+            break;
 
-        default:
-          throw new Error(
-            `Unsupported transport: ${connection.config.transport}`
-          );
+          case "sse":
+            transport = new SSEClientTransport(url, {
+              requestInit:
+                Object.keys(headers).length > 0 ? { headers } : undefined,
+            });
+            break;
+
+          default:
+            throw new Error(
+              `Unsupported transport: ${connection.config.transport}`
+            );
+        }
       }
 
-      // Set up error handling
       client.onerror = (error) => {
+        if (error.message?.includes("Failed to send cancellation") &&
+            error.message?.includes("AbortError")) {
+          console.debug(`Ignoring benign cancellation error for ${serverId}:`, error.message);
+          return;
+        }
+
+        console.error(`MCP Client error for ${serverId}:`, error);
         connection.lastError = error.message;
         connection.isConnected = false;
         this.notifyStateChange();