Merge branch 'main' into allow-multiple-client-connections

Author: cliffhall

client/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.11.5",
     "@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

@@ -20,6 +20,7 @@ import {
 import { OAuthTokensSchema } from "@modelcontextprotocol/sdk/shared/auth.js";
 import { SESSION_KEYS, getServerSpecificKey } from "./lib/constants";
 import { AuthDebuggerState } from "./lib/auth-types";
+import { cacheToolOutputSchemas } from "./utils/schemaUtils";
 import React, {
   Suspense,
   useCallback,
@@ -473,6 +474,8 @@ const App = () => {
     );
     setTools(response.tools);
     setNextToolCursor(response.nextCursor);
+    // Cache output schemas for validation
+    cacheToolOutputSchemas(response.tools);
   };
 
   const callTool = async (name: string, params: Record<string, unknown>) => {
@@ -759,6 +762,8 @@ const App = () => {
                       clearTools={() => {
                         setTools([]);
                         setNextToolCursor(undefined);
+                        // Clear cached output schemas
+                        cacheToolOutputSchemas([]);
                       }}
                       callTool={async (name, params) => {
                         clearError("tools");

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");
+      // 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,
+      };
+
+      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;
+        }
       }
-      const parsedMetadata = await OAuthMetadataSchema.parseAsync(metadata);
-      serverAuthProvider.saveServerMetadata(parsedMetadata);
 
-      await auth(serverAuthProvider, { serverUrl: serverUrl });
+      // 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) {

client/src/components/OAuthFlowProgress.tsx

@@ -2,6 +2,8 @@ import { AuthDebuggerState, OAuthStep } from "@/lib/auth-types";
 import { CheckCircle2, Circle, ExternalLink } from "lucide-react";
 import { Button } from "./ui/button";
 import { DebugInspectorOAuthClientProvider } from "@/lib/auth";
+import { useEffect, useMemo, useState } from "react";
+import { OAuthClientInformation } from "@modelcontextprotocol/sdk/shared/auth.js";
 
 interface OAuthStepProps {
   label: string;
@@ -54,24 +56,57 @@ interface OAuthFlowProgressProps {
   proceedToNextStep: () => Promise<void>;
 }
 
+const steps: Array<OAuthStep> = [
+  "metadata_discovery",
+  "client_registration",
+  "authorization_redirect",
+  "authorization_code",
+  "token_request",
+  "complete",
+];
+
 export const OAuthFlowProgress = ({
   serverUrl,
   authState,
   updateAuthState,
   proceedToNextStep,
 }: OAuthFlowProgressProps) => {
-  const provider = new DebugInspectorOAuthClientProvider(serverUrl);
+  const provider = useMemo(
+    () => new DebugInspectorOAuthClientProvider(serverUrl),
+    [serverUrl],
+  );
+  const [clientInfo, setClientInfo] = useState<OAuthClientInformation | null>(
+    null,
+  );
 
-  const steps: Array<OAuthStep> = [
-    "metadata_discovery",
-    "client_registration",
-    "authorization_redirect",
-    "authorization_code",
-    "token_request",
-    "complete",
-  ];
   const currentStepIdx = steps.findIndex((s) => s === authState.oauthStep);
 
+  useEffect(() => {
+    const fetchClientInfo = async () => {
+      if (authState.oauthClientInfo) {
+        setClientInfo(authState.oauthClientInfo);
+      } else {
+        try {
+          const info = await provider.clientInformation();
+          if (info) {
+            setClientInfo(info);
+          }
+        } catch (error) {
+          console.error("Failed to fetch client information:", error);
+        }
+      }
+    };
+
+    if (currentStepIdx > steps.indexOf("client_registration")) {
+      fetchClientInfo();
+    }
+  }, [
+    provider,
+    authState.oauthStep,
+    authState.oauthClientInfo,
+    currentStepIdx,
+  ]);
+
   // Helper to get step props
   const getStepProps = (stepName: OAuthStep) => ({
     isComplete:
@@ -110,13 +145,13 @@ export const OAuthFlowProgress = ({
           label="Client Registration"
           {...getStepProps("client_registration")}
         >
-          {authState.oauthClientInfo && (
+          {clientInfo && (
             <details className="text-xs mt-2">
               <summary className="cursor-pointer text-muted-foreground font-medium">
                 Registered Client Information
               </summary>
               <pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
-                {JSON.stringify(authState.oauthClientInfo, null, 2)}
+                {JSON.stringify(clientInfo, null, 2)}
               </pre>
             </details>
           )}