feat: support custom scope in auth flow

Author: xiaoyijun

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.13.0",
+  "version": "0.12.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -23,9 +23,8 @@
     "test:watch": "jest --config jest.config.cjs --watch"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.11.5",
+    "@modelcontextprotocol/sdk": "^1.11.3",
     "@radix-ui/react-checkbox": "^1.1.4",
-    "ajv": "^6.12.6",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",

client/src/App.tsx

@@ -114,6 +114,10 @@ const App = () => {
     return localStorage.getItem("lastOauthClientId") || "";
   });
 
+  const [oauthScope, setOauthScope] = useState<string>(() => {
+    return localStorage.getItem("lastOauthScope") || "";
+  });
+
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
     Array<
       PendingRequest & {
@@ -189,6 +193,7 @@ const App = () => {
     bearerToken,
     headerName,
     oauthClientId,
+    oauthScope,
     config,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
@@ -236,6 +241,10 @@ const App = () => {
     localStorage.setItem("lastOauthClientId", oauthClientId);
   }, [oauthClientId]);
 
+  useEffect(() => {
+    localStorage.setItem("lastOauthScope", oauthScope);
+  }, [oauthScope]);
+
   useEffect(() => {
     localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
   }, [config]);
@@ -594,6 +603,8 @@ const App = () => {
         setHeaderName={setHeaderName}
         oauthClientId={oauthClientId}
         setOauthClientId={setOauthClientId}
+        oauthScope={oauthScope}
+        setOauthScope={setOauthScope}
         onConnect={connectMcpServer}
         onDisconnect={disconnectMcpServer}
         stdErrNotifications={stdErrNotifications}

client/src/components/Sidebar.tsx

@@ -58,6 +58,8 @@ interface SidebarProps {
   setHeaderName?: (name: string) => void;
   oauthClientId: string;
   setOauthClientId: (id: string) => void;
+  oauthScope: string;
+  setOauthScope: (scope: string) => void;
   onConnect: () => void;
   onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
@@ -87,6 +89,8 @@ const Sidebar = ({
   setHeaderName,
   oauthClientId,
   setOauthClientId,
+  oauthScope,
+  setOauthScope,
   onConnect,
   onDisconnect,
   stdErrNotifications,
@@ -369,6 +373,14 @@ const Sidebar = ({
                       data-testid="oauth-client-id-input"
                       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">
                       Redirect URL (auto-populated)
                     </label>

client/src/components/__tests__/Sidebar.test.tsx

@@ -44,6 +44,8 @@ describe("Sidebar Environment Variables", () => {
     setSseUrl: jest.fn(),
     oauthClientId: "",
     setOauthClientId: jest.fn(),
+    oauthScope: "",
+    setOauthScope: jest.fn(),
     env: {},
     setEnv: jest.fn(),
     bearerToken: "",

client/src/lib/auth.ts

@@ -32,6 +32,8 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
     // Save the client information to session storage if provided
     if (clientInformation) {
       this.saveClientInformation(clientInformation);
+    } else {
+      this.clearClientInformation();
     }
   }
 
@@ -113,6 +115,12 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
       getServerSpecificKey(SESSION_KEYS.CODE_VERIFIER, this.serverUrl),
     );
   }
+
+  clearClientInformation() {
+    sessionStorage.removeItem(
+      getServerSpecificKey(SESSION_KEYS.CLIENT_INFORMATION, this.serverUrl),
+    );
+  }
 }
 
 // Overrides debug URL and allows saving server OAuth metadata to

client/src/lib/hooks/useConnection.ts

@@ -57,6 +57,7 @@ interface UseConnectionOptions {
   bearerToken?: string;
   headerName?: string;
   oauthClientId?: string;
+  oauthScope?: string;
   config: InspectorConfig;
   onNotification?: (notification: Notification) => void;
   onStdErrNotification?: (notification: Notification) => void;
@@ -75,6 +76,7 @@ export function useConnection({
   bearerToken,
   headerName,
   oauthClientId,
+  oauthScope,
   config,
   onNotification,
   onStdErrNotification,
@@ -280,7 +282,10 @@ export function useConnection({
         oauthClientInformation,
       );
 
-      const result = await auth(serverAuthProvider, { serverUrl: sseUrl });
+      const result = await auth(serverAuthProvider, {
+        serverUrl: sseUrl,
+        scope: oauthScope,
+      });
       return result === "AUTHORIZED";
     }