Implementation:FlowiseAI Flowise AddEditCredentialDialog

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

Overview

AddEditCredentialDialog is a React dialog component that provides a form for creating and editing credentials, including support for OAuth2 authorization flows.

Description

This component renders a Material UI Dialog portaled into the #portal DOM element. In ADD mode, it initializes with empty fields and the provided credential component definition. In EDIT mode, it fetches the existing credential data from the backend, populating name and credential fields while respecting redacted values. The dialog displays the component credential's icon, a description parsed as HTML, a name input, dynamic credential input fields rendered via CredentialInputHandler, and an OAuth2 redirect URL field with an Authenticate button for OAuth2-type credentials. The OAuth2 flow opens a popup window for authorization and listens for success/error messages via window.postMessage. Shared credentials display a read-only warning banner and disable editing.

Usage

Use this component whenever a user needs to add a new credential or edit an existing one, either from the Credentials dashboard or inline from a canvas node configuration.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/credentials/AddEditCredentialDialog.jsx
• Lines: 1-517

Signature

const AddEditCredentialDialog = ({ show, dialogProps, onCancel, onConfirm, setError }) => {
    // ...
}

Import

import AddEditCredentialDialog from '@/views/credentials/AddEditCredentialDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls the visibility of the dialog
dialogProps	object	Yes	Configuration object with type ('ADD' or 'EDIT'), data or credentialId, credentialComponent, confirmButtonName, and cancelButtonName
onCancel	func	Yes	Callback invoked when the dialog is cancelled or closed
onConfirm	func	Yes	Callback invoked on successful create/save with the credential ID
setError	func	No	Callback to propagate errors to the parent component

Outputs

Name	Type	Description
Portal-rendered Dialog	ReactPortal	A Material UI Dialog rendered into the #portal DOM element with credential form fields

Usage Examples

Basic Usage

<AddEditCredentialDialog
    show={showDialog}
    dialogProps={{
        type: 'ADD',
        cancelButtonName: 'Cancel',
        confirmButtonName: 'Add',
        credentialComponent: selectedCredentialComponent
    }}
    onCancel={() => setShowDialog(false)}
    onConfirm={(credentialId) => handleCredentialAdded(credentialId)}
    setError={setError}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Credential_Management