@mcp-ts/sdk 2.3.3 → 2.4.0

package/dist/client/react.mjs

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, memo, useCallback, useMemo } from 'react';
-import { nanoid } from 'nanoid';
+import { customAlphabet, nanoid } from 'nanoid';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { AppBridge, PostMessageTransport } from '@modelcontextprotocol/ext-apps/app-bridge';
 
@@ -48,8 +48,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 });
@@ -251,6 +251,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 {
@@ -308,26 +322,21 @@ function useMcp(options) {
   }, [url, userId, authToken, autoConnect, autoInitialize]);
   const updateConnectionsFromEvent = 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 {
@@ -343,8 +352,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: []
               }
             ];
@@ -355,7 +365,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": {
@@ -410,8 +420,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: []
           }))
         );
@@ -420,7 +431,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);
@@ -491,11 +502,11 @@ function useMcp(options) {
   const disconnectSSE = useCallback(() => {
     clientRef.current?.disconnect();
   }, []);
-  const finishAuth = useCallback(async (sessionId, code) => {
+  const finishAuth = 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 = useCallback(async (sessionId) => {
     if (!clientRef.current) {
@@ -619,6 +630,27 @@ function useMcp(options) {
     ]
   );
 }
+var OAUTH_STATE_SEPARATOR = ".";
+customAlphabet(
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  1
+);
+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";
@@ -697,9 +729,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) {
@@ -715,6 +748,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"
           });
@@ -727,13 +761,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"
           });
@@ -756,10 +791,13 @@ function useMcpOAuthPopup(connections, finishAuth) {
   }, [connections, finishAuth]);
   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) {
@@ -772,7 +810,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"
         });
@@ -824,7 +863,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) {
@@ -841,7 +881,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);