feat: adds authentication to mcp server under feature flag #9095
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update introduces project-level authentication settings for MCP (Multi-Cloud Platform) projects. It adds a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Frontend
participant BackendAPI
participant Database
User->>Frontend: Opens MCP project settings
Frontend->>BackendAPI: GET /project/{id}/tools
BackendAPI->>Database: Fetch tools and auth_settings
Database-->>BackendAPI: Return tools, auth_settings
BackendAPI-->>Frontend: Respond with tools, auth_settings
User->>Frontend: Opens AuthModal and updates settings
Frontend->>BackendAPI: PATCH /project/{id}/tools (settings, auth_settings)
BackendAPI->>Database: Update tools, update auth_settings
Database-->>BackendAPI: Confirm update
BackendAPI-->>Frontend: Respond with success
Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
src/frontend/src/modals/toolsModal/components/toolsTable/index.tsx (1)
60-78:useEffectdependency onagGrid.currentis inert.
agGrid.currentis a mutable ref value; React will not track changes to.current, so this effect effectively runs only once.
If you want to resync selection after the grid mounts / re-renders, depend onopenorrowsinstead:-}, [agGrid.current]); +}, [open, rows]);Or move the logic to the grid’s
onGridReadycallback for better encapsulation.
🧹 Nitpick comments (6)
src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx (2)
45-48: Nit:cn()call no longer needs the outer array wrapper.Because only two arguments remain, you can simplify to:
- className={cn( - "flex w-full items-center", - disabled && "cursor-not-allowed" - )} + className={cn("flex w-full items-center", disabled && "cursor-not-allowed")}Slightly easier to read and avoids an unnecessary line break.
70-72: Minor style string – remove leading!unless overriding is required.
"!text-mmd"forces priority over any downstream classNames.
If the override is not strictly necessary, prefer the normal class to keep specificity low:- "absolute -top-8 right-0 !text-mmd font-normal text-muted-foreground group-hover:text-primary" + "absolute -top-8 right-0 text-mmd font-normal text-muted-foreground group-hover:text-primary"src/frontend/src/modals/toolsModal/components/toolsTable/index.tsx (1)
94-101: Redundant 46-char truncation.
sanitizeMcpName(display_name || row.name, 46)already enforces the length; the subsequent.slice(0, 46)is dead work:-).slice(0, 46); +);Same applies to the slug path below. Removes two extra allocations per row.
src/frontend/src/customization/feature-flags.ts (1)
18-18: Flag default should befalsefor safe rollout.Shipping
ENABLE_MCP_AUTH = trueby default enables an unfinished feature for all users.
Recommend defaulting tofalseand enabling per-environment via.envor config to prevent accidental exposure.-export const ENABLE_MCP_AUTH = true; +export const ENABLE_MCP_AUTH = false;src/frontend/src/types/mcp/index.ts (1)
20-23: Optional chaining mis-alignment.
auth_settingsis optional inMCPProjectResponseType, but backend mutation requires a value when auth is enabled.
Consider modelling the invariant more explicitly:type MCPProjectResponseType = | { tools: MCPSettingsType[]; auth_settings: AuthSettingsType } | { tools: MCPSettingsType[]; auth_settings?: undefined };This forces callers to handle both states distinctly.
src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx (1)
88-88: Remove unnecessary trailing comma.- ) + )
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (15)
src/backend/base/langflow/alembic/versions/3162e83e485f_add_auth_settings_to_folder_and_merge.py(1 hunks)src/backend/base/langflow/api/v1/mcp_projects.py(6 hunks)src/backend/base/langflow/api/v1/schemas.py(2 hunks)src/backend/base/langflow/services/database/models/folder/model.py(3 hunks)src/frontend/package.json(1 hunks)src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx(2 hunks)src/frontend/src/components/ui/radio-group.tsx(1 hunks)src/frontend/src/controllers/API/queries/mcp/use-get-flows-mcp.ts(3 hunks)src/frontend/src/controllers/API/queries/mcp/use-patch-flows-mcp.ts(2 hunks)src/frontend/src/customization/feature-flags.ts(1 hunks)src/frontend/src/modals/authModal/index.tsx(1 hunks)src/frontend/src/modals/toolsModal/components/toolsTable/index.tsx(7 hunks)src/frontend/src/modals/toolsModal/index.tsx(2 hunks)src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx(14 hunks)src/frontend/src/types/mcp/index.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
src/frontend/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/frontend_development.mdc
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/frontend_development.mdc
src/frontend/{package*.json,tsconfig.json,tailwind.config.*,vite.config.*}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/frontend_development.mdc
src/frontend/src/components/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/frontend_development.mdc
src/frontend/src/{components,hooks}/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/frontend_development.mdc
src/backend/**/*.py
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/backend_development.mdc
src/backend/base/langflow/services/database/models/**/*.py
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/backend_development.mdc
🧠 Learnings (9)
src/frontend/package.json (6)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/{package*.json,tsconfig.json,tailwind.config.*,vite.config.*} : Frontend configuration files such as 'package.json', 'tsconfig.json', 'tailwind.config.*', and 'vite.config.*' must be present and properly maintained in 'src/frontend/'.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx,js,jsx,css,scss} : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx (7)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*.{ts,tsx} : All components must be styled using Tailwind CSS utility classes.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx,js,jsx,css,scss} : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: All UI components must be styled using Tailwind CSS utility classes, with support for different variants and sizes implemented via conditional className logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-06-30T14:41:58.849Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Frontend tests should validate input/output behavior and component state changes.
Learnt from: namastex888
PR: langflow-ai/langflow#9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.228Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
src/frontend/src/modals/toolsModal/index.tsx (4)
Learnt from: namastex888
PR: langflow-ai/langflow#9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.228Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
src/frontend/src/modals/toolsModal/components/toolsTable/index.tsx (4)
Learnt from: namastex888
PR: langflow-ai/langflow#9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.228Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-06-30T14:41:58.849Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Frontend tests should validate input/output behavior and component state changes.
src/backend/base/langflow/services/database/models/folder/model.py (1)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/backend_development.mdc:0-0
Timestamp: 2025-06-30T14:39:17.464Z
Learning: Applies to src/backend/base/langflow/services/database/models/**/*.py : Place database models in src/backend/base/langflow/services/database/models/ and its subdirectories
src/frontend/src/controllers/API/queries/mcp/use-patch-flows-mcp.ts (1)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Error handling for API calls in React should be abstracted into custom hooks (e.g., useApi), which manage loading and error state and expose an execute function for invoking the API.
src/frontend/src/components/ui/radio-group.tsx (10)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/**/__tests__/**/*.test.{ts,tsx} : All frontend components must have associated tests using React Testing Library.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*FlowGraph.tsx : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*.{ts,tsx} : All components must be styled using Tailwind CSS utility classes.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isdark` prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx,js,jsx,css,scss} : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
src/frontend/src/modals/authModal/index.tsx (3)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: namastex888
PR: langflow-ai/langflow#9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.228Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx (3)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Error handling for API calls in React should be abstracted into custom hooks (e.g., useApi), which manage loading and error state and expose an execute function for invoking the API.
Learnt from: namastex888
PR: langflow-ai/langflow#9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.228Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
🧬 Code Graph Analysis (5)
src/frontend/src/modals/toolsModal/index.tsx (2)
src/frontend/src/components/ui/sidebar.tsx (1)
SidebarProvider(773-773)src/frontend/src/modals/toolsModal/components/toolsTable/index.tsx (1)
ToolsTable(22-410)
src/backend/base/langflow/services/database/models/folder/model.py (1)
src/backend/base/langflow/schema/table.py (1)
Column(33-91)
src/frontend/src/controllers/API/queries/mcp/use-get-flows-mcp.ts (1)
src/frontend/src/types/mcp/index.ts (1)
MCPProjectResponseType(20-23)
src/backend/base/langflow/api/v1/schemas.py (1)
src/backend/base/langflow/__main__.py (1)
api_key(733-780)
src/frontend/src/components/ui/radio-group.tsx (1)
src/frontend/src/utils/utils.ts (1)
cn(36-38)
🔇 Additional comments (18)
src/frontend/package.json (1)
18-18: Dependency addition looks good; double-check tree-shaking impact.
@radix-ui/react-radio-groupis side-effect free, but increases bundle size (~8 kB gzip).
Confirm that the component is code-split or otherwise tree-shaken in production builds to avoid unnecessary payload for users that have the feature flag disabled.src/frontend/src/modals/toolsModal/components/toolsTable/index.tsx (1)
176-180: Potential tag parsing edge-case.When
isActionis false and the tool hastags = [],tags.join(", ")yields an empty string;parseString([], …)will then return"", leading to a blank slug.
Consider falling back to the tool name to avoid empty identifier values.src/backend/base/langflow/services/database/models/folder/model.py (3)
5-5: LGTM: JSON import added correctlyThe
JSONimport fromsqlmodelis properly added to support the newauth_settingsfield.
14-18: LGTM: auth_settings field implementation is solidThe
auth_settingsfield is well-implemented with:
- Appropriate
JSONcolumn type for flexible configuration storage- Nullable field to support existing data without migration issues
- Clear description explaining its purpose
- Proper SQLModel field definition
61-61: LGTM: FolderUpdate model correctly includes auth_settingsThe
auth_settingsfield is properly added to theFolderUpdatemodel, enabling updates to authentication settings.src/frontend/src/modals/toolsModal/index.tsx (2)
40-40: LGTM: Function parameter cleanupTrailing comma removed from the
refparameter for cleaner code formatting.
76-90: LGTM: Layout structure improvementThe additional flex column wrapper enhances the modal's layout structure without affecting functionality. The nested flex container provides better control over the modal's content organization.
src/frontend/src/controllers/API/queries/mcp/use-get-flows-mcp.ts (3)
2-2: LGTM: Type import updated for enhanced response structureThe import change from
MCPSettingsTypetoMCPProjectResponseTypecorrectly reflects the updated API response that now includes both tools and authentication settings.
11-11: LGTM: Response type alias updated consistentlyThe type alias correctly changes from array type to object type matching the new
MCPProjectResponseTypestructure.
27-27: LGTM: Error fallback maintains response structure consistencyThe error fallback correctly returns an object with
toolsarray andauth_settingsfield, maintaining consistency with the expected response type.src/backend/base/langflow/alembic/versions/3162e83e485f_add_auth_settings_to_folder_and_merge.py (2)
21-39: LGTM: Well-structured migration with proper safety checksThe migration implementation demonstrates excellent practices:
- Proper table existence verification before schema changes
- Column existence checks to prevent duplicate operations
- Safe batch operations for schema alterations
- Appropriate use of JSON column type for auth_settings
41-58: LGTM: Proper downgrade implementationThe downgrade function correctly reverses the migration by:
- Checking table existence before attempting changes
- Verifying column existence before removal
- Using batch operations for safe schema rollback
src/frontend/src/components/ui/radio-group.tsx (2)
5-16: LGTM: RadioGroup component follows established patternsThe
RadioGroupcomponent is well-implemented with:
- Proper TypeScript typing using
React.ComponentProps- Tailwind CSS styling with
cnutility for class mergingdata-slotattribute for testing/targeting- Appropriate grid layout with gap spacing
17-38: LGTM: RadioGroupItem with comprehensive styling and accessibilityThe
RadioGroupItemcomponent demonstrates excellent practices:
- Comprehensive Tailwind CSS styling including focus states, disabled states, and dark mode support
- Proper accessibility through Radix UI primitives
- Centered indicator with lucide-react icon
- Consistent
data-slotattributes for testing- Well-structured component composition
src/frontend/src/controllers/API/queries/mcp/use-patch-flows-mcp.ts (1)
1-49: LGTM! Clean implementation of the enhanced mutation hook.The changes properly extend the mutation to handle both flow settings and authentication settings in a single request. The TypeScript interfaces are well-defined and the mutation logic remains clean.
src/backend/base/langflow/api/v1/schemas.py (1)
466-478: Well-structured request/response models.The
MCPProjectUpdateRequestandMCPProjectResponsemodels properly encapsulate the project-level authentication settings alongside flow settings.src/backend/base/langflow/api/v1/mcp_projects.py (2)
127-133: LGTM! Proper handling of auth_settings retrieval.The code correctly extracts auth_settings from the project's JSON field and constructs an AuthSettings object. The conditional check ensures it only processes when auth_settings exist.
256-262: Well-implemented project auth settings update.The code properly handles updating project-level authentication settings:
- Correctly serializes the Pydantic model to dict using
model_dump()- Handles the case where auth_settings is None
- Updates are part of the same transaction as flow updates
| export type AuthSettingsType = { | ||
| auth_type: string; | ||
| api_key?: string; | ||
| username?: string; | ||
| password?: string; | ||
| bearer_token?: string; | ||
| iam_endpoint?: string; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make auth_type a strict union to prevent invalid values.
Instead of a free-form string, constrain the field to supported auth mechanisms (e.g., "api_key" | "basic" | "bearer" | "iam").
This surfaces typos at compile time and tightens API contracts.
-export type AuthSettingsType = {
- auth_type: string;
+export type AuthSettingsType = {
+ auth_type: "api_key" | "basic" | "bearer" | "iam";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export type AuthSettingsType = { | |
| auth_type: string; | |
| api_key?: string; | |
| username?: string; | |
| password?: string; | |
| bearer_token?: string; | |
| iam_endpoint?: string; | |
| }; | |
| export type AuthSettingsType = { | |
| auth_type: "api_key" | "basic" | "bearer" | "iam"; | |
| api_key?: string; | |
| username?: string; | |
| password?: string; | |
| bearer_token?: string; | |
| iam_endpoint?: string; | |
| }; |
🤖 Prompt for AI Agents
In src/frontend/src/types/mcp/index.ts lines 1 to 8, change the type of the
auth_type field from a general string to a strict union of allowed string
literals such as "api_key", "basic", "bearer", and "iam". This will enforce
valid values at compile time and prevent invalid or misspelled auth_type values.
| class AuthSettings(BaseModel): | ||
| """Model representing authentication settings for MCP.""" | ||
|
|
||
| auth_type: str = "none" | ||
| api_key: str | None = None | ||
| username: str | None = None | ||
| password: str | None = None | ||
| bearer_token: str | None = None | ||
| iam_endpoint: str | None = None | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add validation for auth_type field and secure password handling.
The AuthSettings model needs improvements:
- Add validation to ensure
auth_typeonly accepts valid values - Consider using
SecretStrfor sensitive fields
+from pydantic import SecretStr
+from typing import Literal
class AuthSettings(BaseModel):
"""Model representing authentication settings for MCP."""
- auth_type: str = "none"
+ auth_type: Literal["none", "apikey", "userpass", "bearer", "iam"] = "none"
api_key: str | None = None
username: str | None = None
- password: str | None = None
- bearer_token: str | None = None
+ password: SecretStr | None = None
+ bearer_token: SecretStr | None = None
iam_endpoint: str | None = NoneThis ensures type safety and prevents sensitive data from being accidentally logged or exposed in error messages.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class AuthSettings(BaseModel): | |
| """Model representing authentication settings for MCP.""" | |
| auth_type: str = "none" | |
| api_key: str | None = None | |
| username: str | None = None | |
| password: str | None = None | |
| bearer_token: str | None = None | |
| iam_endpoint: str | None = None | |
| from pydantic import SecretStr | |
| from typing import Literal | |
| class AuthSettings(BaseModel): | |
| """Model representing authentication settings for MCP.""" | |
| auth_type: Literal["none", "apikey", "userpass", "bearer", "iam"] = "none" | |
| api_key: str | None = None | |
| username: str | None = None | |
| password: SecretStr | None = None | |
| bearer_token: SecretStr | None = None | |
| iam_endpoint: str | None = None |
🤖 Prompt for AI Agents
In src/backend/base/langflow/api/v1/schemas.py around lines 443 to 452, the
AuthSettings model lacks validation for the auth_type field and does not
securely handle sensitive fields. Add validation to restrict auth_type to a set
of allowed values using Pydantic's validator or Literal type. Replace the
password field type with Pydantic's SecretStr to ensure sensitive data is
protected from accidental logging or exposure.
| API Key or Token | ||
| </Label> | ||
| <Input | ||
| id="password" |
There was a problem hiding this comment.
Fix incorrect input ID attribute.
The input element has id="password" but should be id="iam-api-key" to match its purpose and avoid duplicate IDs.
- id="password"
+ id="iam-api-key"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| id="password" | |
| id="iam-api-key" |
🤖 Prompt for AI Agents
In src/frontend/src/modals/authModal/index.tsx at line 223, the input element
has an incorrect id attribute set to "password". Change this id to "iam-api-key"
to correctly reflect the input's purpose and prevent duplicate IDs in the DOM.
| const handleSave = () => { | ||
| const authSettingsToSave: AuthSettingsType = { | ||
| auth_type: authType, | ||
| ...(authType === "apikey" && { api_key: authFields.apiKey }), | ||
| ...(authType === "userpass" && { | ||
| username: authFields.username, | ||
| password: authFields.password, | ||
| }), | ||
| ...(authType === "iam" && { | ||
| iam_endpoint: authFields.iamEndpoint, | ||
| api_key: authFields.apiKey, | ||
| }), | ||
| ...(authType === "bearer" && { bearer_token: authFields.bearerToken }), | ||
| }; | ||
|
|
||
| onSave(authSettingsToSave); | ||
| setOpen(false); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add validation before saving authentication settings.
The handleSave function should validate that required fields are populated based on the selected authentication type before saving.
const handleSave = () => {
+ // Validate required fields based on auth type
+ if (authType === "apikey" && !authFields.apiKey) {
+ // Consider showing an error message
+ return;
+ }
+ if (authType === "userpass" && (!authFields.username || !authFields.password)) {
+ return;
+ }
+ if (authType === "bearer" && !authFields.bearerToken) {
+ return;
+ }
+ if (authType === "iam" && (!authFields.iamEndpoint || !authFields.apiKey)) {
+ return;
+ }
+
const authSettingsToSave: AuthSettingsType = {
auth_type: authType,
...(authType === "apikey" && { api_key: authFields.apiKey }),
...(authType === "userpass" && {
username: authFields.username,
password: authFields.password,
}),
...(authType === "iam" && {
iam_endpoint: authFields.iamEndpoint,
api_key: authFields.apiKey,
}),
...(authType === "bearer" && { bearer_token: authFields.bearerToken }),
};
onSave(authSettingsToSave);
setOpen(false);
};Consider also adding visual feedback (e.g., error states on inputs) to guide users.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleSave = () => { | |
| const authSettingsToSave: AuthSettingsType = { | |
| auth_type: authType, | |
| ...(authType === "apikey" && { api_key: authFields.apiKey }), | |
| ...(authType === "userpass" && { | |
| username: authFields.username, | |
| password: authFields.password, | |
| }), | |
| ...(authType === "iam" && { | |
| iam_endpoint: authFields.iamEndpoint, | |
| api_key: authFields.apiKey, | |
| }), | |
| ...(authType === "bearer" && { bearer_token: authFields.bearerToken }), | |
| }; | |
| onSave(authSettingsToSave); | |
| setOpen(false); | |
| }; | |
| const handleSave = () => { | |
| // Validate required fields based on auth type | |
| if (authType === "apikey" && !authFields.apiKey) { | |
| // Consider showing an error message | |
| return; | |
| } | |
| if (authType === "userpass" && (!authFields.username || !authFields.password)) { | |
| return; | |
| } | |
| if (authType === "bearer" && !authFields.bearerToken) { | |
| return; | |
| } | |
| if (authType === "iam" && (!authFields.iamEndpoint || !authFields.apiKey)) { | |
| return; | |
| } | |
| const authSettingsToSave: AuthSettingsType = { | |
| auth_type: authType, | |
| ...(authType === "apikey" && { api_key: authFields.apiKey }), | |
| ...(authType === "userpass" && { | |
| username: authFields.username, | |
| password: authFields.password, | |
| }), | |
| ...(authType === "iam" && { | |
| iam_endpoint: authFields.iamEndpoint, | |
| api_key: authFields.apiKey, | |
| }), | |
| ...(authType === "bearer" && { bearer_token: authFields.bearerToken }), | |
| }; | |
| onSave(authSettingsToSave); | |
| setOpen(false); | |
| }; |
🤖 Prompt for AI Agents
In src/frontend/src/modals/authModal/index.tsx between lines 61 and 78, the
handleSave function currently saves authentication settings without validating
required fields for each auth type. Add validation logic before calling onSave
to ensure all necessary fields for the selected authType are populated. If
validation fails, prevent saving and update the component state to reflect error
states on the relevant input fields, providing visual feedback to guide users in
correcting the input.
src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
Show resolved
Hide resolved
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
…ai#9095) * init auth forms * Add iam endpoint * Add radix radio * Add radio group UI element * Add IAM endpoint to types * Add auth modal * Remove auth from tools component * Add auth modal to mcp server tab * Add placeholders to fields * Add dynamic headers * changed authentication name * CHanged paddings * Added header and button under feature flag * [autofix.ci] apply automated fixes * update api key form field * add credential handling and fix feature flag * Update autologin condition * design update * style updates * ci details * revert ci logs * test update, ff name update, and username + pass -> basic * restore ci * default fix * added iam endpoint * add oauth * remove secretstr * updated backend test and schema * updated test * updated test user can update * test fix --------- Co-authored-by: Mike Fortman <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This pull request introduces authentication settings (
auth_settings) for MCP (Managed Cloud Projects), including database schema updates, API enhancements, and frontend changes to support the new functionality. Additionally, it includes minor frontend updates and dependency additions.These changes are behind the feature flag
ENABLE_MCP_AUTHBackend Changes
Database and Migration Updates:
auth_settingscolumn to thefoldertable in the database to store project-level authentication settings. This change includes a new Alembic migration script to handle schema updates. (src/backend/base/langflow/alembic/versions/3162e83e485f_add_auth_settings_to_folder_and_merge.py)FolderBaseandFolderUpdatemodels to include theauth_settingsfield. (src/backend/base/langflow/services/database/models/folder/model.py) [1] [2]API Enhancements:
list_project_toolsendpoint to includeauth_settingsin the response by introducing a newMCPProjectResponsemodel. (src/backend/base/langflow/api/v1/mcp_projects.py) [1] [2]update_project_mcp_settingsendpoint to allow updating project-levelauth_settingsalongside flow settings. (src/backend/base/langflow/api/v1/mcp_projects.py) [1] [2] [3]AuthSettingsmodel to encapsulate authentication-related fields. (src/backend/base/langflow/api/v1/schemas.py) [1] [2]Frontend Changes
Authentication Support:
useGetFlowsMCPandusePatchFlowsMCPhooks to handleauth_settingsin API requests and responses. (src/frontend/src/controllers/API/queries/mcp/use-get-flows-mcp.ts,src/frontend/src/controllers/API/queries/mcp/use-patch-flows-mcp.ts) [1] [2] [3]UI Enhancements:
RadioGroupcomponent using the@radix-ui/react-radio-grouplibrary for improved UI interactions. (src/frontend/src/components/ui/radio-group.tsx)ENABLE_MCP_AUTHfeature flag infeature-flags.tsto toggle MCP authentication functionality. (src/frontend/src/customization/feature-flags.ts)Dependency Updates:
@radix-ui/react-radio-groupto the project dependencies. (src/frontend/package-lock.json,src/frontend/package.json) [1] [2] [3]Minor Frontend Fixes
ToolsComponentfor cleaner code. (src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx) [1] [2]Summary by CodeRabbit
New Features
Enhancements
Bug Fixes / Style
Chores