Implementation:FlowiseAI Flowise CredentialInputHandler

Knowledge Sources	FlowiseAI Flowise
Domains	Canvas, Credentials
Last Updated	2026-02-12 07:00 GMT

Overview

CredentialInputHandler is a canvas-side React component that provides an asynchronous dropdown for selecting, creating, and editing credentials within a node's configuration panel.

Description

This component renders an AsyncDropdown pre-populated with existing credentials that match the node's required credential names. It supports creating new credentials by opening either a CredentialListDialog (when multiple credential types are available) or an AddEditCredentialDialog (when only one type is available). An edit button is also displayed next to the dropdown when a credential is selected and the user has update permissions. The component manages its state for the selected credential ID, dialog visibility, and reload timestamps to force dropdown refresh after credential changes. Permission checks are performed via the useAuth hook.

Usage

Use this component inside canvas node configuration forms where a node requires credential input. It is rendered when a node's input parameter has type === 'credential' and provides the full workflow for credential selection and management without leaving the canvas.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/canvas/CredentialInputHandler.jsx
• Lines: 1-153

Signature

const CredentialInputHandler = ({ inputParam, data, onSelect, disabled = false }) => { ... }

export default CredentialInputHandler

Import

import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'

I/O Contract

Inputs

Name	Type	Required	Description
inputParam	object	Yes	The input parameter definition; must have type === 'credential' and a credentialNames array
data	object	Yes	The node data object containing existing credential selection (via data.credential or data.inputs[FLOWISE_CREDENTIAL_ID])
onSelect	function	Yes	Callback invoked with the selected credential ID when a credential is chosen or created
disabled	boolean	No	Whether the dropdown is disabled (defaults to false)

Outputs

Name	Type	Description
Rendered JSX	React Element	An AsyncDropdown with optional edit button, plus conditionally rendered AddEditCredentialDialog and CredentialListDialog
onSelect callback	void	Invoked with the selected credential ID string when a credential is selected or newly created

Usage Examples

Basic Usage

import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'

<CredentialInputHandler
  inputParam={{
    type: 'credential',
    name: 'credential',
    credentialNames: ['openAIApi']
  }}
  data={nodeData}
  onSelect={(credentialId) => handleCredentialSelect(credentialId)}
  disabled={false}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Credential_Management