Preserve OAuth setup when retrying OAuth reconnect. (#1922)

Author: ignaciojimenezr

mcpjam-inspector/client/src/components/connection/ServerConnectionCard.tsx

@@ -240,6 +240,16 @@ export function ServerConnectionCard({
     }
   };
 
+  const getSwitchReconnectOptions = () => {
+    if (server.useOAuth === true && !server.oauthTokens) {
+      return HOSTED_MODE
+        ? { allowInteractiveOAuthFlow: true }
+        : { forceOAuthFlow: true };
+    }
+
+    return { allowInteractiveOAuthFlow: false };
+  };
+
   const handleExport = async () => {
     setIsExporting(true);
     try {
@@ -505,9 +515,7 @@ export function ServerConnectionCard({
                     if (!checked) {
                       onDisconnect(server.name);
                     } else {
-                      void handleReconnect({
-                        allowInteractiveOAuthFlow: false,
-                      });
+                      void handleReconnect(getSwitchReconnectOptions());
                     }
                   }}
                   className="cursor-pointer scale-75"

mcpjam-inspector/client/src/components/connection/ServerDetailModal.tsx

@@ -26,6 +26,7 @@ import {
   isOpenAIApp,
   isOpenAIAppAndMCPApp,
 } from "@/lib/mcp-ui/mcp-apps-utils";
+import { HOSTED_MODE } from "@/lib/config";
 import { getConnectionStatusMeta } from "./server-card-utils";
 import { useServerForm } from "./hooks/use-server-form";
 import { ServerInfoContent } from "./ServerInfoContent";
@@ -212,6 +213,16 @@ export function ServerDetailModal({
     }
   };
 
+  const getSwitchReconnectOptions = () => {
+    if (server.useOAuth === true && !server.oauthTokens) {
+      return HOSTED_MODE
+        ? { allowInteractiveOAuthFlow: true }
+        : { forceOAuthFlow: true };
+    }
+
+    return { allowInteractiveOAuthFlow: false };
+  };
+
   const handleDisconnect = () => {
     posthog.capture("server_detail_modal_disconnect_clicked", {
       platform: detectPlatform(),
@@ -313,9 +324,7 @@ export function ServerDetailModal({
                   if (!checked) {
                     handleDisconnect();
                   } else {
-                    void handleConnect({
-                      allowInteractiveOAuthFlow: false,
-                    });
+                    void handleConnect(getSwitchReconnectOptions());
                   }
                 }}
                 className="cursor-pointer scale-75"

mcpjam-inspector/client/src/components/connection/__tests__/ServerConnectionCard.hosted.test.tsx

@@ -102,6 +102,32 @@ describe("ServerConnectionCard hosted reconnect guard", () => {
     expect(onReconnect).not.toHaveBeenCalled();
   });
 
+  it("allows interactive OAuth reconnect for OAuth servers without tokens", () => {
+    const onReconnect = vi.fn().mockResolvedValue(undefined);
+    const server = createServer({
+      name: "oauth-server",
+      useOAuth: true,
+      config: {
+        transportType: "streamableHttp",
+        url: "https://example.com/mcp",
+      },
+    });
+
+    render(
+      <ServerConnectionCard
+        server={server}
+        onDisconnect={vi.fn()}
+        onReconnect={onReconnect}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("switch"));
+
+    expect(onReconnect).toHaveBeenCalledWith("oauth-server", {
+      allowInteractiveOAuthFlow: true,
+    });
+  });
+
   it("hides the share CTA even for share-eligible hosted servers", () => {
     const server = createServer({
       name: "shareable-server",

mcpjam-inspector/client/src/components/connection/__tests__/ServerConnectionCard.test.tsx

@@ -258,6 +258,28 @@ describe("ServerConnectionCard", () => {
       });
     });
 
+    it("forces a fresh OAuth flow when toggling on an OAuth server without tokens", () => {
+      const server = createServer({
+        connectionStatus: "disconnected",
+        useOAuth: true,
+        config: { url: "https://example.com/mcp" } as any,
+      });
+      const onReconnect = vi.fn().mockResolvedValue(undefined);
+      render(
+        <ServerConnectionCard
+          server={server}
+          {...defaultProps}
+          onReconnect={onReconnect}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("switch"));
+
+      expect(onReconnect).toHaveBeenCalledWith("test-server", {
+        forceOAuthFlow: true,
+      });
+    });
+
     it("catches rejected reconnect promises and clears reconnect loading state", async () => {
       const server = createServer({ connectionStatus: "disconnected" });
       const onReconnect = vi.fn().mockImplementation(

mcpjam-inspector/client/src/components/connection/__tests__/ServerDetailModal.hosted.test.tsx

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ServerWithName } from "@/hooks/use-app-state";
+
+vi.mock("@/lib/config", () => ({
+  HOSTED_MODE: true,
+}));
+
+vi.mock("posthog-js/react", () => ({
+  usePostHog: () => ({
+    capture: vi.fn(),
+  }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/lib/apis/mcp-tools-api", () => ({
+  listTools: vi.fn().mockResolvedValue({ tools: [], toolsMetadata: {} }),
+}));
+
+vi.mock("@/lib/mcp-ui/mcp-apps-utils", () => ({
+  isMCPApp: () => false,
+  isOpenAIApp: () => false,
+  isOpenAIAppAndMCPApp: () => false,
+}));
+
+import { ServerDetailModal } from "../ServerDetailModal";
+
+function createServer(
+  overrides: Partial<ServerWithName> = {},
+): ServerWithName {
+  return {
+    name: "test-server",
+    lastConnectionTime: new Date(),
+    connectionStatus: "disconnected",
+    enabled: true,
+    retryCount: 0,
+    useOAuth: false,
+    config: {
+      url: "https://example.com/mcp",
+    },
+    ...overrides,
+  };
+}
+
+describe("ServerDetailModal hosted reconnect", () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    server: createServer(),
+    defaultTab: "configuration" as const,
+    onSubmit: vi.fn().mockResolvedValue({
+      ok: true,
+      serverName: "test-server",
+    }),
+    onDisconnect: vi.fn(),
+    onReconnect: vi.fn().mockResolvedValue(undefined),
+    existingServerNames: ["test-server"],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+  });
+
+  it("allows interactive OAuth reconnect for OAuth servers without tokens", () => {
+    const onReconnect = vi.fn().mockResolvedValue(undefined);
+
+    render(
+      <ServerDetailModal
+        {...defaultProps}
+        server={createServer({ useOAuth: true })}
+        onReconnect={onReconnect}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("switch"));
+
+    expect(onReconnect).toHaveBeenCalledWith("test-server", {
+      allowInteractiveOAuthFlow: true,
+    });
+  });
+});

mcpjam-inspector/client/src/components/connection/__tests__/ServerDetailModal.test.tsx

@@ -215,6 +215,26 @@ describe("ServerDetailModal", () => {
     });
   });
 
+  it("forces a fresh OAuth flow when toggling on an OAuth server without tokens", () => {
+    const onReconnect = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ServerDetailModal
+        {...defaultProps}
+        server={createServer({
+          connectionStatus: "disconnected",
+          useOAuth: true,
+        })}
+        onReconnect={onReconnect}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("switch"));
+
+    expect(onReconnect).toHaveBeenCalledWith("test-server", {
+      forceOAuthFlow: true,
+    });
+  });
+
   it("does not show a conformance launch button in overview", () => {
     render(<ServerDetailModal {...defaultProps} defaultTab="overview" />);