feat: support manual entry of OAuth client information

xiaoyijun · xiaoyijun · commit b8120d9f8588 · 2025-07-08T09:41:55.000+08:00
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -116,6 +116,18 @@ const App = () => {
     return localStorage.getItem("lastHeaderName") || "";
   });
 
+  const [oauthClientId, setOauthClientId] = useState<string>(() => {
+    return localStorage.getItem("lastOauthClientId") || "";
+  });
+
+  const [oauthScope, setOauthScope] = useState<string>(() => {
+    return localStorage.getItem("lastOauthScope") || "";
+  });
+
+  const [oauthResource, setOauthResource] = useState<string>(() => {
+    return localStorage.getItem("lastOauthResource") || "";
+  });
+
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
     Array<
       PendingRequest & {
@@ -184,6 +196,9 @@ const App = () => {
     env,
     bearerToken,
     headerName,
+    oauthClientId,
+    oauthScope,
+    oauthResource,
     config,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
@@ -227,6 +242,18 @@ const App = () => {
     localStorage.setItem("lastHeaderName", headerName);
   }, [headerName]);
 
+  useEffect(() => {
+    localStorage.setItem("lastOauthClientId", oauthClientId);
+  }, [oauthClientId]);
+
+  useEffect(() => {
+    localStorage.setItem("lastOauthScope", oauthScope);
+  }, [oauthScope]);
+
+  useEffect(() => {
+    localStorage.setItem("lastOauthResource", oauthResource);
+  }, [oauthResource]);
+
   useEffect(() => {
     saveInspectorConfig(CONFIG_LOCAL_STORAGE_KEY, config);
   }, [config]);
@@ -650,6 +677,12 @@ const App = () => {
           setBearerToken={setBearerToken}
           headerName={headerName}
           setHeaderName={setHeaderName}
+          oauthClientId={oauthClientId}
+          setOauthClientId={setOauthClientId}
+          oauthScope={oauthScope}
+          setOauthScope={setOauthScope}
+          oauthResource={oauthResource}
+          setOauthResource={setOauthResource}
           onConnect={connectMcpServer}
           onDisconnect={disconnectMcpServer}
           stdErrNotifications={stdErrNotifications}
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
@@ -56,6 +56,12 @@ interface SidebarProps {
   setBearerToken: (token: string) => void;
   headerName?: string;
   setHeaderName?: (name: string) => void;
+  oauthClientId: string;
+  setOauthClientId: (id: string) => void;
+  oauthScope: string;
+  setOauthScope: (scope: string) => void;
+  oauthResource: string;
+  setOauthResource: (resource: string) => void;
   onConnect: () => void;
   onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
@@ -83,6 +89,12 @@ const Sidebar = ({
   setBearerToken,
   headerName,
   setHeaderName,
+  oauthClientId,
+  setOauthClientId,
+  oauthScope,
+  setOauthScope,
+  oauthResource,
+  setOauthResource,
   onConnect,
   onDisconnect,
   stdErrNotifications,
@@ -98,6 +110,7 @@ const Sidebar = ({
   const [showBearerToken, setShowBearerToken] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
   const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
+  const [showOauthConfig, setShowOauthConfig] = useState(false);
   const [copiedServerEntry, setCopiedServerEntry] = useState(false);
   const [copiedServerFile, setCopiedServerFile] = useState(false);
   const { toast } = useToast();
@@ -353,6 +366,60 @@ const Sidebar = ({
                   </div>
                 )}
               </div>
+              {/* OAuth Configuration */}
+              <div className="space-y-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowOauthConfig(!showOauthConfig)}
+                  className="flex items-center w-full"
+                  data-testid="oauth-config-button"
+                  aria-expanded={showOauthConfig}
+                >
+                  {showOauthConfig ? (
+                    <ChevronDown className="w-4 h-4 mr-2" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 mr-2" />
+                  )}
+                  OAuth Configuration
+                </Button>
+                {showOauthConfig && (
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Client ID</label>
+                    <Input
+                      placeholder="Client ID"
+                      onChange={(e) => setOauthClientId(e.target.value)}
+                      value={oauthClientId}
+                      data-testid="oauth-client-id-input"
+                      className="font-mono"
+                    />
+                    <label className="text-sm font-medium">
+                      Redirect URL (auto-populated)
+                    </label>
+                    <Input
+                      readOnly
+                      placeholder="Redirect URL"
+                      value={window.location.origin + "/oauth/callback"}
+                      className="font-mono"
+                    />
+                    <label className="text-sm font-medium">Scope</label>
+                    <Input
+                      placeholder="Scope (space-separated)"
+                      onChange={(e) => setOauthScope(e.target.value)}
+                      value={oauthScope}
+                      data-testid="oauth-scope-input"
+                      className="font-mono"
+                    />
+                    <label className="text-sm font-medium">Resource</label>
+                    <Input
+                      placeholder="Resource"
+                      onChange={(e) => setOauthResource(e.target.value)}
+                      value={oauthResource}
+                      data-testid="oauth-resource-input"
+                      className="font-mono"
+                    />
+                  </div>
+                )}
+              </div>
             </>
           )}
 
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
@@ -42,6 +42,12 @@ describe("Sidebar Environment Variables", () => {
     setArgs: jest.fn(),
     sseUrl: "",
     setSseUrl: jest.fn(),
+    oauthClientId: "",
+    setOauthClientId: jest.fn(),
+    oauthScope: "",
+    setOauthScope: jest.fn(),
+    oauthResource: "",
+    setOauthResource: jest.fn(),
     env: {},
     setEnv: jest.fn(),
     bearerToken: "",
diff --git a/client/src/lib/auth.ts b/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,
+    // Try to get the preregistered client information from session storage first
+    const preregisteredClientInformation = await getClientInformationFromSessionStorage({
+      serverUrl: this.serverUrl,
+      isPreregistered: true,
+    });
+
+    // If no preregistered client information is found, get the dynamically registered client information
+    return (
+      preregisteredClientInformation ??
+      (await getClientInformationFromSessionStorage({
+        serverUrl: this.serverUrl,
+        isPreregistered: false,
+      }))
     );
-    const value = sessionStorage.getItem(key);
-    if (!value) {
-      return undefined;
-    }
-
-    return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
   }
 
   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),
     );
diff --git a/client/src/lib/constants.ts b/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;
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
