[auth debugger] Make the quick flow use the same state machine as the step-by-step flow (#426)

* use state machine in quick flow

* clean up test

* rm some comments

client/src/components/AuthDebugger.tsx

@@ -1,11 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { DebugInspectorOAuthClientProvider } from "../lib/auth";
-import {
-  auth,
-  discoverOAuthMetadata,
-} from "@modelcontextprotocol/sdk/client/auth.js";
-import { OAuthMetadataSchema } from "@modelcontextprotocol/sdk/shared/auth.js";
 import { AlertCircle } from "lucide-react";
 import { AuthDebuggerState } from "../lib/auth-types";
 import { OAuthFlowProgress } from "./OAuthFlowProgress";
@@ -124,22 +119,43 @@ const AuthDebugger = ({
 
     updateAuthState({ isInitiatingAuth: true, statusMessage: null });
     try {
-      const serverAuthProvider = new DebugInspectorOAuthClientProvider(
-        serverUrl,
-      );
-      // First discover OAuth metadata separately so we can save it
-      const metadata = await discoverOAuthMetadata(serverUrl);
-      if (!metadata) {
-        throw new Error("Failed to discover OAuth metadata");
-      }
-      const parsedMetadata = await OAuthMetadataSchema.parseAsync(metadata);
-      serverAuthProvider.saveServerMetadata(parsedMetadata);
+      // Step through the OAuth flow using the state machine instead of the auth() function
+      let currentState: AuthDebuggerState = {
+        ...authState,
+        oauthStep: "metadata_discovery",
+        authorizationUrl: null,
+        latestError: null,
+      };
 
-      await auth(serverAuthProvider, { serverUrl: serverUrl });
+      const oauthMachine = new OAuthStateMachine(serverUrl, (updates) => {
+        // Update our temporary state during the process
+        currentState = { ...currentState, ...updates };
+        // But don't call updateAuthState yet
+      });
+
+      // Manually step through each stage of the OAuth flow
+      while (currentState.oauthStep !== "complete") {
+        await oauthMachine.executeStep(currentState);
+        // In quick mode, we'll just redirect to the authorization URL
+        if (
+          currentState.oauthStep === "authorization_code" &&
+          currentState.authorizationUrl
+        ) {
+          // Open the authorization URL automatically
+          window.location.href = currentState.authorizationUrl;
+          break;
+        }
+      }
+
+      // After the flow completes or reaches a user-input step, update the app state
       updateAuthState({
+        ...currentState,
         statusMessage: {
           type: "info",
-          message: "Starting OAuth authentication process...",
+          message:
+            currentState.oauthStep === "complete"
+              ? "Authentication completed successfully"
+              : "Please complete authentication in the opened window and enter the code",
         },
       });
     } catch (error) {
@@ -153,7 +169,7 @@ const AuthDebugger = ({
     } finally {
       updateAuthState({ isInitiatingAuth: false });
     }
-  }, [serverUrl, updateAuthState]);
+  }, [serverUrl, updateAuthState, authState]);
 
   const handleClearOAuth = useCallback(() => {
     if (serverUrl) {