@mcp-ts/sdk 2.3.4 → 2.4.0

package/dist/client/react.d.mts

@@ -1,9 +1,9 @@
-import { c as SSEClient, e as AppHostOptions, f as AppHostClient, a as AppHost } from '../index-Cfjsme-a.mjs';
-export { A as APP_HOST_DEFAULTS, D as DEFAULT_MCP_APP_CSP, S as SANDBOX_PROXY_READY_METHOD, b as SANDBOX_RESOURCE_READY_METHOD, d as SSEClientOptions } from '../index-Cfjsme-a.mjs';
+import { c as SSEClient, e as AppHostOptions, f as AppHostClient, a as AppHost } from '../index-ByIjEReo.mjs';
+export { A as APP_HOST_DEFAULTS, D as DEFAULT_MCP_APP_CSP, S as SANDBOX_PROXY_READY_METHOD, b as SANDBOX_RESOURCE_READY_METHOD, d as SSEClientOptions } from '../index-ByIjEReo.mjs';
 import { c as McpConnectionState, M as McpConnectionEvent } from '../events-CK3N--3g.mjs';
 export { D as Disposable, a as DisposableStore, E as Emitter, b as Event, d as McpObservabilityEvent } from '../events-CK3N--3g.mjs';
-import { v as ToolInfo, k as FinishAuthResult, o as ListToolsRpcResult, L as ListPromptsResult, m as ListResourcesResult } from '../types-CxFaaZrM.mjs';
-export { q as McpRpcRequest, r as McpRpcResponse } from '../types-CxFaaZrM.mjs';
+import { v as ToolInfo, k as FinishAuthResult, o as ListToolsRpcResult, L as ListPromptsResult, m as ListResourcesResult } from '../types-DCk_IF4L.mjs';
+export { q as McpRpcRequest, r as McpRpcResponse } from '../types-DCk_IF4L.mjs';
 import React$1, { ReactNode, CSSProperties } from 'react';
 import '@modelcontextprotocol/ext-apps/app-bridge';
 import '@modelcontextprotocol/sdk/types.js';
@@ -72,6 +72,7 @@ interface McpConnection {
     authUrl?: string;
     error?: string;
     createdAt?: Date;
+    updatedAt?: Date;
 }
 interface McpClient$1 {
     /**
@@ -141,7 +142,7 @@ interface McpClient$1 {
     /**
      * Complete OAuth authorization
      */
-    finishAuth: (sessionId: string, code: string) => Promise<FinishAuthResult>;
+    finishAuth: (state: string, code: string) => Promise<FinishAuthResult>;
     /**
      * Explicitly resume OAuth flow for an existing session
      */
@@ -190,7 +191,7 @@ interface OAuthPopupConnectionLike {
  *
  * These utilities sit on top of the core MCP auth primitives:
  * - `useMcp({ onRedirect })` to decide how auth navigation happens
- * - `finishAuth(sessionId, code)` to complete code exchange
+ * - `finishAuth(state, code)` to complete code exchange
  *
  * Consumers are free to:
  * - use these helpers as-is for a turnkey popup flow
@@ -240,7 +241,7 @@ declare function createOAuthPopupRedirectHandler(options?: OAuthPopupRedirectOpt
  *
  * If you are not using a popup flow, you do not need this hook.
  */
-declare function useMcpOAuthPopup<TConnection extends OAuthPopupConnectionLike>(connections: TConnection[], finishAuth: (sessionId: string, code: string) => Promise<unknown>): void;
+declare function useMcpOAuthPopup<TConnection extends OAuthPopupConnectionLike>(connections: TConnection[], finishAuth: (state: string, code: string) => Promise<unknown>): void;
 /**
  * Default popup callback UI for popup-based OAuth flows.
  *
@@ -248,7 +249,7 @@ declare function useMcpOAuthPopup<TConnection extends OAuthPopupConnectionLike>(
  * opener window, waits for success/failure, and closes the popup on success.
  *
  * It is intentionally optional: apps can replace it with their own callback
- * page UI or skip popup auth entirely and call `finishAuth(sessionId, code)`
+ * page UI or skip popup auth entirely and call `finishAuth(state, code)`
  * from any callback route they control.
  */
 declare function McpOAuthCallbackContent({ code, sessionId, title, initialStatus, loadingFallback, rootStyle, cardStyle, titleStyle, messageStyle, renderContainer, debugPhase, }: McpOAuthCallbackContentProps): JSX.Element;

package/dist/client/react.d.ts

@@ -1,9 +1,9 @@
-import { c as SSEClient, e as AppHostOptions, f as AppHostClient, a as AppHost } from '../index-CmjMd2ac.js';
-export { A as APP_HOST_DEFAULTS, D as DEFAULT_MCP_APP_CSP, S as SANDBOX_PROXY_READY_METHOD, b as SANDBOX_RESOURCE_READY_METHOD, d as SSEClientOptions } from '../index-CmjMd2ac.js';
+import { c as SSEClient, e as AppHostOptions, f as AppHostClient, a as AppHost } from '../index-CtXvKl8N.js';
+export { A as APP_HOST_DEFAULTS, D as DEFAULT_MCP_APP_CSP, S as SANDBOX_PROXY_READY_METHOD, b as SANDBOX_RESOURCE_READY_METHOD, d as SSEClientOptions } from '../index-CtXvKl8N.js';
 import { c as McpConnectionState, M as McpConnectionEvent } from '../events-CK3N--3g.js';
 export { D as Disposable, a as DisposableStore, E as Emitter, b as Event, d as McpObservabilityEvent } from '../events-CK3N--3g.js';
-import { v as ToolInfo, k as FinishAuthResult, o as ListToolsRpcResult, L as ListPromptsResult, m as ListResourcesResult } from '../types-CxFaaZrM.js';
-export { q as McpRpcRequest, r as McpRpcResponse } from '../types-CxFaaZrM.js';
+import { v as ToolInfo, k as FinishAuthResult, o as ListToolsRpcResult, L as ListPromptsResult, m as ListResourcesResult } from '../types-DCk_IF4L.js';
+export { q as McpRpcRequest, r as McpRpcResponse } from '../types-DCk_IF4L.js';
 import React$1, { ReactNode, CSSProperties } from 'react';
 import '@modelcontextprotocol/ext-apps/app-bridge';
 import '@modelcontextprotocol/sdk/types.js';
@@ -72,6 +72,7 @@ interface McpConnection {
     authUrl?: string;
     error?: string;
     createdAt?: Date;
+    updatedAt?: Date;
 }
 interface McpClient$1 {
     /**
@@ -141,7 +142,7 @@ interface McpClient$1 {
     /**
      * Complete OAuth authorization
      */
-    finishAuth: (sessionId: string, code: string) => Promise<FinishAuthResult>;
+    finishAuth: (state: string, code: string) => Promise<FinishAuthResult>;
     /**
      * Explicitly resume OAuth flow for an existing session
      */
@@ -190,7 +191,7 @@ interface OAuthPopupConnectionLike {
  *
  * These utilities sit on top of the core MCP auth primitives:
  * - `useMcp({ onRedirect })` to decide how auth navigation happens
- * - `finishAuth(sessionId, code)` to complete code exchange
+ * - `finishAuth(state, code)` to complete code exchange
  *
  * Consumers are free to:
  * - use these helpers as-is for a turnkey popup flow
@@ -240,7 +241,7 @@ declare function createOAuthPopupRedirectHandler(options?: OAuthPopupRedirectOpt
  *
  * If you are not using a popup flow, you do not need this hook.
  */
-declare function useMcpOAuthPopup<TConnection extends OAuthPopupConnectionLike>(connections: TConnection[], finishAuth: (sessionId: string, code: string) => Promise<unknown>): void;
+declare function useMcpOAuthPopup<TConnection extends OAuthPopupConnectionLike>(connections: TConnection[], finishAuth: (state: string, code: string) => Promise<unknown>): void;
 /**
  * Default popup callback UI for popup-based OAuth flows.
  *
@@ -248,7 +249,7 @@ declare function useMcpOAuthPopup<TConnection extends OAuthPopupConnectionLike>(
  * opener window, waits for success/failure, and closes the popup on success.
  *
  * It is intentionally optional: apps can replace it with their own callback
- * page UI or skip popup auth entirely and call `finishAuth(sessionId, code)`
+ * page UI or skip popup auth entirely and call `finishAuth(state, code)`
  * from any callback route they control.
  */
 declare function McpOAuthCallbackContent({ code, sessionId, title, initialStatus, loadingFallback, rootStyle, cardStyle, titleStyle, messageStyle, renderContainer, debugPhase, }: McpOAuthCallbackContentProps): JSX.Element;

package/dist/client/react.js

@@ -50,8 +50,8 @@ var SSEClient = class {
   async getSession(sessionId) {
     return this.sendRequest("getSession", { sessionId });
   }
-  async finishAuth(sessionId, code) {
-    return this.sendRequest("finishAuth", { sessionId, code });
+  async finishAuth(state, code) {
+    return this.sendRequest("finishAuth", { state, code });
   }
   async listPrompts(sessionId) {
     return this.sendRequest("listPrompts", { sessionId });
@@ -253,6 +253,20 @@ var SSEClient = class {
   }
 };
 
+// src/client/utils/session-state.ts
+function getInitialConnectionState(status) {
+  return status === "active" ? "VALIDATING" : "AUTHENTICATING";
+}
+function isTransientReconnectState(state) {
+  return state === "INITIALIZING" || state === "VALIDATING" || state === "RECONNECTING" || state === "CONNECTING" || state === "CONNECTED" || state === "DISCOVERING";
+}
+function getVisibleConnectionState(incomingState, existingState, previousState) {
+  if (incomingState === "INITIALIZING" && (existingState === "AUTHENTICATING" || existingState === "AUTHENTICATED" || previousState === "AUTHENTICATING" || previousState === "AUTHENTICATED")) {
+    return existingState === "AUTHENTICATED" || previousState === "AUTHENTICATED" ? "AUTHENTICATED" : "AUTHENTICATING";
+  }
+  return incomingState;
+}
+
 // src/client/react/use-mcp.ts
 function useMcp(options) {
   const {
@@ -310,26 +324,21 @@ function useMcp(options) {
   }, [url, userId, authToken, autoConnect, autoInitialize]);
   const updateConnectionsFromEvent = react.useCallback((event) => {
     if (!isMountedRef.current) return;
-    const isTransientReconnectState = (state) => state === "INITIALIZING" || state === "VALIDATING" || state === "RECONNECTING" || state === "CONNECTING" || state === "CONNECTED" || state === "DISCOVERING";
-    const getVisibleState = (incomingState, existingState, previousState) => {
-      if (incomingState === "INITIALIZING" && (existingState === "AUTHENTICATING" || existingState === "AUTHENTICATED" || previousState === "AUTHENTICATING" || previousState === "AUTHENTICATED")) {
-        return existingState === "AUTHENTICATED" || previousState === "AUTHENTICATED" ? "AUTHENTICATED" : "AUTHENTICATING";
-      }
-      return incomingState;
-    };
     setConnections((prev) => {
       switch (event.type) {
         case "state_changed": {
           const existing = prev.find((c) => c.sessionId === event.sessionId);
           if (existing) {
-            const normalizedState = getVisibleState(event.state, existing.state, event.previousState);
+            const normalizedState = getVisibleConnectionState(event.state, existing.state, event.previousState);
             const nextState = existing.state === "READY" && isTransientReconnectState(normalizedState) ? existing.state : normalizedState;
+            const updatedAt = /* @__PURE__ */ new Date();
             return prev.map(
               (c) => c.sessionId === event.sessionId ? {
                 ...c,
                 state: nextState,
                 // update createdAt if present in event, otherwise keep existing
-                createdAt: event.createdAt ? new Date(event.createdAt) : c.createdAt
+                createdAt: event.createdAt ? new Date(event.createdAt) : c.createdAt,
+                updatedAt
               } : c
             );
           } else {
@@ -345,8 +354,9 @@ function useMcp(options) {
                 serverUrl: event.serverUrl,
                 // New connections do not have prior local state, so we normalize
                 // only against the server-reported previous state.
-                state: getVisibleState(event.state, void 0, event.previousState),
+                state: getVisibleConnectionState(event.state, void 0, event.previousState),
                 createdAt: event.createdAt ? new Date(event.createdAt) : void 0,
+                updatedAt: /* @__PURE__ */ new Date(),
                 tools: []
               }
             ];
@@ -357,7 +367,7 @@ function useMcp(options) {
             clientRef.current.preloadToolUiResources(event.sessionId, event.tools);
           }
           return prev.map(
-            (c) => c.sessionId === event.sessionId ? { ...c, tools: event.tools, state: "READY" } : c
+            (c) => c.sessionId === event.sessionId ? { ...c, tools: event.tools, state: "READY", updatedAt: /* @__PURE__ */ new Date() } : c
           );
         }
         case "auth_required": {
@@ -412,8 +422,9 @@ function useMcp(options) {
             serverName: s.serverName ?? "Unknown Server",
             serverUrl: s.serverUrl,
             transport: s.transport,
-            state: s.active === false ? "AUTHENTICATING" : "VALIDATING",
+            state: getInitialConnectionState(s.status),
             createdAt: new Date(s.createdAt),
+            updatedAt: new Date(s.updatedAt ?? s.createdAt),
             tools: []
           }))
         );
@@ -422,7 +433,7 @@ function useMcp(options) {
         sessions.map(async (session) => {
           if (clientRef.current) {
             try {
-              if (session.active === false) {
+              if (session.status !== "active") {
                 return;
               }
               suppressAuthRedirectSessionsRef.current.add(session.sessionId);
@@ -493,11 +504,11 @@ function useMcp(options) {
   const disconnectSSE = react.useCallback(() => {
     clientRef.current?.disconnect();
   }, []);
-  const finishAuth = react.useCallback(async (sessionId, code) => {
+  const finishAuth = react.useCallback(async (state, code) => {
     if (!clientRef.current) {
       throw new Error("SSE client not initialized");
     }
-    return await clientRef.current.finishAuth(sessionId, code);
+    return await clientRef.current.finishAuth(state, code);
   }, []);
   const resumeAuth = react.useCallback(async (sessionId) => {
     if (!clientRef.current) {
@@ -621,6 +632,27 @@ function useMcp(options) {
     ]
   );
 }
+var OAUTH_STATE_SEPARATOR = ".";
+nanoid.customAlphabet(
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  1
+);
+nanoid.customAlphabet(
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
+  11
+);
+function parseOAuthState(state) {
+  const separatorIndex = state.indexOf(OAUTH_STATE_SEPARATOR);
+  if (separatorIndex <= 0 || separatorIndex === state.length - 1) {
+    return void 0;
+  }
+  const nonce = state.slice(0, separatorIndex);
+  const sessionId = state.slice(separatorIndex + 1);
+  if (!nonce || !sessionId || sessionId.includes(OAUTH_STATE_SEPARATOR)) {
+    return void 0;
+  }
+  return { nonce, sessionId };
+}
 var AUTH_CODE_MESSAGE = "MCP_AUTH_CODE";
 var AUTH_RESULT_MESSAGE = "MCP_AUTH_RESULT";
 var AUTH_CHANNEL_NAME = "mcp-auth-channel";
@@ -699,9 +731,10 @@ function useMcpOAuthPopup(connections, finishAuth) {
         return;
       }
       const popupWindow = event.source && "postMessage" in event.source ? event.source : null;
-      const targetSessionId = typeof event.data.sessionId === "string" ? event.data.sessionId : "";
+      const rawState = typeof event.data.state === "string" ? event.data.state : typeof event.data.sessionId === "string" ? event.data.sessionId : "";
+      const targetSessionId = rawState ? parseOAuthState(rawState)?.sessionId || rawState : "";
       if (popupWindow && targetSessionId) {
-        pendingPopupsRef.current.set(targetSessionId, popupWindow);
+        pendingPopupsRef.current.set(targetSessionId, { popupWindow, state: rawState });
       }
       if (!targetSessionId) {
         if (popupWindow) {
@@ -717,6 +750,7 @@ function useMcpOAuthPopup(connections, finishAuth) {
         if (popupWindow) {
           postPopupResult(popupWindow, {
             sessionId: targetSessionId,
+            state: rawState,
             success: false,
             error: "OAuth session not found in the current client state"
           });
@@ -729,13 +763,14 @@ function useMcpOAuthPopup(connections, finishAuth) {
       }
       processingCodesRef.current.add(codeKey);
       try {
-        await finishAuth(targetSession.sessionId, code);
+        await finishAuth(rawState, code);
       } catch (error) {
         processingCodesRef.current.delete(codeKey);
         pendingPopupsRef.current.delete(targetSession.sessionId);
         if (popupWindow) {
           postPopupResult(popupWindow, {
-            sessionId: targetSession.sessionId,
+            sessionId: rawState,
+            state: rawState,
             success: false,
             error: error instanceof Error ? error.message : "Failed to finish auth"
           });
@@ -758,10 +793,13 @@ function useMcpOAuthPopup(connections, finishAuth) {
   }, [connections, finishAuth]);
   react.useEffect(() => {
     for (const connection of connections) {
-      const popupWindow = pendingPopupsRef.current.get(connection.sessionId) || null;
+      const pendingPopup = pendingPopupsRef.current.get(connection.sessionId);
+      const popupWindow = pendingPopup?.popupWindow || null;
+      const resultState = pendingPopup?.state || connection.sessionId;
       if (connection.state === "AUTHENTICATED" || connection.state === "READY" || connection.state === "CONNECTED") {
         postPopupResult(popupWindow, {
-          sessionId: connection.sessionId,
+          sessionId: resultState,
+          state: resultState,
           success: true
         });
         for (const codeKey of processingCodesRef.current) {
@@ -774,7 +812,8 @@ function useMcpOAuthPopup(connections, finishAuth) {
       }
       if (connection.state === "FAILED") {
         postPopupResult(popupWindow, {
-          sessionId: connection.sessionId,
+          sessionId: resultState,
+          state: resultState,
           success: false,
           error: connection.error || "Failed to complete authorization"
         });
@@ -826,7 +865,8 @@ function McpOAuthCallbackContent({
       if (event.data?.type !== AUTH_RESULT_MESSAGE) {
         return;
       }
-      if (event.data.sessionId !== sessionId) {
+      const resultState = typeof event.data.state === "string" ? event.data.state : typeof event.data.sessionId === "string" ? event.data.sessionId : "";
+      if (resultState !== sessionId) {
         return;
       }
       if (event.data.success) {
@@ -843,7 +883,7 @@ function McpOAuthCallbackContent({
     };
     window.addEventListener("message", handleResult);
     channel?.addEventListener("message", handleResult);
-    const payload = { type: AUTH_CODE_MESSAGE, code, sessionId };
+    const payload = { type: AUTH_CODE_MESSAGE, code, state: sessionId, sessionId };
     if (window.opener) {
       try {
         window.opener.postMessage(payload, window.location.origin);