fix: Add state and scope input UI for MCP OAuth parameter (#9507)

* add state and scope support
* validate the form before sending, but don't block sending on validation errors for debug purpose
* support public oAuth client without client secret

Author: cwangsmv

packages/insomnia/src/main/mcp/oauth-client-provider.ts

@@ -92,11 +92,16 @@ export class McpOAuthClientProvider implements OAuthClientProvider {
     }
 
     if ('clientId' in this.mcpRequest.authentication && this.mcpRequest.authentication.clientId) {
+      const { clientId, clientSecret, clientIdIssuedAt, clientSecretExpiresAt } = this.mcpRequest.authentication;
+
+      // https://github.com/modelcontextprotocol/typescript-sdk/blob/6b4d99f10b975d65392bb777cc8cb1151c20c972/packages/client/src/client/auth.ts#L223%20
+      // Set client_secret to undefined if it's not set or empty string
+      const parsedClientSecret = clientSecret && clientSecret.trim().length > 0 ? clientSecret : undefined;
       return {
-        client_id: this.mcpRequest.authentication.clientId,
-        client_secret: this.mcpRequest.authentication.clientSecret,
-        client_id_issued_at: this.mcpRequest.authentication.clientIdIssuedAt,
-        client_secret_expires_at: this.mcpRequest.authentication.clientSecretExpiresAt,
+        client_id: clientId,
+        client_secret: parsedClientSecret,
+        client_id_issued_at: clientIdIssuedAt,
+        client_secret_expires_at: clientSecretExpiresAt,
       };
     }
     return;
@@ -148,6 +153,13 @@ export class McpOAuthClientProvider implements OAuthClientProvider {
     });
     await this.refreshMcpRequest();
   }
+  // add state parameter to authorization url if present in authentication
+  async state() {
+    if ('state' in this.mcpRequest.authentication && this.mcpRequest.authentication.state) {
+      return this.mcpRequest.authentication.state;
+    }
+    return '';
+  }
   saveResourceMetadataUrl(url: URL | undefined) {
     this._resourceMetadataUrl = url;
   }

packages/insomnia/src/main/mcp/transport-streamable-http.ts

@@ -1,7 +1,7 @@
 import {
   auth,
   type AuthResult,
-  extractResourceMetadataUrl,
+  extractWWWAuthenticateParams,
   UnauthorizedError,
 } from '@modelcontextprotocol/sdk/client/auth.js';
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
@@ -160,7 +160,12 @@ const wrappedFetch = async (
       }
     }
 
-    const resourceMetadataUrl = extractResourceMetadataUrl(response);
+    const { resourceMetadataUrl, scope: scopeFromWWWAuthenticate } = extractWWWAuthenticateParams(response);
+    // Use scope from authenticate config if available, otherwise use scope from WWW-Authenticate header
+    const scope =
+      'scope' in authentication && authentication.scope && authentication.scope.trim().length > 0
+        ? authentication.scope
+        : scopeFromWWWAuthenticate;
     if (resourceMetadataUrl) {
       authProvider.saveResourceMetadataUrl(resourceMetadataUrl);
     }
@@ -183,6 +188,7 @@ const wrappedFetch = async (
     const redirectPromise = new Promise<string>(res => (authPromiseResolve = res));
     const unsubscribe = authProvider.onRedirectEnd(async (authorizationCode: string) => {
       // Resolve the promise to continue the auth flow after user has completed authorization in default browser
+      // Will be triggered when `redirectToAuthorization` completes in the oauth client provider
       authPromiseResolve(authorizationCode);
     });
 
@@ -243,6 +249,7 @@ const wrappedFetch = async (
         serverUrl: url,
         resourceMetadataUrl,
         fetchFn: authFetchFn,
+        scope,
       });
       // Wait for user to complete authorization in default browser and get authorization code
       if (authResult === 'REDIRECT') {
@@ -252,6 +259,7 @@ const wrappedFetch = async (
         authResult = await auth(authProvider, {
           serverUrl: url,
           resourceMetadataUrl,
+          scope,
           authorizationCode,
           fetchFn: authFetchFn,
         });
@@ -268,6 +276,7 @@ const wrappedFetch = async (
       BrowserWindow.getAllWindows().forEach(window => {
         window.webContents.send('hide-oauth-authorization-modal');
       });
+      // cleanup the oauth client provider listener
       unsubscribe();
     }
     return await wrappedFetch(url, init, context, authProvider, true);

packages/insomnia/src/ui/components/editors/auth/o-auth-2-auth.tsx

@@ -292,7 +292,7 @@ const getFieldsForGrantType = (authentication: Extract<RequestAuthentication, {
     advanced = [responseType, scope, state, tokenPrefix, audience];
   } else if (grantType === GRANT_TYPE_MCP_AUTH_FLOW) {
     basic = [clientId, clientSecret, readonlyRedirectUri];
-    advanced = [];
+    advanced = [state, scope];
   }
 
   return {
@@ -320,6 +320,9 @@ export const OAuth2Auth = ({ showMcpAuthFlow, disabled }: { showMcpAuthFlow?: bo
             options={showMcpAuthFlow ? grantTypeOptionsWithMcpAuthFlow : grantTypeOptions}
           />
           {basic}
+          <AuthAccordion accordionKey="OAuth2AdvancedOptions" label="Advanced Options">
+            {advanced}
+          </AuthAccordion>
         </AuthTableBody>
         <div className="pad">
           <OAuth2Tokens hideRefresh />

packages/insomnia/src/ui/components/mcp/mcp-request-pane.tsx

@@ -133,34 +133,34 @@ export const McpRequestPane: FC<Props> = ({
   );
 
   const handleSend = async () => {
-    if (rjsfFormRef.current?.validate()) {
-      try {
-        if (selectedPrimitiveItem?.type === 'tools') {
-          await window.main.mcp.primitive.callTool({
-            name: selectedPrimitiveItem?.name || '',
-            arguments: mcpParams[primitiveId],
-            requestId: requestId,
-          });
-        } else if (selectedPrimitiveItem?.type === 'resources') {
-          await window.main.mcp.primitive.readResource({
-            requestId,
-            uri: selectedPrimitiveItem?.uri || '',
-          });
-        } else if (selectedPrimitiveItem?.type === 'resourceTemplates') {
-          await window.main.mcp.primitive.readResource({
-            requestId,
-            uri: fillUriTemplate(selectedPrimitiveItem.uriTemplate, mcpParams[primitiveId] || {}),
-          });
-        } else if (selectedPrimitiveItem?.type === 'prompts') {
-          await window.main.mcp.primitive.getPrompt({
-            requestId,
-            name: selectedPrimitiveItem?.name || '',
-            arguments: mcpParams[primitiveId],
-          });
-        }
-      } catch (err) {
-        console.warn('MCP primitive call error', err);
+    // validate the form before sending, but don't block sending on validation errors for debug purpose
+    rjsfFormRef.current?.validate();
+    try {
+      if (selectedPrimitiveItem?.type === 'tools') {
+        await window.main.mcp.primitive.callTool({
+          name: selectedPrimitiveItem?.name || '',
+          arguments: mcpParams[primitiveId],
+          requestId: requestId,
+        });
+      } else if (selectedPrimitiveItem?.type === 'resources') {
+        await window.main.mcp.primitive.readResource({
+          requestId,
+          uri: selectedPrimitiveItem?.uri || '',
+        });
+      } else if (selectedPrimitiveItem?.type === 'resourceTemplates') {
+        await window.main.mcp.primitive.readResource({
+          requestId,
+          uri: fillUriTemplate(selectedPrimitiveItem.uriTemplate, mcpParams[primitiveId] || {}),
+        });
+      } else if (selectedPrimitiveItem?.type === 'prompts') {
+        await window.main.mcp.primitive.getPrompt({
+          requestId,
+          name: selectedPrimitiveItem?.name || '',
+          arguments: mcpParams[primitiveId],
+        });
       }
+    } catch (err) {
+      console.warn('MCP primitive call error', err);
     }
   };
 

packages/insomnia/src/ui/components/viewers/response-error-viewer.tsx

@@ -13,8 +13,9 @@ interface Props {
   url: string;
   docsLink?: string;
   isMcpResponse?: boolean;
+  showErrorDetails?: boolean;
 }
-export const ResponseErrorViewer: FC<Props> = memo(({ error, docsLink, isMcpResponse }) => {
+export const ResponseErrorViewer: FC<Props> = memo(({ error, docsLink, isMcpResponse, showErrorDetails = true }) => {
   const [isCertificatesModalOpen, setCertificatesModalOpen] = useState(false);
   let msg: React.ReactNode = null;
   const { settings } = useRootLoaderData()!;
@@ -52,15 +53,19 @@ export const ResponseErrorViewer: FC<Props> = memo(({ error, docsLink, isMcpResp
 
   return (
     <div>
-      <pre
-        className="selectable pad force-pre-wrap"
-        style={{
-          fontSize: `${editorFontSize}px`,
-        }}
-      >
-        {error}
-      </pre>
-      <hr />
+      {showErrorDetails && (
+        <>
+          <pre
+            className="selectable pad force-pre-wrap"
+            style={{
+              fontSize: `${editorFontSize}px`,
+            }}
+          >
+            {error}
+          </pre>
+          <hr />
+        </>
+      )}
       <div className="pad text-center">
         <p className="faint pad-left pad-right">Here are some additional things that may help.</p>
         {msg}

packages/insomnia/src/ui/components/websockets/realtime-response-pane.tsx

@@ -314,7 +314,7 @@ const RealtimeActiveResponsePane: FC<RealtimeActiveResponsePaneProps & { readySt
         <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="events">
           <PanelGroup direction="vertical" className="grid h-full w-full grid-rows-[repeat(auto-fit,minmax(0,1fr))]">
             {response.error && !isMCPAuthError ? (
-              <ResponseErrorViewer url={response.url} error={response.error} />
+              <ResponseErrorViewer url={response.url} error={response.error} isMcpResponse={isMcpResponse(response)} />
             ) : (
               <>
                 <Panel minSize={10} defaultSize={50} className="box-border flex w-full flex-1 flex-col overflow-hidden">
@@ -383,6 +383,7 @@ const RealtimeActiveResponsePane: FC<RealtimeActiveResponsePaneProps & { readySt
                     url={response.url}
                     error={response.error}
                     docsLink={docsMcpAuthentication}
+                    showErrorDetails={false}
                     isMcpResponse
                   />
                 ) : null}