Fix connect button behavior for Oauth by making sure that scope is included in client metadata when client is registered.

  - In auth.ts
    - in InspectorOAuthClientProvider constructor
      - add optional scope param
      - set instance var this.scope to scope param
    - in clientMetadata getter
      - add scope param set to this.scope or ""
  - in useConnection.ts
    - in handleAuthError handler
      - move instantiation of serverAuthProvider until after scope has been determined
      - pass scope to InspectorOAuthClientProvider constructor

Author: cliffhall

client/src/lib/auth.ts

@@ -102,10 +102,15 @@ export const clearClientInformationFromSessionStorage = ({
 };
 
 export class InspectorOAuthClientProvider implements OAuthClientProvider {
-  constructor(protected serverUrl: string) {
+  constructor(
+    protected serverUrl: string,
+    scope?: string,
+  ) {
+    this.scope = scope;
     // Save the server URL to session storage
     sessionStorage.setItem(SESSION_KEYS.SERVER_URL, serverUrl);
   }
+  scope: string | undefined;
 
   get redirectUrl() {
     return window.location.origin + "/oauth/callback";
@@ -119,6 +124,7 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
       response_types: ["code"],
       client_name: "MCP Inspector",
       client_uri: "https://github.com/modelcontextprotocol/inspector",
+      scope: this.scope ?? "",
     };
   }
 

client/src/lib/hooks/useConnection.ts

@@ -319,8 +319,6 @@ export function useConnection({
 
   const handleAuthError = async (error: unknown) => {
     if (is401Error(error)) {
-      const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
-
       let scope = oauthScope?.trim();
       if (!scope) {
         // Only discover resource metadata when we need to discover scopes
@@ -334,6 +332,7 @@ export function useConnection({
         }
         scope = await discoverScopes(sseUrl, resourceMetadata);
       }
+      const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl, scope);
 
       const result = await auth(serverAuthProvider, {
         serverUrl: sseUrl,