@inkeep/agents-manage-ui 0.22.12 → 0.23.1

package/src/components/mcp-servers/form/mcp-server-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { MCPTransportType } from '@inkeep/agents-core/client-exports';
+import { detectAuthenticationRequired, MCPTransportType } from '@inkeep/agents-core/client-exports';
 import { nanoid } from 'nanoid';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
@@ -10,6 +10,8 @@ import { GenericInput } from '@/components/form/generic-input';
 import { GenericSelect } from '@/components/form/generic-select';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
+import { InfoCard } from '@/components/ui/info-card';
+import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import type { Credential } from '@/lib/api/credentials';
 import { createMCPTool, updateMCPTool } from '@/lib/api/tools';
 import type { MCPTool } from '@/lib/types/tools';
@@ -40,7 +42,7 @@ const defaultValues: MCPToolFormData = {
     },
   },
   imageUrl: '', // Initialize as empty string to avoid uncontrolled/controlled warning
-  credentialReferenceId: 'none',
+  credentialReferenceId: 'oauth',
 };
 
 export function MCPServerForm({
@@ -61,6 +63,11 @@ export function MCPServerForm({
     },
   });
 
+  const { handleOAuthLogin } = useOAuthLogin({
+    tenantId,
+    projectId,
+  });
+
   const { isSubmitting } = form.formState;
 
   // Helper function to filter active tools against available tools
@@ -73,6 +80,51 @@ export function MCPServerForm({
 
   const onSubmit = async (data: MCPToolFormData) => {
     try {
+      // handle oauth login
+      if (data.credentialReferenceId === 'oauth') {
+        const toolId = nanoid();
+
+        const isAuthenticationRequired = await detectAuthenticationRequired({
+          serverUrl: data.config.mcp.server.url,
+          toolId,
+        });
+
+        if (!isAuthenticationRequired) {
+          toast.error(
+            'This MCP server does not support OAuth authentication. Please select a different credential.'
+          );
+          return;
+        }
+
+        const mcpToolData = {
+          id: toolId,
+          name: data.name,
+          config: {
+            type: 'mcp' as const,
+            mcp: {
+              server: {
+                url: data.config.mcp.server.url,
+              },
+              transport: {
+                type: data.config.mcp.transport.type,
+              },
+            },
+          },
+          credentialReferenceId: null,
+          imageUrl: data.imageUrl,
+        };
+
+        const newTool = await createMCPTool(tenantId, projectId, mcpToolData);
+
+        handleOAuthLogin({
+          toolId: newTool.id,
+          mcpServerUrl: data.config.mcp.server.url,
+          toolName: data.name,
+        });
+
+        return;
+      }
+
       // Transform form data to API format
       const transformedData = {
         ...data,
@@ -142,20 +194,41 @@ export function MCPServerForm({
           label="Image URL (optional)"
           placeholder="https://example.com/icon.png or data:image/png;base64,..."
         />
-        <GenericSelect
-          control={form.control}
-          selectTriggerClassName="w-full"
-          name="credentialReferenceId"
-          label="Credential"
-          placeholder="Select a credential"
-          options={[
-            { value: 'none', label: 'No Authentication' },
-            ...credentials.map((credential) => ({
-              value: credential.id,
-              label: credential.id,
-            })),
-          ]}
-        />
+
+        <div className="space-y-3">
+          <GenericSelect
+            control={form.control}
+            selectTriggerClassName="w-full"
+            name="credentialReferenceId"
+            label="Credential"
+            placeholder="Select a credential"
+            options={[
+              { value: 'oauth', label: 'OAuth' },
+              { value: 'none', label: 'No Authentication' },
+              ...credentials.map((credential) => ({
+                value: credential.id,
+                label: credential.id,
+              })),
+            ]}
+          />
+          <InfoCard title="How this works">
+            <div className="space-y-2">
+              <p>
+                Select <code className="bg-background px-1.5 py-0.5 rounded border">OAuth</code> to
+                authenticate with the MCP server's OAuth flow, which will start after you click
+                "Create".
+              </p>
+              <p>
+                Select{' '}
+                <code className="bg-background px-1.5 py-0.5 rounded border">
+                  No Authentication
+                </code>{' '}
+                to skip authentication (i.e. none required or add a credential later).
+              </p>
+              <p>Or select from the existing credentials you have already created.</p>
+            </div>
+          </InfoCard>
+        </div>
 
         {mode === 'update' && (
           <ActiveToolsSelector

package/src/components/mcp-servers/selection/mcp-server-selection.tsx

@@ -31,9 +31,6 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
   const { handleOAuthLogin } = useOAuthLogin({
     tenantId,
     projectId,
-    onError: () => {
-      setLoadingServerId(undefined);
-    },
   });
 
   const handleSelectPrebuiltServer = async (server: PrebuiltMCPServer) => {
@@ -65,7 +62,7 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
         toast.success(`${server.name} MCP server created successfully`);
         router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
       } else {
-        handleOAuthLogin(newTool.id);
+        handleOAuthLogin({toolId: newTool.id, mcpServerUrl: server.url, toolName: server.name});
       }
     } catch (error) {
       console.error('Failed to create prebuilt MCP server:', error);

package/src/components/mcp-servers/view-mcp-server-details.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Lock, LockOpen, Pencil } from 'lucide-react';
+import { AlertCircle, Lock, LockOpen, Pencil } from 'lucide-react';
 import Link from 'next/link';
 import { Badge } from '@/components/ui/badge';
 import { ExternalLink } from '@/components/ui/external-link';
@@ -69,6 +69,12 @@ export function ViewMCPServerDetails({
     });
   };
 
+  const isExpired = (expiresAt: string | Date | null | undefined): boolean => {
+    if (!expiresAt) return false;
+    const expirationDate = typeof expiresAt === 'string' ? new Date(expiresAt) : expiresAt;
+    return expirationDate < new Date();
+  };
+
   const getStatusBadgeVariant = (status: string) => {
     switch (status) {
       case 'healthy':
@@ -157,27 +163,42 @@ export function ViewMCPServerDetails({
           </div>
         </div>
 
-        <div className="space-y-2">
-          <ItemLabel>Status</ItemLabel>
-          <ItemValue className="items-center">
-            {tool.status === 'needs_auth' ? (
-              <Badge
-                variant="outline"
-                className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/30 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleOAuthLogin(tool.id);
-                }}
-              >
-                Click to Login
-              </Badge>
-            ) : (
-              <Badge className="uppercase" variant={getStatusBadgeVariant(tool.status)}>
-                {tool.status}
-              </Badge>
-            )}
-          </ItemValue>
+        {/* Status and Transport Type */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <ItemLabel>Status</ItemLabel>
+            <ItemValue className="items-center">
+              {tool.status === 'needs_auth' ? (
+                <Badge
+                  variant="outline"
+                  className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/30 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleOAuthLogin({
+                      toolId: tool.id,
+                      mcpServerUrl: tool.config.mcp.server.url,
+                      toolName: tool.name,
+                    });
+                  }}
+                >
+                  Click to Login
+                </Badge>
+              ) : (
+                <Badge className="uppercase" variant={getStatusBadgeVariant(tool.status)}>
+                  {tool.status}
+                </Badge>
+              )}
+            </ItemValue>
+          </div>
+          {(tool.config as any).mcp.transport && (
+            <div className="space-y-2">
+              <ItemLabel>Transport Type</ItemLabel>
+              <ItemValue>
+                {<Badge variant="code">{(tool.config as any).mcp.transport.type}</Badge>}
+              </ItemValue>
+            </div>
+          )}
         </div>
 
         {/* Last Error */}
@@ -191,19 +212,13 @@ export function ViewMCPServerDetails({
         {/* Server URL */}
         <div className="space-y-2">
           <ItemLabel>Server URL</ItemLabel>
-          {tool.config.type === 'mcp' && <CopyableSingleLineCode code={tool.config.mcp.server.url} />}
+          {tool.config.type === 'mcp' && (
+            <CopyableSingleLineCode code={tool.config.mcp.server.url} />
+          )}
         </div>
 
-        {/* Transport and Credential */}
+        {/* Credential Name and Expires At */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {(tool.config as any).mcp.transport && (
-            <div className="space-y-2">
-              <ItemLabel>Transport Type</ItemLabel>
-              <ItemValue>
-                {<Badge variant="code">{(tool.config as any).mcp.transport.type}</Badge>}
-              </ItemValue>
-            </div>
-          )}
           <div className="space-y-2">
             <ItemLabel>Credential</ItemLabel>
             <ItemValue className="items-center">
@@ -228,6 +243,19 @@ export function ViewMCPServerDetails({
               )}
             </ItemValue>
           </div>
+          {tool.expiresAt && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <ItemLabel>Credential Expires At</ItemLabel>
+                {isExpired(tool.expiresAt) && <AlertCircle className="h-4 w-4 text-amber-500" />}
+              </div>
+              <ItemValue>
+                {formatDate(
+                  typeof tool.expiresAt === 'string' ? tool.expiresAt : tool.expiresAt.toISOString()
+                )}
+              </ItemValue>
+            </div>
+          )}
         </div>
 
         {/* Active Tools */}

package/src/hooks/use-nango-connect.ts

@@ -1,8 +1,9 @@
 'use client';
 
-import Nango, { type OnConnectEvent } from '@nangohq/frontend';
+import Nango, { type AuthOptions, type AuthSuccess, type OnConnectEvent } from '@nangohq/frontend';
 import { useCallback } from 'react';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { createProviderConnectSession } from '@/lib/mcp-tools/nango';
 
 type OpenNangoConnectOptions = {
   sessionToken: string;
@@ -40,5 +41,43 @@ export function useNangoConnect() {
     [PUBLIC_NANGO_SERVER_URL, PUBLIC_NANGO_CONNECT_BASE_URL]
   );
 
-  return openNangoConnect;
+  const openNangoConnectHeadless = useCallback(
+    async ({ mcpServerUrl, providerUniqueKey, providerDisplayName }: { mcpServerUrl: string, providerUniqueKey: string, providerDisplayName: string }): Promise<AuthSuccess> => {
+      const providerName = 'mcp-generic';
+      const connectSessionToken = await createProviderConnectSession({
+        providerName,
+        uniqueKey: providerUniqueKey,
+        displayName: providerDisplayName,
+      });
+
+      const nango = new Nango({
+        host: PUBLIC_NANGO_SERVER_URL || undefined,
+        connectSessionToken,
+      });
+
+      try {
+        const authOptions: AuthOptions = {
+          detectClosedAuthWindow: true,
+          params: {
+            mcp_server_url: mcpServerUrl,
+          },
+        };
+
+        const result = await nango.auth(providerUniqueKey, authOptions);
+
+        return result;
+      } catch (error) {
+        if (error instanceof Error) {
+          throw new Error(`Nango headless auth failed: ${error.message}`);
+        }
+        throw error;
+      }
+    },
+    [PUBLIC_NANGO_SERVER_URL]
+  );
+
+  return {
+    openNangoConnect,
+    openNangoConnectHeadless,
+  };
 }

package/src/hooks/use-oauth-login.ts

@@ -1,115 +1,227 @@
+import { CredentialStoreType, generateIdFromName } from '@inkeep/agents-core/client-exports';
 import { useRouter } from 'next/navigation';
+import { useCallback, useRef } from 'react';
 import { toast } from 'sonner';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { listCredentialStores } from '@/lib/api/credentialStores';
+import { updateMCPTool } from '@/lib/api/tools';
+import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
 import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
+import { useNangoConnect } from './use-nango-connect';
 
 interface UseOAuthLoginProps {
   tenantId: string;
   projectId: string;
   onFinish?: (toolId: string) => void;
-  onError?: (error: Error) => void;
 }
 
-export function useOAuthLogin({ tenantId, projectId, onFinish, onError }: UseOAuthLoginProps) {
+interface OAuthLoginResult {
+  handleOAuthLogin: ({
+    toolId,
+    mcpServerUrl,
+    toolName,
+  }: {
+    toolId: string;
+    mcpServerUrl: string;
+    toolName: string;
+  }) => Promise<void>;
+}
+
+export function useOAuthLogin({
+  tenantId,
+  projectId,
+  onFinish,
+}: UseOAuthLoginProps): OAuthLoginResult {
   const router = useRouter();
   const { PUBLIC_INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+  const { openNangoConnectHeadless } = useNangoConnect();
 
   // Track active OAuth attempts to prevent conflicts
-  const activeAttempts = new Map<string, () => void>();
-
-  const handleOAuthLogin = (toolId: string) => {
-    // Clean up any previous attempt for this toolId
-    const existingCleanup = activeAttempts.get(toolId);
-    if (existingCleanup) {
-      existingCleanup();
-      activeAttempts.delete(toolId);
-    }
-    try {
-      const oauthUrl = getOAuthLoginUrl({
-        PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
-        tenantId,
-        projectId,
-        id: toolId,
-      });
+  const activeAttemptsRef = useRef(new Map<string, () => void>());
 
-      const popup = window.open(
-        oauthUrl,
-        'oauth-popup',
-        'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
-      );
-
-      if (!popup) {
-        console.error(`Failed to open popup for ${toolId} - blocked by browser`);
-        return;
-      }
+  const handleOAuthLoginManually = useCallback(
+    (toolId: string): Promise<void> => {
+      return new Promise((resolve, reject) => {
+        // Clean up any previous attempt for this toolId
+        const existingCleanup = activeAttemptsRef.current.get(toolId);
+        if (existingCleanup) {
+          existingCleanup();
+          activeAttemptsRef.current.delete(toolId);
+        }
 
-      // Track completion to prevent duplicate calls
-      let completed = false;
+        try {
+          const oauthUrl = getOAuthLoginUrl({
+            PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
+            tenantId,
+            projectId,
+            id: toolId,
+          });
 
-      // Listen for success PostMessage
-      const handleMessage = (event: MessageEvent) => {
-        if (event.data.type === 'oauth-success' && !completed) {
-          completed = true;
-          window.removeEventListener('message', handleMessage);
+          const popup = window.open(
+            oauthUrl,
+            'oauth-popup',
+            'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
+          );
 
-          // Call custom success handler or default behavior
-          if (onFinish) {
-            onFinish(toolId);
-          } else {
-            router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+          if (!popup) {
+            const error = new Error(`Failed to open popup for ${toolId} - blocked by browser`);
+            console.error(error.message);
+            reject(error);
+            return;
           }
-        }
-      };
 
-      if (popup) {
-        window.addEventListener('message', handleMessage);
-
-        // Backup: Monitor popup closure (for errors or PostMessage failures)
-        // Delay backup monitoring to give PostMessage priority
-        let checkPopupClosed: NodeJS.Timeout | null = null;
-        const backupTimeout = setTimeout(() => {
-          if (!completed) {
-            checkPopupClosed = setInterval(() => {
-              try {
-                if (popup.closed && !completed) {
-                  completed = true;
-                  if (checkPopupClosed) clearInterval(checkPopupClosed);
-                  window.removeEventListener('message', handleMessage);
-                  activeAttempts.delete(toolId);
-
-                  // Call custom success handler or default behavior
-                  if (onFinish) {
-                    onFinish(toolId);
-                  } else {
-                    router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+          // Track completion to prevent duplicate calls
+          let completed = false;
+
+          const completeFlow = (success: boolean, error?: Error) => {
+            if (completed) return;
+            completed = true;
+
+            // Cleanup
+            window.removeEventListener('message', handleMessage);
+            if (checkPopupClosed) clearInterval(checkPopupClosed);
+            clearTimeout(backupTimeout);
+            activeAttemptsRef.current.delete(toolId);
+
+            if (success) {
+              // Call custom success handler or default behavior
+              if (onFinish) {
+                onFinish(toolId);
+              } else {
+                router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+              }
+              resolve();
+            } else {
+              reject(error || new Error('OAuth login failed'));
+            }
+          };
+
+          // Listen for success PostMessage
+          const handleMessage = (event: MessageEvent) => {
+            if (event.data.type === 'oauth-success') {
+              completeFlow(true);
+            } else if (event.data.type === 'oauth-error') {
+              completeFlow(false, new Error(event.data.error || 'OAuth login failed'));
+            }
+          };
+
+          window.addEventListener('message', handleMessage);
+
+          // Backup: Monitor popup closure (for errors or PostMessage failures)
+          let checkPopupClosed: NodeJS.Timeout | null = null;
+          const backupTimeout = setTimeout(() => {
+            if (!completed) {
+              checkPopupClosed = setInterval(() => {
+                try {
+                  if (popup.closed) {
+                    // Assume success if popup closed without error message
+                    completeFlow(true);
                   }
+                } catch {
+                  // Cross-origin errors are expected during OAuth redirects
                 }
-              } catch {
-                // Cross-origin errors are expected during OAuth redirects
-              }
-            }, 1000); // Check every second
-          }
-        }, 3000); // Wait 3 seconds before starting backup monitoring
-
-        // Register cleanup function for this attempt
-        const cleanup = () => {
-          clearTimeout(backupTimeout);
-          if (checkPopupClosed) clearInterval(checkPopupClosed);
-          window.removeEventListener('message', handleMessage);
-          completed = true;
-        };
-        activeAttempts.set(toolId, cleanup);
-      }
-    } catch (error) {
-      const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+              }, 1000);
+            }
+          }, 3000);
 
-      if (onError) {
-        onError(errorObj);
+          // Register cleanup function for this attempt
+          const cleanup = () => {
+            completeFlow(false, new Error('OAuth login cancelled'));
+          };
+          activeAttemptsRef.current.set(toolId, cleanup);
+        } catch (error) {
+          const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+          reject(errorObj);
+        }
+      });
+    },
+    [PUBLIC_INKEEP_AGENTS_MANAGE_API_URL, tenantId, projectId, onFinish, router]
+  );
+
+  const handleOAuthLoginWithNangoMCPGeneric = useCallback(
+    async ({
+      toolId,
+      mcpServerUrl,
+      toolName,
+    }: {
+      toolId: string;
+      mcpServerUrl: string;
+      toolName: string;
+    }): Promise<void> => {
+      const authResult = await openNangoConnectHeadless({
+        mcpServerUrl,
+        providerUniqueKey: `${generateIdFromName(toolName)}_${toolId}`,
+        providerDisplayName: toolName,
+      });
+
+      const newCredentialData = {
+        id: generateIdFromName(toolName),
+        type: CredentialStoreType.nango,
+        credentialStoreId: 'nango-default',
+        retrievalParams: {
+          connectionId: authResult.connectionId,
+          providerConfigKey: authResult.providerConfigKey,
+          provider: 'mcp-generic',
+          authMode: 'OAUTH2',
+        },
+      };
+
+      const newCredential = await findOrCreateCredential(tenantId, projectId, newCredentialData);
+
+      await updateMCPTool(tenantId, projectId, toolId, {
+        credentialReferenceId: newCredential.id,
+      });
+
+      // Call custom success handler or default behavior
+      if (onFinish) {
+        onFinish(toolId);
       } else {
-        toast.error('OAuth login failed. Please try again.');
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
       }
-    }
-  };
+    },
+    [openNangoConnectHeadless, onFinish, router, tenantId, projectId]
+  );
+
+  const handleOAuthLogin = useCallback(
+    async ({
+      toolId,
+      mcpServerUrl,
+      toolName,
+    }: {
+      toolId: string;
+      mcpServerUrl: string;
+      toolName: string;
+    }): Promise<void> => {
+      try {
+        // Check credential stores availability
+        const credentialStoresStatus = await listCredentialStores(tenantId, projectId);
+
+        const isNangoReady = credentialStoresStatus.some(
+          (store) => store.type === CredentialStoreType.nango && store.available
+        );
+
+        const isKeychainReady = credentialStoresStatus.some(
+          (store) => store.type === CredentialStoreType.keychain && store.available
+        );
 
-  return { handleOAuthLogin };
+        // Choose authentication method based on availability
+        if (isNangoReady) {
+          await handleOAuthLoginWithNangoMCPGeneric({ toolId, mcpServerUrl, toolName });
+        } else if (isKeychainReady) {
+          await handleOAuthLoginManually(toolId);
+        } else {
+          throw new Error('No credential store available. Please configure Nango or Keychain.');
+        }
+      } catch (error) {
+        const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+        toast.error(errorObj.message);
+        throw errorObj;
+      }
+    },
+    [tenantId, projectId, handleOAuthLoginWithNangoMCPGeneric, handleOAuthLoginManually]
+  );
+
+  return {
+    handleOAuthLogin,
+  };
 }