@stigmer/react 0.0.76 → 0.0.78

package/mcp-server/useMcpServerOAuthConnect.js

@@ -0,0 +1,187 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { InitiateOAuthConnectInputSchema, CompleteOAuthConnectInputSchema, ConnectInputSchema, } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+/**
+ * Message type posted by {@link OAuthCallbackHandler} to the opener window.
+ *
+ * @internal
+ */
+export const OAUTH_CALLBACK_MESSAGE_TYPE = "stigmer:oauth:callback";
+const POPUP_WIDTH = 600;
+const POPUP_HEIGHT = 700;
+const POPUP_CALLBACK_TIMEOUT_MS = 120_000;
+/**
+ * Action hook that orchestrates the full OAuth popup flow for MCP servers.
+ *
+ * Handles the complete lifecycle:
+ * 1. Calls `initiateOAuthConnect` to get the authorization URL
+ * 2. Opens a popup window to the OAuth consent screen
+ * 3. Listens for the callback via `window.postMessage`
+ * 4. Calls `completeOAuthConnect` to exchange the code for tokens
+ * 5. Chains to `connect` for tool discovery
+ *
+ * The popup is opened **synchronously** before the `initiateOAuthConnect`
+ * RPC to avoid browser popup blockers. A blank page is shown briefly
+ * while the RPC resolves, then the popup navigates to the auth URL.
+ *
+ * @example
+ * ```tsx
+ * const oauth = useMcpServerOAuthConnect();
+ * const { refetch } = useMcpServer(org, slug);
+ *
+ * async function handleSignIn() {
+ *   try {
+ *     await oauth.startOAuth(mcpServer.metadata.id);
+ *     refetch();
+ *   } catch {
+ *     // error is available via oauth.error
+ *   }
+ * }
+ *
+ * <button onClick={handleSignIn} disabled={oauth.isInProgress}>
+ *   {oauth.isInProgress ? "Signing in..." : "Sign in with OAuth"}
+ * </button>
+ * ```
+ */
+export function useMcpServerOAuthConnect() {
+    const stigmer = useStigmer();
+    const [phase, setPhase] = useState("idle");
+    const [error, setError] = useState(null);
+    const popupRef = useRef(null);
+    const cleanupRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            cleanupRef.current?.();
+        };
+    }, []);
+    const clearError = useCallback(() => {
+        setPhase("idle");
+        setError(null);
+    }, []);
+    const startOAuth = useCallback(async (mcpServerId) => {
+        setPhase("initiating");
+        setError(null);
+        cleanupRef.current?.();
+        const left = window.screenX + (window.outerWidth - POPUP_WIDTH) / 2;
+        const top = window.screenY + (window.outerHeight - POPUP_HEIGHT) / 2;
+        const popup = window.open("about:blank", "stigmer_oauth", `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},popup=yes`);
+        if (!popup) {
+            const blocked = new Error("Your browser blocked the authentication popup. " +
+                "Please allow popups for this site and try again.");
+            setError(blocked);
+            setPhase("idle");
+            throw blocked;
+        }
+        popupRef.current = popup;
+        try {
+            const initOutput = await stigmer.mcpServer.initiateOAuthConnect(create(InitiateOAuthConnectInputSchema, { mcpServerId }));
+            popup.location.href = initOutput.authorizationUrl;
+            setPhase("awaiting-callback");
+            const { code, state } = await waitForOAuthCallback(popup, initOutput.state, (dispose) => {
+                cleanupRef.current = dispose;
+            });
+            setPhase("completing");
+            await stigmer.mcpServer.completeOAuthConnect(create(CompleteOAuthConnectInputSchema, {
+                mcpServerId,
+                authorizationCode: code,
+                state,
+            }));
+            setPhase("connecting");
+            const server = await stigmer.mcpServer.connect(create(ConnectInputSchema, { mcpServerId }));
+            setPhase("done");
+            return server;
+        }
+        catch (err) {
+            const wrapped = toError(err);
+            setError(wrapped);
+            setPhase("idle");
+            closePopup(popup);
+            throw wrapped;
+        }
+        finally {
+            popupRef.current = null;
+            cleanupRef.current = null;
+        }
+    }, [stigmer]);
+    return {
+        startOAuth,
+        isInProgress: phase !== "idle" && phase !== "done",
+        phase,
+        error,
+        clearError,
+    };
+}
+// ---------------------------------------------------------------------------
+// Popup callback listener
+// ---------------------------------------------------------------------------
+function waitForOAuthCallback(popup, expectedState, onDispose) {
+    return new Promise((resolve, reject) => {
+        let settled = false;
+        let timeoutId;
+        let pollId;
+        function cleanup() {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            if (pollId)
+                clearInterval(pollId);
+            window.removeEventListener("message", onMessage);
+        }
+        function settle(outcome) {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            if (outcome instanceof Error) {
+                reject(outcome);
+            }
+            else {
+                resolve(outcome);
+            }
+        }
+        onDispose(() => {
+            settle(new Error("OAuth flow was cancelled."));
+            closePopup(popup);
+        });
+        function onMessage(event) {
+            if (event.origin !== window.location.origin)
+                return;
+            const data = event.data;
+            if (data?.type !== OAUTH_CALLBACK_MESSAGE_TYPE)
+                return;
+            if (data.state !== expectedState) {
+                settle(new Error("OAuth state mismatch — the callback did not match the " +
+                    "initiated flow. Please try again."));
+                return;
+            }
+            if (!data.code) {
+                settle(new Error("No authorization code received from the OAuth provider."));
+                return;
+            }
+            settle({ code: data.code, state: data.state });
+        }
+        window.addEventListener("message", onMessage);
+        timeoutId = setTimeout(() => {
+            settle(new Error("OAuth authentication timed out. Ensure your callback page " +
+                "renders <OAuthCallbackHandler /> from @stigmer/react at " +
+                "the URL configured as your OAuth redirect URI."));
+            closePopup(popup);
+        }, POPUP_CALLBACK_TIMEOUT_MS);
+        pollId = setInterval(() => {
+            if (popup.closed) {
+                settle(new Error("The authentication window was closed before completing sign-in."));
+            }
+        }, 500);
+    });
+}
+function closePopup(popup) {
+    try {
+        popup?.close();
+    }
+    catch {
+        // Cross-origin popup may throw on close — safe to ignore.
+    }
+}
+//# sourceMappingURL=useMcpServerOAuthConnect.js.map

package/mcp-server/useMcpServerOAuthConnect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMcpServerOAuthConnect.js","sourceRoot":"","sources":["../../src/mcp-server/useMcpServerOAuthConnect.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stigmer/react",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "React provider and client hook for the Stigmer platform SDK",
   "license": "Apache-2.0",
   "type": "module",
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@stigmer/theme": "0.0.76",
+    "@stigmer/theme": "0.0.78",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "yaml": "^2.8.2"
@@ -43,8 +43,8 @@
   "peerDependencies": {
     "@base-ui/react": "^1.0.0",
     "@bufbuild/protobuf": "^2.0.0",
-    "@stigmer/protos": "0.0.76",
-    "@stigmer/sdk": "0.0.76",
+    "@stigmer/protos": "0.0.78",
+    "@stigmer/sdk": "0.0.78",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

package/src/index.ts

@@ -211,7 +211,7 @@ export type {
   SessionComposerSubmitContext,
 } from "./composer";
 
-// MCP Server — data hook, count hook, list hook, search hook, picker, config panel, tool selector, detail view, and setup orchestration
+// MCP Server — data hook, count hook, list hook, search hook, picker, config panel, tool selector, detail view, setup orchestration, and OAuth connect
 export {
   useMcpServer,
   useMcpServerCount,
@@ -219,7 +219,9 @@ export {
   useMcpServerSearch,
   useMcpServerSetup,
   useMcpServerConnect,
+  useMcpServerOAuthConnect,
   useMcpServerCredentials,
+  OAuthCallbackHandler,
   McpServerPicker,
   McpServerConfigPanel,
   McpServerDetailView,
@@ -243,11 +245,17 @@ export type {
   McpServerSetupIntegration,
   McpServerConfigPanelProps,
   McpServerCredentialsProps,
+  McpServerOAuthSignInProps,
   McpServerDetailViewProps,
   CapabilityTab,
   McpToolSelectorProps,
   UseMcpServerConnectReturn,
+  UseMcpServerOAuthConnectReturn,
+  OAuthConnectPhase,
+  OAuthCallbackHandlerProps,
+  OAuthCallbackParams,
   UseMcpServerCredentialsReturn,
+  McpServerAuthMode,
 } from "./mcp-server";
 
 // Skill — data hook, count hook, list hook, search hook, picker, and detail view component

package/src/mcp-server/McpServerConfigPanel.tsx

@@ -12,6 +12,7 @@ import {
   type EnvVarFormSubmitOptions,
 } from "../environment/EnvVarForm";
 import { McpToolSelector } from "./McpToolSelector";
+import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect";
 
 // ---------------------------------------------------------------------------
 // Credential sub-props
@@ -54,6 +55,29 @@ export interface McpServerCredentialsProps {
   readonly poolValues?: (key: string) => EnvVarInput | undefined;
 }
 
+// ---------------------------------------------------------------------------
+// OAuth sign-in sub-props
+// ---------------------------------------------------------------------------
+
+/**
+ * Props for the inline OAuth sign-in action shown when a server requires
+ * OAuth authentication. Presence controls rendering — when `oauthSignIn`
+ * is provided on {@link McpServerConfigPanelProps}, the OAuth button
+ * is rendered above the credentials form.
+ */
+export interface McpServerOAuthSignInProps {
+  /** Initiates the OAuth popup flow. Must be called from a click handler. */
+  readonly onSignIn: () => void;
+  /** Current phase of the OAuth flow. */
+  readonly phase: OAuthConnectPhase;
+  /** `true` when the OAuth token already exists in the personal environment. */
+  readonly isConnected: boolean;
+  /** Error from the most recent failed OAuth attempt, or `null`. */
+  readonly error: Error | null;
+  /** Clear the OAuth error state. */
+  readonly onClearError: () => void;
+}
+
 // ---------------------------------------------------------------------------
 // Component props
 // ---------------------------------------------------------------------------
@@ -71,6 +95,14 @@ export interface McpServerConfigPanelProps {
    * step 2 (tool customization).
    */
   readonly credentials?: McpServerCredentialsProps;
+  /**
+   * When provided, an inline OAuth sign-in button is rendered above the
+   * credentials form. The button initiates the popup-based OAuth flow.
+   *
+   * Use alongside `credentials` for mixed-mode servers that require
+   * both OAuth and manual env vars, or on its own for OAuth-only servers.
+   */
+  readonly oauthSignIn?: McpServerOAuthSignInProps;
   /** Discovered tools from `status.discovered_capabilities.tools`. */
   readonly discoveredTools: DiscoveredTool[];
   /** Approval policies from `status.tool_approvals` and `spec.pinned_tool_approvals`. */
@@ -141,6 +173,7 @@ export interface McpServerConfigPanelProps {
 export function McpServerConfigPanel({
   mcpServer,
   credentials,
+  oauthSignIn,
   discoveredTools,
   toolApprovals,
   enabledTools,
@@ -155,6 +188,13 @@ export function McpServerConfigPanel({
   const description = mcpServer.spec?.description;
   const isDisabled = disabled || credentials?.isSubmitting;
 
+  const isOAuthBusy = oauthSignIn
+    ? oauthSignIn.phase === "initiating" ||
+      oauthSignIn.phase === "awaiting-callback" ||
+      oauthSignIn.phase === "completing" ||
+      oauthSignIn.phase === "connecting"
+    : false;
+
   const handleCredentialSubmit = useCallback(
     (values: Record<string, EnvVarInput>, options: EnvVarFormSubmitOptions) => {
       credentials?.onSubmit(values, options);
@@ -173,7 +213,7 @@ export function McpServerConfigPanel({
         <button
           type="button"
           onClick={onBack}
-          disabled={credentials?.isSubmitting}
+          disabled={credentials?.isSubmitting || isOAuthBusy}
           className={cn(
             "mt-0.5 shrink-0 rounded p-0.5",
             "text-muted-foreground hover:text-foreground hover:bg-accent/50",
@@ -208,13 +248,25 @@ export function McpServerConfigPanel({
         </div>
       </div>
 
+      {/* OAuth sign-in — shown when the server requires OAuth authentication */}
+      {oauthSignIn && (
+        <InlineOAuthSignIn
+          serverName={serverName}
+          isConnected={oauthSignIn.isConnected}
+          phase={oauthSignIn.phase}
+          onSignIn={oauthSignIn.onSignIn}
+          error={oauthSignIn.error}
+          onClearError={oauthSignIn.onClearError}
+        />
+      )}
+
       {/* Credentials form — only when credentials prop is provided */}
       {credentials && (
         <EnvVarForm
           variables={credentials.variables}
           onSubmit={handleCredentialSubmit}
           isSubmitting={credentials.isSubmitting}
-          disabled={disabled}
+          disabled={disabled || isOAuthBusy}
           title="Credentials required"
           defaultSaveForFuture={credentials.defaultSaveForFuture}
           hideSaveToggle={credentials.hideSaveToggle}
@@ -239,12 +291,110 @@ export function McpServerConfigPanel({
         toolApprovals={toolApprovals}
         enabledTools={enabledTools}
         onChange={onEnabledToolsChange}
-        disabled={!!isDisabled || !!credentials}
+        disabled={!!isDisabled || !!credentials || isOAuthBusy}
       />
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Inline OAuth sign-in (compact, for config panel context)
+// ---------------------------------------------------------------------------
+
+function InlineOAuthSignIn({
+  serverName,
+  isConnected,
+  phase,
+  onSignIn,
+  error,
+  onClearError,
+}: {
+  readonly serverName: string;
+  readonly isConnected: boolean;
+  readonly phase: OAuthConnectPhase;
+  readonly onSignIn: () => void;
+  readonly error: Error | null;
+  readonly onClearError: () => void;
+}) {
+  const isBusy =
+    phase === "initiating" ||
+    phase === "awaiting-callback" ||
+    phase === "completing" ||
+    phase === "connecting";
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <span
+          className={cn(
+            "inline-flex items-center gap-1 text-[0.65rem] font-medium",
+            isConnected ? "text-success" : "text-muted-foreground",
+          )}
+        >
+          <span
+            className={cn(
+              "size-1.5 rounded-full",
+              isConnected ? "bg-success" : "bg-muted-foreground",
+            )}
+            aria-hidden="true"
+          />
+          {isConnected ? "Signed in" : "Sign-in required"}
+        </span>
+        <button
+          type="button"
+          onClick={onSignIn}
+          disabled={isBusy}
+          className={cn(
+            "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
+            isConnected
+              ? "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+              : "bg-primary text-primary-foreground hover:bg-primary-hover",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          {isBusy ? (
+            <InlineSpinner />
+          ) : isConnected ? (
+            "Re-authenticate"
+          ) : (
+            `Sign in with ${serverName}`
+          )}
+        </button>
+      </div>
+      {error && (
+        <div className="flex items-start gap-1.5 text-[0.65rem] text-destructive">
+          <span className="flex-1">{error.message}</span>
+          <button
+            type="button"
+            onClick={onClearError}
+            className="shrink-0 underline underline-offset-2 hover:no-underline"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InlineSpinner() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Icons (internal to this module)
 // ---------------------------------------------------------------------------