feat(auth-debugger): middleware-based request-level pausing with quick flow

client/src/App.tsx

@@ -31,14 +31,14 @@
   isReservedMetaKey,
 } from "@/utils/metaUtils";
 import { AuthDebuggerState, EMPTY_DEBUGGER_STATE } from "./lib/auth-types";
-import { OAuthStateMachine } from "./lib/oauth-state-machine";
 import { cacheToolOutputSchemas } from "./utils/schemaUtils";
 import { cleanParams } from "./utils/paramUtils";
 import type { JsonSchemaType } from "./utils/jsonUtils";
 import React, {
   Suspense,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -251,7 +251,7 @@
     return {};
   });
 
   const updateAuthState = (updates: Partial<AuthDebuggerState>) => {
     setAuthState((prev) => ({ ...prev, ...updates }));
   };
 
@@ -552,10 +552,9 @@
   );
 
   const onOAuthDebugConnect = useCallback(
-    async ({
+    ({
       authorizationCode,
       errorMsg,
-      restoredState,
     }: {
       authorizationCode?: string;
       errorMsg?: string;
@@ -566,62 +565,26 @@
       if (errorMsg) {
         updateAuthState({
           latestError: new Error(errorMsg),
+          statusMessage: {
+            type: "error",
+            message: errorMsg,
+          },
         });
         return;
       }
 
-      if (restoredState && authorizationCode) {
-        let currentState: AuthDebuggerState = {
-          ...restoredState,
-          authorizationCode,
-          oauthStep: "token_request",
-          isInitiatingAuth: true,
-          statusMessage: null,
-          latestError: null,
-        };
-
-        try {
-          const stateMachine = new OAuthStateMachine(sseUrl, (updates) => {
-            currentState = { ...currentState, ...updates };
-          });
-
-          while (
-            currentState.oauthStep !== "complete" &&
-            currentState.oauthStep !== "authorization_code"
-          ) {
-            await stateMachine.executeStep(currentState);
-          }
-
-          if (currentState.oauthStep === "complete") {
-            updateAuthState({
-              ...currentState,
-              statusMessage: {
-                type: "success",
-                message: "Authentication completed successfully",
-              },
-              isInitiatingAuth: false,
-            });
-          }
-        } catch (error) {
-          console.error("OAuth continuation error:", error);
-          updateAuthState({
-            latestError:
-              error instanceof Error ? error : new Error(String(error)),
-            statusMessage: {
-              type: "error",
-              message: `Failed to complete OAuth flow: ${error instanceof Error ? error.message : String(error)}`,
-            },
-            isInitiatingAuth: false,
-          });
-        }
-      } else if (authorizationCode) {
+      if (authorizationCode) {
+        // Show info message - the user should use the debug flow to complete
         updateAuthState({
-          authorizationCode,
-          oauthStep: "token_request",
+          statusMessage: {
+            type: "info",
+            message:
+              "Authorization code received. Use the debug flow to complete authentication.",
+          },
         });
       }
     },
-    [sseUrl],
+    [],
   );
 
   useEffect(() => {
@@ -1177,15 +1140,21 @@
     setLogLevel(level);
   };
 
-  const AuthDebuggerWrapper = () => (
-    <TabsContent value="auth">
-      <AuthDebugger
-        serverUrl={sseUrl}
-        onBack={() => setIsAuthDebuggerVisible(false)}
-        authState={authState}
-        updateAuthState={updateAuthState}
-      />
-    </TabsContent>
+  // Memoize the AuthDebugger to prevent re-mounting when App re-renders
+  // This is important because AuthDebugger has local state (showDebugFlow)
+  // that would be lost if the component was re-mounted.
+  const authDebuggerElement = useMemo(
+    () => (
+      <TabsContent value="auth">
+        <AuthDebugger
+          serverUrl={sseUrl}
+          onBack={() => setIsAuthDebuggerVisible(false)}
+          authState={authState}
+          updateAuthState={updateAuthState}
+        />
+      </TabsContent>
+    ),
+    [sseUrl, authState, updateAuthState],
   );
 
   if (window.location.pathname === "/oauth/callback") {
@@ -1522,7 +1491,7 @@
                       setRoots={setRoots}
                       onRootsChange={handleRootsChange}
                     />
-                    <AuthDebuggerWrapper />
+                    {authDebuggerElement}
                     <MetadataTab
                       metadata={metadata}
                       onMetadataChange={handleMetadataChange}
@@ -1537,7 +1506,7 @@
               className="w-full p-4"
               onValueChange={(value) => (window.location.hash = value)}
             >
-              <AuthDebuggerWrapper />
+              {authDebuggerElement}
             </Tabs>
           ) : (
             <div className="flex flex-col items-center justify-center h-full gap-4">

client/src/__tests__/App.config.test.tsx

@@ -9,10 +9,6 @@ jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
   auth: jest.fn(),
 }));
 
-jest.mock("../lib/oauth-state-machine", () => ({
-  OAuthStateMachine: jest.fn(),
-}));
-
 jest.mock("../lib/auth", () => ({
   InspectorOAuthClientProvider: jest.fn().mockImplementation(() => ({
     tokens: jest.fn().mockResolvedValue(null),

client/src/__tests__/App.routing.test.tsx

@@ -8,10 +8,6 @@ jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
   auth: jest.fn(),
 }));
 
-jest.mock("../lib/oauth-state-machine", () => ({
-  OAuthStateMachine: jest.fn(),
-}));
-
 jest.mock("../lib/auth", () => ({
   InspectorOAuthClientProvider: jest.fn().mockImplementation(() => ({
     tokens: jest.fn().mockResolvedValue(null),

client/src/__tests__/App.samplingNavigation.test.tsx

@@ -32,10 +32,6 @@ jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
   auth: jest.fn(),
 }));
 
-jest.mock("../lib/oauth-state-machine", () => ({
-  OAuthStateMachine: jest.fn(),
-}));
-
 jest.mock("../lib/auth", () => ({
   InspectorOAuthClientProvider: jest.fn().mockImplementation(() => ({
     tokens: jest.fn().mockResolvedValue(null),