feat: support manual entry of OAuth client information

client/src/lib/auth.ts

@@ -9,8 +9,67 @@ import {
 } from "@modelcontextprotocol/sdk/shared/auth.js";
 import { SESSION_KEYS, getServerSpecificKey } from "./constants";
 
+export const getClientInformationFromSessionStorage = async ({
+  serverUrl,
+  isPreregistered,
+}: {
+  serverUrl: string;
+  isPreregistered?: boolean;
+}) => {
+  const key = getServerSpecificKey(
+    isPreregistered
+      ? SESSION_KEYS.PREREGISTERED_CLIENT_INFORMATION
+      : SESSION_KEYS.CLIENT_INFORMATION,
+    serverUrl,
+  );
+
+  const value = sessionStorage.getItem(key);
+  if (!value) {
+    return undefined;
+  }
+
+  return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
+};
+
+export const saveClientInformationToSessionStorage = ({
+  serverUrl,
+  clientInformation,
+  isPreregistered,
+}: {
+  serverUrl: string;
+  clientInformation: OAuthClientInformation;
+  isPreregistered?: boolean;
+}) => {
+  const key = getServerSpecificKey(
+    isPreregistered
+      ? SESSION_KEYS.PREREGISTERED_CLIENT_INFORMATION
+      : SESSION_KEYS.CLIENT_INFORMATION,
+    serverUrl,
+  );
+  sessionStorage.setItem(key, JSON.stringify(clientInformation));
+};
+
+export const clearClientInformationFromSessionStorage = ({
+  serverUrl,
+  isPreregistered,
+}: {
+  serverUrl: string;
+  isPreregistered?: boolean;
+}) => {
+  const key = getServerSpecificKey(
+    isPreregistered
+      ? SESSION_KEYS.PREREGISTERED_CLIENT_INFORMATION
+      : SESSION_KEYS.CLIENT_INFORMATION,
+    serverUrl,
+  );
+  sessionStorage.removeItem(key);
+};
+
 export class InspectorOAuthClientProvider implements OAuthClientProvider {
-  constructor(public serverUrl: string) {
+  constructor(
+    protected serverUrl: string,
+    protected resource?: string,
+  ) {
     // Save the server URL to session storage
     sessionStorage.setItem(SESSION_KEYS.SERVER_URL, serverUrl);
   }
@@ -31,24 +90,29 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
   }
 
   async clientInformation() {
-    const key = getServerSpecificKey(
-      SESSION_KEYS.CLIENT_INFORMATION,
-      this.serverUrl,
-    );
-    const value = sessionStorage.getItem(key);
-    if (!value) {
-      return undefined;
-    }
+    // Try to get the preregistered client information from session storage first
+    const preregisteredClientInformation = await getClientInformationFromSessionStorage({
+      serverUrl: this.serverUrl,
+      isPreregistered: true,
+    });
 
-    return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
+    // If no preregistered client information is found, get the dynamically registered client information
+    return (
+      preregisteredClientInformation ??
+      (await getClientInformationFromSessionStorage({
+        serverUrl: this.serverUrl,
+        isPreregistered: false,
+      }))
+    );
   }
 
   saveClientInformation(clientInformation: OAuthClientInformation) {
-    const key = getServerSpecificKey(
-      SESSION_KEYS.CLIENT_INFORMATION,
-      this.serverUrl,
-    );
-    sessionStorage.setItem(key, JSON.stringify(clientInformation));
+    // Save the dynamically registered client information to session storage
+    saveClientInformationToSessionStorage({
+      serverUrl: this.serverUrl,
+      clientInformation,
+      isPreregistered: false,
+    });
   }
 
   async tokens() {
@@ -67,6 +131,18 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
   }
 
   redirectToAuthorization(authorizationUrl: URL) {
+    /**
+     * Note: This resource parameter is for testing purposes in Inspector.
+     * Once MCP Client SDK supports resource indicators, this parameter
+     * will be passed to the SDK's auth method similar to how scope is passed.
+     *
+     * See: https://github.com/modelcontextprotocol/typescript-sdk/pull/498
+     *
+     * TODO: @xiaoyijun Remove this once MCP Client SDK supports resource indicators.
+     */
+    if (this.resource) {
+      authorizationUrl.searchParams.set("resource", this.resource);
+    }
     window.location.href = authorizationUrl.href;
   }
 
@@ -92,9 +168,10 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
   }
 
   clear() {
-    sessionStorage.removeItem(
-      getServerSpecificKey(SESSION_KEYS.CLIENT_INFORMATION, this.serverUrl),
-    );
+    clearClientInformationFromSessionStorage({
+      serverUrl: this.serverUrl,
+      isPreregistered: false,
+    });
     sessionStorage.removeItem(
       getServerSpecificKey(SESSION_KEYS.TOKENS, this.serverUrl),
     );

client/src/lib/constants.ts

@@ -6,6 +6,7 @@ export const SESSION_KEYS = {
   SERVER_URL: "mcp_server_url",
   TOKENS: "mcp_tokens",
   CLIENT_INFORMATION: "mcp_client_information",
+  PREREGISTERED_CLIENT_INFORMATION: "mcp_preregistered_client_information",
   SERVER_METADATA: "mcp_server_metadata",
   AUTH_DEBUGGER_STATE: "mcp_auth_debugger_state",
 } as const;

client/src/lib/hooks/useConnection.ts

@@ -30,13 +30,13 @@ import {
   Progress,
 } from "@modelcontextprotocol/sdk/types.js";
 import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useToast } from "@/lib/hooks/useToast";
 import { z } from "zod";
 import { ConnectionStatus } from "../constants";
 import { Notification, StdErrNotificationSchema } from "../notificationTypes";
 import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
-import { InspectorOAuthClientProvider } from "../auth";
+import { clearClientInformationFromSessionStorage, InspectorOAuthClientProvider, saveClientInformationToSessionStorage } from "../auth";
 import packageJson from "../../../package.json";
 import {
   getMCPProxyAddress,
@@ -56,6 +56,9 @@ interface UseConnectionOptions {
   env: Record<string, string>;
   bearerToken?: string;
   headerName?: string;
+  oauthClientId?: string;
+  oauthScope?: string;
+  oauthResource?: string;
   config: InspectorConfig;
   onNotification?: (notification: Notification) => void;
   onStdErrNotification?: (notification: Notification) => void;
@@ -73,6 +76,9 @@ export function useConnection({
   env,
   bearerToken,
   headerName,
+  oauthClientId,
+  oauthScope,
+  oauthResource,
   config,
   onNotification,
   onStdErrNotification,
@@ -93,6 +99,22 @@ export function useConnection({
   >([]);
   const [completionsSupported, setCompletionsSupported] = useState(true);
 
+  useEffect(() => {
+    if (!oauthClientId) {
+      clearClientInformationFromSessionStorage({
+        serverUrl: sseUrl,
+        isPreregistered: true,
+      });
+      return;
+    }
+
+    saveClientInformationToSessionStorage({
+      serverUrl: sseUrl,
+      clientInformation: { client_id: oauthClientId },
+      isPreregistered: true,
+    });
+  }, [oauthClientId, sseUrl]);
+
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,
@@ -277,9 +299,15 @@ export function useConnection({
 
   const handleAuthError = async (error: unknown) => {
     if (is401Error(error)) {
-      const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
+      const serverAuthProvider = new InspectorOAuthClientProvider(
+        sseUrl,
+        oauthResource,
+      );
 
-      const result = await auth(serverAuthProvider, { serverUrl: sseUrl });
+      const result = await auth(serverAuthProvider, {
+        serverUrl: sseUrl,
+        scope: oauthScope,
+      });
       return result === "AUTHORIZED";
     }
 
@@ -315,7 +343,10 @@ export function useConnection({
       const headers: HeadersInit = {};
 
       // Create an auth provider with the current server URL
-      const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
+      const serverAuthProvider = new InspectorOAuthClientProvider(
+        sseUrl,
+        oauthResource,
+      );
 
       // Use manually provided bearer token if available, otherwise use OAuth tokens
       const token =
@@ -535,7 +566,10 @@ export function useConnection({
         clientTransport as StreamableHTTPClientTransport
       ).terminateSession();
     await mcpClient?.close();
-    const authProvider = new InspectorOAuthClientProvider(sseUrl);
+    const authProvider = new InspectorOAuthClientProvider(
+      sseUrl,
+      oauthResource,
+    );
     authProvider.clear();
     setMcpClient(null);
     setClientTransport(null);