feat(editor): Simplify NDV by moving authentication details to credentials modal (#5067)

* ⚡ Removing authentication parameter from NDV
* ⚡ Added auth type selector to credentials modal
* 🔨 Extracting reusable logic to util functions
* ⚡ Updating credentials position, adding label for radio buttons
* ⚡ Using first node credentials for nodes with single auth options and hiding auth selector UI in that case
* ⚡ Fixing credentials modal when opened from credentials page
* ⚡ Showing all available credentials in NDV credentials dropdown
* ⚡ Updating node credentials dropdown component to show credentials description. Disabling `Credentials of type not found` error in node
* ⚡ Moving auth related fields from NDV to credentials modal. Added support for multiple auth fileds
* ⚡ Moving NDV fields that authentication depends on to credentials modal
* ⚡ Keeping old auth/credentials UI in NDV for HTTP Request and Webhook nodes. Pre-populating credential type for HTTP request node when selected from 'app action' menu
* 💄 Use old label and field position for nodes that use old credentials UI in NDV
* ⚡ Implementing more generic way to find node's auth fileds
* 📚 Adding comments on parameter hiding logic
* ⚡ Fixing node auth options logic for multiple auth fields
* 👕 Fixing lint errors
* 💄 Addressing design review comments
* ⚡ Not selecting first auth option when opening new credential dialog
* ⚡ Using default credentials name and icon if authentication type is not selected
* ⚡ Updating credential data when auth type is changed
* ⚡ Setting new credentials type for HTTP Request and Webhook nodes
* ⚡ Setting nodes with access when changing auth type
* 👕 Fixing lint error
* ⚡ Updating active node auth type from credentials modal
* ⚡ Syncronizing credentials modal and dropdown
* 👕 Fixing linter error
* ⚡ Handling credential dropdown UI for multiple credentials
* 👕 Removing unused imports
* ⚡ Handling auth selection when default auth type is the first option
* ⚡ Updating credentials change listening logic
* ⚡ Resetting credential data when deleting a credential, disabling 'Details' and 'Sharing' tabs if auth type is not selected
* 🐛 Skipping credentials type check when showing mixed credentials in the dropdown and switching credentials type
* ⚡ Showing credential modal tabs for saved credentials
* ⚡ Preventing renaming credentials when no auth type is selected
* 🐛 Fixing credentials modal when opened from credentials page
* ⚡ Keeping auth radio buttons selected when switching tabs
* ✅ Adding initial batch of credentials NDV tests
* ⚡ Updating node auth filed value when new credential type is selected
* ⚡ Using all available credential types for current node to sync credential dropdown with modal
* ⚡ Sorting mixed credentials by date, simplifying credential dropdown option logic
* 🔨 Extracting some reusable logic to utils
* ⚡ Improving required vs optional credentials detection and using it to show auth radio buttons
* 👕 Fixing lint errors
* ✅ Adding more credentials tests
* ⚡ Filtering credential options based on authentication type
* 🔨 Refactoring credentials and auth utils
* ⚡ Updated handling of auth options in credentials modal to work with new logic
* 🔨 Getting the terminology in line
* 📚 Removing leftover comment
* ⚡ Updating node auth filed detection logic to account for different edge-cases
* ⚡ Adding Wait node as an exception for new UI
* ⚡ Updating NDV display when auth type changes
* ⚡ Updating default credentials name when auth type changes
* ⚡ Hiding auth settings after credentials are saved
* ⚡ Always showing credentials modal menu tabs
* ⚡ Improving main auth field detection logic so it doesn't account for authentication fields which can have `none` value
* ⚡ Restoring accidentally deleted not existing credential issue logic
* ⚡ Updating other nodes when deleted credentials have been updated
* ⚡ Using filtered auth type list to show or hide radio buttons section in credentials modal
* 👕 Addressing lint error
* 👌 Addressing PR review feedback
* 👕 Fixing lint issues
* ⚡ Updating main auth filed detection logic so it checks full dependency path to determine if the field is required or optional
* 👌 Addressing the rest of PR feedback
* ✅ Updating credential tests
* ⚡ Resetting credential data on authentication type change
* ⚡ Created AuthTypeSelector component
* 👌 Addressing PR comments
* ⚡ Not resetting overwritten credential properties when changing auth type
* ⚡ Hiding auth selector section if there are no options to show

cypress/constants.ts

@@ -7,5 +7,15 @@ export const MANUAL_TRIGGER_NODE_NAME = 'Manual Trigger';
 export const SCHEDULE_TRIGGER_NODE_NAME = 'Schedule Trigger';
 export const CODE_NODE_NAME = 'Code';
 export const SET_NODE_NAME = 'Set';
+export const GMAIL_NODE_NAME = 'Gmail';
+export const TRELLO_NODE_NAME = 'Trello';
+export const NOTION_NODE_NAME = 'Notion';
+export const PIPEDRIVE_NODE_NAME = 'Pipedrive';
+export const HTTP_REQUEST_NODE_NAME = 'HTTP Request';
 
 export const META_KEY = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+
+export const NEW_GOOGLE_ACCOUNT_NAME = 'Gmail account';
+export const NEW_TRELLO_ACCOUNT_NAME = 'Trello account';
+export const NEW_NOTION_ACCOUNT_NAME = 'Notion account';
+export const NEW_QUERY_AUTH_ACCOUNT_NAME = 'Query Auth account';

cypress/e2e/2-credentials.cy.ts

@@ -1,6 +1,9 @@
-import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from '../constants';
+import { HTTP_REQUEST_NODE_TYPE } from './../../packages/editor-ui/src/constants';
+import { NEW_NOTION_ACCOUNT_NAME, NOTION_NODE_NAME, PIPEDRIVE_NODE_NAME, HTTP_REQUEST_NODE_NAME, NEW_QUERY_AUTH_ACCOUNT_NAME } from './../constants';
+import { visit } from 'recast';
+import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD, GMAIL_NODE_NAME, NEW_GOOGLE_ACCOUNT_NAME, NEW_TRELLO_ACCOUNT_NAME, SCHEDULE_TRIGGER_NODE_NAME, TRELLO_NODE_NAME } from '../constants';
 import { randFirstName, randLastName } from '@ngneat/falso';
-import { CredentialsPage, CredentialsModal } from '../pages';
+import { CredentialsPage, CredentialsModal, WorkflowPage, NDV } from '../pages';
 
 const email = DEFAULT_USER_EMAIL;
 const password = DEFAULT_USER_PASSWORD;
@@ -8,6 +11,10 @@ const firstName = randFirstName();
 const lastName = randLastName();
 const credentialsPage = new CredentialsPage();
 const credentialsModal = new CredentialsModal();
+const workflowPage = new WorkflowPage();
+const nodeDetailsView = new NDV();
+
+const NEW_CREDENTIAL_NAME = 'Something else';
 
 describe('Credentials', () => {
 	before(() => {
@@ -83,4 +90,149 @@ describe('Credentials', () => {
 		credentialsPage.getters.credentialCards().eq(0).should('contain.text', 'Notion');
 		credentialsPage.actions.sortBy('nameAsc');
 	});
+
+	it('should create credentials from NDV for node with multiple auth options', () => {
+		workflowPage.actions.visit();
+		cy.waitForLoad();
+		workflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		workflowPage.actions.addNodeToCanvas(GMAIL_NODE_NAME);
+		workflowPage.getters.canvasNodes().last().click();
+		cy.get('body').type('{enter}');
+		workflowPage.getters.nodeCredentialsSelect().click();
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().click();
+		credentialsModal.getters.credentialsEditModal().should('be.visible');
+		credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
+		credentialsModal.getters.credentialAuthTypeRadioButtons().first().click();
+		credentialsModal.actions.fillCredentialsForm();
+		cy.get('.el-message-box').find('button').contains('Close').click();
+		workflowPage.getters.nodeCredentialsSelect().should('contain', NEW_GOOGLE_ACCOUNT_NAME);
+	})
+
+	it('should show multiple credential types in the same dropdown', () => {
+		workflowPage.actions.visit();
+		cy.waitForLoad();
+		workflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		workflowPage.actions.addNodeToCanvas(GMAIL_NODE_NAME);
+		workflowPage.getters.canvasNodes().last().click();
+		cy.get('body').type('{enter}');
+		workflowPage.getters.nodeCredentialsSelect().click();
+		// Add oAuth credentials
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().click();
+		credentialsModal.getters.credentialsEditModal().should('be.visible');
+		credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
+		credentialsModal.getters.credentialAuthTypeRadioButtons().first().click();
+		credentialsModal.actions.fillCredentialsForm();
+		cy.get('.el-message-box').find('button').contains('Close').click();
+		workflowPage.getters.nodeCredentialsSelect().click();
+		// Add Service account credentials
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().click();
+		credentialsModal.getters.credentialsEditModal().should('be.visible');
+		credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
+		credentialsModal.getters.credentialAuthTypeRadioButtons().last().click();
+		credentialsModal.actions.fillCredentialsForm();
+		// Both (+ the 'Create new' option) should be in the dropdown
+		workflowPage.getters.nodeCredentialsSelect().find('li').should('have.length.greaterThan', 3);
+	});
+
+	it('should correctly render required and optional credentials', () => {
+		workflowPage.actions.visit();
+		cy.waitForLoad();
+		workflowPage.actions.addNodeToCanvas(PIPEDRIVE_NODE_NAME, true);
+		cy.get('body').type('{downArrow}');
+		cy.get('body').type('{enter}');
+		// Select incoming authentication
+		nodeDetailsView.getters.parameterInput('incomingAuthentication').should('exist');
+		nodeDetailsView.getters.parameterInput('incomingAuthentication').click();
+		nodeDetailsView.getters.parameterInput('incomingAuthentication').find('li').first().click();
+		// There should be two credential fields
+		workflowPage.getters.nodeCredentialsSelect().should('have.length', 2);
+
+		workflowPage.getters.nodeCredentialsSelect().first().click();
+		workflowPage.getters.nodeCredentialsSelect().first().find('li').last().click();
+		// This one should show auth type selector
+		credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
+		cy.get('body').type('{esc}');
+
+		workflowPage.getters.nodeCredentialsSelect().last().click();
+		workflowPage.getters.nodeCredentialsSelect().last().find('li').last().click();
+		// This one should not show auth type selector
+		credentialsModal.getters.credentialsAuthTypeSelector().should('not.exist');
+	});
+
+	it('should create credentials from NDV for node with no auth options', () => {
+		workflowPage.actions.visit();
+		cy.waitForLoad();
+		workflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		workflowPage.actions.addNodeToCanvas(TRELLO_NODE_NAME);
+		workflowPage.getters.canvasNodes().last().click();
+		cy.get('body').type('{enter}');
+		workflowPage.getters.nodeCredentialsSelect().click();
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().click();
+		credentialsModal.getters.credentialsAuthTypeSelector().should('not.exist');
+		credentialsModal.actions.fillCredentialsForm();
+		workflowPage.getters.nodeCredentialsSelect().should('contain', NEW_TRELLO_ACCOUNT_NAME);
+	});
+
+	it('should delete credentials from NDV', () => {
+		workflowPage.actions.visit();
+		cy.waitForLoad();
+		workflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME);
+		workflowPage.getters.canvasNodes().last().click();
+		cy.get('body').type('{enter}');
+		workflowPage.getters.nodeCredentialsSelect().click();
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().click();
+		credentialsModal.actions.fillCredentialsForm();
+		workflowPage.getters.nodeCredentialsSelect().should('contain', NEW_NOTION_ACCOUNT_NAME);
+
+		workflowPage.getters.nodeCredentialsEditButton().click();
+		credentialsModal.getters.credentialsEditModal().should('be.visible');
+		credentialsModal.getters.deleteButton().click();
+		cy.get('.el-message-box').find('button').contains('Yes').click();
+		workflowPage.getters.successToast().contains('Credential deleted');
+		workflowPage.getters.nodeCredentialsSelect().should('not.contain', NEW_TRELLO_ACCOUNT_NAME);
+	});
+
+	it('should rename credentials from NDV', () => {
+		workflowPage.actions.visit();
+		cy.waitForLoad();
+		workflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		workflowPage.actions.addNodeToCanvas(TRELLO_NODE_NAME);
+		workflowPage.getters.canvasNodes().last().click();
+		cy.get('body').type('{enter}');
+		workflowPage.getters.nodeCredentialsSelect().click();
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().click();
+		credentialsModal.actions.fillCredentialsForm();
+		workflowPage.getters.nodeCredentialsSelect().should('contain', NEW_TRELLO_ACCOUNT_NAME);
+
+		workflowPage.getters.nodeCredentialsEditButton().click();
+		credentialsModal.getters.credentialsEditModal().should('be.visible');
+		credentialsModal.getters.name().click();
+		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME);
+		credentialsModal.getters.saveButton().click();
+		credentialsModal.getters.closeButton().click();
+		workflowPage.getters.nodeCredentialsSelect().should('contain', NEW_CREDENTIAL_NAME);
+	});
+
+	it('should setup generic authentication for HTTP node', () => {
+		workflowPage.actions.visit();
+		cy.waitForLoad();
+		workflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		workflowPage.actions.addNodeToCanvas(HTTP_REQUEST_NODE_NAME);
+		workflowPage.getters.canvasNodes().last().click();
+		cy.get('body').type('{enter}');
+		nodeDetailsView.getters.parameterInput('authentication').click();
+		nodeDetailsView.getters.parameterInput('authentication').find('li').should('have.length', 3);
+		nodeDetailsView.getters.parameterInput('authentication').find('li').last().click();
+		nodeDetailsView.getters.parameterInput('genericAuthType').should('exist');
+		nodeDetailsView.getters.parameterInput('genericAuthType').click();
+		nodeDetailsView.getters.parameterInput('genericAuthType').find('li').should('have.length.greaterThan', 0);
+		nodeDetailsView.getters.parameterInput('genericAuthType').find('li').last().click();
+
+		workflowPage.getters.nodeCredentialsSelect().should('exist');
+		workflowPage.getters.nodeCredentialsSelect().click();
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().click();
+		credentialsModal.actions.fillCredentialsForm();
+		workflowPage.getters.nodeCredentialsSelect().should('contain', NEW_QUERY_AUTH_ACCOUNT_NAME);
+	});
 });

cypress/pages/modals/credentials-modal.ts

@@ -19,7 +19,12 @@ export class CredentialsModal extends BasePage {
 		nameInput: () => cy.getByTestId('credential-name').find('input'),
 		// Saving of the credentials takes a while on the CI so we need to increase the timeout
 		saveButton: () => cy.getByTestId('credential-save-button', { timeout: 5000 }),
+		deleteButton: () => cy.getByTestId('credential-delete-button'),
 		closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(),
+		credentialsEditModal: () => cy.getByTestId('credential-edit-dialog'),
+		credentialsAuthTypeSelector: () => cy.getByTestId('node-auth-type-selector'),
+		credentialAuthTypeRadioButtons: () => this.getters.credentialsAuthTypeSelector().find('label[role=radio]'),
+		credentialInputs: () => cy.getByTestId('credential-connection-parameter'),
 	};
 	actions = {
 		setName: (name: string) => {
@@ -41,5 +46,19 @@ export class CredentialsModal extends BasePage {
 		close: () => {
 			this.getters.closeButton().click();
 		},
+		fillCredentialsForm: () => {
+			this.getters.credentialsEditModal().should('be.visible');
+			this.getters.credentialInputs().should('have.length.greaterThan', 0);
+			this.getters.credentialInputs().find('input[type=text], input[type=password]').each(($el) => {
+				cy.wrap($el).type('test');
+			});
+			this.getters.saveButton().click();
+			this.getters.closeButton().click();
+		},
+		renameCredential: (newName: string) => {
+			this.getters.nameInput().type('{selectall}');
+			this.getters.nameInput().type(newName);
+			this.getters.nameInput().type('{enter}');
+		}
 	};
 }

cypress/pages/workflow.ts

@@ -75,6 +75,11 @@ export class WorkflowPage extends BasePage {
 		zoomOutButton: () => cy.getByTestId('zoom-out-button'),
 		resetZoomButton: () => cy.getByTestId('reset-zoom-button'),
 		executeWorkflowButton: () => cy.getByTestId('execute-workflow-button'),
+		nodeCredentialsSelect: () => cy.getByTestId('node-credentials-select'),
+		nodeCredentialsEditButton: () => cy.getByTestId('credential-edit-button'),
+		nodeCreatorItems: () => cy.getByTestId('item-iterator-item'),
+		ndvParameters: () => cy.getByTestId('parameter-item'),
+		nodeCredentialsLabel: () => cy.getByTestId('credentials-label'),
 	};
 	actions = {
 		visit: () => {

packages/editor-ui/src/Interface.ts

@@ -1,3 +1,4 @@
+import { CREDENTIAL_EDIT_MODAL_KEY } from './constants';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { IMenuItem } from 'n8n-design-system';
 import {
@@ -37,6 +38,7 @@ import {
 	INodeListSearchItems,
 	NodeParameterValueType,
 	INodeActionTypeDescription,
+	IDisplayOptions,
 	IAbstractEventMessage,
 } from 'n8n-workflow';
 import { FAKE_DOOR_FEATURES } from './constants';
@@ -1093,14 +1095,26 @@ export interface ITagsState {
 	fetchedUsageCount: boolean;
 }
 
-export interface IModalState {
+export type Modals =
+	| {
+			[key: string]: ModalState;
+	  }
+	| {
+			[CREDENTIAL_EDIT_MODAL_KEY]: NewCredentialsModal;
+	  };
+
+export type ModalState = {
 	open: boolean;
 	mode?: string | null;
 	data?: Record<string, unknown>;
 	activeId?: string | null;
 	curlCommand?: string;
 	httpNodeParameters?: string;
-}
+};
+
+export type NewCredentialsModal = ModalState & {
+	showAuthSelector?: boolean;
+};
 
 export type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema' | 'html';
 export type NodePanelType = 'input' | 'output';
@@ -1148,28 +1162,12 @@ export interface NDVState {
 	};
 }
 
-export interface IUiState {
-	sidebarMenuCollapsed: boolean;
-	modalStack: string[];
-	modals: {
-		[key: string]: IModalState;
-	};
-	isPageLoading: boolean;
-	currentView: string;
-	fakeDoorFeatures: IFakeDoor[];
-	nodeViewInitialized: boolean;
-	addFirstStepOnLoad: boolean;
-	executionSidebarAutoRefresh: boolean;
-}
-
 export interface UIState {
 	activeActions: string[];
 	activeCredentialType: string | null;
 	sidebarMenuCollapsed: boolean;
 	modalStack: string[];
-	modals: {
+	modals: Modals;
-		[key: string]: IModalState;
-	};
 	isPageLoading: boolean;
 	currentView: string;
 	mainPanelPosition: number;
@@ -1463,3 +1461,9 @@ export type UsageState = {
 		managementToken?: string;
 	};
 };
+
+export type NodeAuthenticationOption = {
+	name: string;
+	value: string;
+	displayOptions?: IDisplayOptions;
+};

packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import { IUpdateInformation, NodeAuthenticationOption } from '@/Interface';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import {
+	getAuthTypeForNodeCredential,
+	getNodeAuthFields,
+	getNodeAuthOptions,
+	isAuthRelatedParameter,
+} from '@/utils';
+import { INodeProperties, INodeTypeDescription, NodeParameterValue } from 'n8n-workflow';
+import { computed, onMounted, ref } from 'vue';
+import Vue from 'vue';
+
+export interface Props {
+	credentialType: Object;
+}
+
+const emit = defineEmits<{
+	(event: 'authTypeChanged', value: string): void;
+}>();
+
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+
+const props = defineProps<Props>();
+
+const selected = ref('');
+const authRelatedFieldsValues = ref({} as { [key: string]: NodeParameterValue });
+
+onMounted(() => {
+	if (activeNodeType.value?.credentials) {
+		const credentialsForType =
+			activeNodeType.value.credentials.find((cred) => cred.name === props.credentialType.name) ||
+			null;
+		const authOptionForCred = getAuthTypeForNodeCredential(
+			activeNodeType.value,
+			credentialsForType,
+		);
+		selected.value = authOptionForCred?.value || '';
+	}
+
+	// Populate default values of related fields
+	authRelatedFields.value.forEach((field) => {
+		Vue.set(authRelatedFieldsValues.value, field.name, field.default);
+	});
+});
+
+const activeNodeType = computed<INodeTypeDescription | null>(() => {
+	const activeNode = ndvStore.activeNode;
+	if (activeNode) {
+		return nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
+	}
+	return null;
+});
+
+const authOptions = computed<NodeAuthenticationOption[]>(() => {
+	return getNodeAuthOptions(activeNodeType.value);
+});
+
+const filteredNodeAuthOptions = computed<NodeAuthenticationOption[]>(() => {
+	return authOptions.value.filter((option) => shouldShowAuthOption(option));
+});
+
+// These are node properties that authentication fields depend on
+// (have them in their display options). They all are show here
+// instead of in the NDV
+const authRelatedFields = computed<INodeProperties[]>(() => {
+	const nodeAuthFields = getNodeAuthFields(activeNodeType.value);
+	return (
+		activeNodeType.value?.properties.filter((prop) =>
+			isAuthRelatedParameter(nodeAuthFields, prop),
+		) || []
+	);
+});
+
+function shouldShowAuthOption(option: NodeAuthenticationOption): boolean {
+	// Node auth radio button should be shown if any of the fields that it depends on
+	// has value specified in it's displayOptions.show
+	if (authRelatedFields.value.length === 0) {
+		// If there are no related fields, show option
+		return true;
+	}
+
+	let shouldDisplay = false;
+	Object.keys(authRelatedFieldsValues.value).forEach((fieldName) => {
+		if (option.displayOptions && option.displayOptions.show) {
+			if (
+				option.displayOptions.show[fieldName]?.includes(authRelatedFieldsValues.value[fieldName])
+			) {
+				shouldDisplay = true;
+				return;
+			}
+		}
+	});
+	return shouldDisplay;
+}
+
+function onAuthTypeChange(newType: string): void {
+	emit('authTypeChanged', newType);
+}
+
+function valueChanged(data: IUpdateInformation): void {
+	Vue.set(authRelatedFieldsValues.value, data.name, data.value);
+}
+
+defineExpose({
+	onAuthTypeChange,
+});
+</script>
+
+<template>
+	<div v-if="filteredNodeAuthOptions.length > 0" data-test-id="node-auth-type-selector">
+		<div v-for="parameter in authRelatedFields" :key="parameter.name" class="mb-l">
+			<parameter-input-full
+				:parameter="parameter"
+				:value="authRelatedFieldsValues[parameter.name] || parameter.default"
+				:path="parameter.name"
+				:displayOptions="false"
+				@valueChanged="valueChanged"
+			/>
+		</div>
+		<div>
+			<n8n-input-label
+				:label="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorLabel')"
+				:tooltipText="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorTooltip')"
+				:required="true"
+			/>
+		</div>
+		<el-radio
+			v-for="prop in filteredNodeAuthOptions"
+			:key="prop.value"
+			v-model="selected"
+			:label="prop.value"
+			:class="$style.authRadioButton"
+			border
+			@change="onAuthTypeChange"
+			>{{ prop.name }}</el-radio
+		>
+	</div>
+</template>
+
+<style lang="scss" module>
+.authRadioButton {
+	margin-right: 0 !important;
+	& + & {
+		margin-left: 8px !important;
+	}
+}
+</style>

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.container">
+	<div :class="$style.container" data-test-id="node-credentials-config-container">
 		<banner
 			v-show="showValidationWarning"
 			theme="danger"
@@ -70,6 +70,12 @@
 				</span>
 			</n8n-notice>
 
+			<AuthTypeSelector
+				v-if="showAuthTypeSelector && isNewCredential"
+				:credentialType="credentialType"
+				@authTypeChanged="onAuthTypeChange"
+			/>
+
 			<CopyInput
 				v-if="isOAuthType && credentialProperties.length"
 				:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
@@ -115,14 +121,14 @@
 			@click="$emit('oauth')"
 		/>
 
-		<n8n-text v-if="!credentialType" color="text-base" size="medium">
+		<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
 			{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
 		</n8n-text>
 	</div>
 </template>
 
 <script lang="ts">
-import { ICredentialType } from 'n8n-workflow';
+import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
 import { getAppNameFromCredType, isCommunityPackageName } from '@/utils';
 
 import Banner from '../Banner.vue';
@@ -140,15 +146,21 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
 import { useCredentialsStore } from '@/stores/credentials';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { ICredentialsResponse, IUpdateInformation, NodeAuthenticationOption } from '@/Interface';
+import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import AuthTypeSelector from '@/components/CredentialEdit/AuthTypeSelector.vue';
 import GoogleAuthButton from './GoogleAuthButton.vue';
 
 export default mixins(restApi).extend({
 	name: 'CredentialConfig',
 	components: {
+		AuthTypeSelector,
 		Banner,
 		CopyInput,
 		CredentialInputs,
 		OauthButton,
+		ParameterInputFull,
 		GoogleAuthButton,
 	},
 	props: {
@@ -192,6 +204,13 @@ export default mixins(restApi).extend({
 		requiredPropertiesFilled: {
 			type: Boolean,
 		},
+		mode: {
+			type: String,
+			required: true,
+		},
+		showAuthTypeSelector: {
+			type: Boolean,
+		},
 	},
 	data() {
 		return {
@@ -215,7 +234,22 @@ export default mixins(restApi).extend({
 		);
 	},
 	computed: {
-		...mapStores(useCredentialsStore, useNDVStore, useRootStore, useUIStore, useWorkflowsStore),
+		...mapStores(
+			useCredentialsStore,
+			useNDVStore,
+			useNodeTypesStore,
+			useRootStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		activeNodeType(): INodeTypeDescription | null {
+			const activeNode = this.ndvStore.activeNode;
+
+			if (activeNode) {
+				return this.nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
+			}
+			return null;
+		},
 		appName(): string {
 			if (!this.credentialType) {
 				return '';
@@ -284,8 +318,17 @@ export default mixins(restApi).extend({
 				!this.authError
 			);
 		},
+		isMissingCredentials(): boolean {
+			return this.credentialType === null;
+		},
+		isNewCredential(): boolean {
+			return this.mode === 'new' && !this.credentialId;
+		},
 	},
 	methods: {
+		getCredentialOptions(type: string): ICredentialsResponse[] {
+			return this.credentialsStore.allUsableCredentialsByType[type];
+		},
 		onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void {
 			this.$emit('change', event);
 		},
@@ -297,6 +340,9 @@ export default mixins(restApi).extend({
 				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
+		onAuthTypeChange(newType: string): void {
+			this.$emit('authTypeChanged', newType);
+		},
 	},
 	watch: {
 		showOAuthSuccessBanner(newValue, oldValue) {

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -12,12 +12,12 @@
 			<div :class="$style.header">
 				<div :class="$style.credInfo">
 					<div :class="$style.credIcon">
-						<CredentialIcon :credentialTypeName="credentialTypeName" />
+						<CredentialIcon :credentialTypeName="defaultCredentialTypeName" />
 					</div>
 					<InlineNameEdit
 						:name="credentialName"
 						:subtitle="credentialType ? credentialType.displayName : ''"
-						:readonly="!credentialPermissions.updateName"
+						:readonly="!credentialPermissions.updateName || !credentialType"
 						type="Credential"
 						@input="onNameEdit"
 						data-test-id="credential-name"
@@ -52,7 +52,7 @@
 			<hr />
 		</template>
 		<template #content>
-			<div :class="$style.container">
+			<div :class="$style.container" data-test-id="credential-edit-dialog">
 				<div :class="$style.sidebar">
 					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
 				</div>
@@ -71,10 +71,14 @@
 						:parentTypes="parentTypes"
 						:requiredPropertiesFilled="requiredPropertiesFilled"
 						:credentialPermissions="credentialPermissions"
+						:mode="mode"
+						:selectedCredential="selectedCredential"
+						:showAuthTypeSelector="requiredCredentials"
 						@change="onDataChange"
 						@oauth="oAuthCredentialAuthorize"
 						@retest="retestCredential"
 						@scrollToTop="scrollToTop"
+						@authTypeChanged="onAuthTypeChanged"
 					/>
 				</div>
 				<div v-else-if="activeTab === 'sharing' && credentialType" :class="$style.mainContent">
@@ -107,7 +111,7 @@
 <script lang="ts">
 import Vue from 'vue';
 
-import type { ICredentialsResponse, IUser } from '@/Interface';
+import type { ICredentialsResponse, IUser, NewCredentialsModal } from '@/Interface';
 
 import {
 	CredentialInformation,
@@ -116,6 +120,7 @@ import {
 	ICredentialsDecrypted,
 	ICredentialType,
 	INode,
+	INodeCredentialDescription,
 	INodeParameters,
 	INodeProperties,
 	INodeTypeDescription,
@@ -134,12 +139,11 @@ import CredentialSharing from './CredentialSharing.ee.vue';
 import SaveButton from '../SaveButton.vue';
 import Modal from '../Modal.vue';
 import InlineNameEdit from '../InlineNameEdit.vue';
-import { EnterpriseEditionFeature } from '@/constants';
+import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
 import { IDataObject } from 'n8n-workflow';
 import FeatureComingSoon from '../FeatureComingSoon.vue';
 import { getCredentialPermissions, IPermissions } from '@/permissions';
 import { IMenuItem } from 'n8n-design-system';
-import { BaseTextKey } from '@/plugins/i18n';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
@@ -147,7 +151,13 @@ import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useCredentialsStore } from '@/stores/credentials';
-import { isValidCredentialResponse } from '@/utils';
+import {
+	isValidCredentialResponse,
+	getNodeAuthOptions,
+	getNodeCredentialForSelectedAuthType,
+	updateNodeAuthType,
+	isCredentialModalState,
+} from '@/utils';
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -171,8 +181,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			required: true,
 		},
 		activeId: {
-			type: [String],
+			type: [String, Number],
-			required: true,
+			required: false,
 		},
 		mode: {
 			type: String,
@@ -196,22 +206,21 @@ export default mixins(showMessage, nodeHelpers).extend({
 			testedSuccessfully: false,
 			isRetesting: false,
 			EnterpriseEditionFeature,
+			selectedCredential: '',
+			requiredCredentials: false, // Are credentials required or optional for the node
+			hasUserSpecifiedName: false,
 		};
 	},
 	async mounted() {
-		this.nodeAccess = this.nodesWithAccess.reduce((accu: NodeAccessMap, node: { name: string }) => {
+		this.requiredCredentials =
-			if (this.mode === 'new') {
+			isCredentialModalState(this.uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY]) &&
-				accu[node.name] = { nodeType: node.name }; // enable all nodes by default
+			this.uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].showAuthSelector === true;
-			} else {
-				accu[node.name] = null;
-			}
 
-			return accu;
+		this.setupNodeAccess();
-		}, {});
 
 		if (this.mode === 'new' && this.credentialTypeName) {
 			this.credentialName = await this.credentialsStore.getNewCredentialName({
-				credentialTypeName: this.credentialTypeName,
+				credentialTypeName: this.defaultCredentialTypeName,
 			});
 
 			if (this.currentUser) {
@@ -264,6 +273,38 @@ export default mixins(showMessage, nodeHelpers).extend({
 			useUsersStore,
 			useWorkflowsStore,
 		),
+		activeNodeType(): INodeTypeDescription | null {
+			const activeNode = this.ndvStore.activeNode;
+
+			if (activeNode) {
+				return this.nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
+			}
+			return null;
+		},
+		selectedCredentialType(): INodeCredentialDescription | null {
+			if (this.mode !== 'new') {
+				return null;
+			}
+
+			// If there is already selected type, use it
+			if (this.selectedCredential !== '') {
+				return this.credentialsStore.getCredentialTypeByName(this.selectedCredential);
+			} else if (this.requiredCredentials) {
+				// Otherwise, use credential type that corresponds to the first auth option in the node definition
+				const nodeAuthOptions = getNodeAuthOptions(this.activeNodeType);
+				// But only if there is zero or one auth options available
+				if (nodeAuthOptions.length > 0 && this.activeNodeType?.credentials) {
+					return getNodeCredentialForSelectedAuthType(
+						this.activeNodeType,
+						nodeAuthOptions[0].value,
+					);
+				} else {
+					return this.activeNodeType?.credentials ? this.activeNodeType.credentials[0] : null;
+				}
+			}
+
+			return null;
+		},
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
@@ -282,7 +323,9 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 				return null;
 			}
-
+			if (this.selectedCredentialType) {
+				return this.selectedCredentialType.name;
+			}
 			return `${this.activeId}`;
 		},
 		credentialType(): ICredentialType | null {
@@ -419,6 +462,15 @@ export default mixins(showMessage, nodeHelpers).extend({
 		isSharingAvailable(): boolean {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
+		defaultCredentialTypeName(): string {
+			let credentialTypeName = this.credentialTypeName;
+			if (!credentialTypeName || credentialTypeName === 'null') {
+				if (this.activeNodeType && this.activeNodeType.credentials) {
+					credentialTypeName = this.activeNodeType.credentials[0].name;
+				}
+			}
+			return credentialTypeName || '';
+		},
 	},
 	methods: {
 		async beforeClose() {
@@ -614,6 +666,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 		onNameEdit(text: string) {
 			this.hasUnsavedChanges = true;
+			this.hasUserSpecifiedName = true;
 			this.credentialName = text;
 		},
 
@@ -876,6 +929,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.isDeleting = false;
 			// Now that the credentials were removed check if any nodes used them
 			this.updateNodesCredentialsIssues();
+			this.credentialData = {};
 
 			this.$showMessage({
 				title: this.$locale.baseText('credentialEdit.credentialEdit.showMessage.title'),
@@ -946,6 +1000,50 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			window.addEventListener('message', receiveMessage, false);
 		},
+		async onAuthTypeChanged(type: string): Promise<void> {
+			if (!this.activeNodeType?.credentials) {
+				return;
+			}
+			const credentialsForType = getNodeCredentialForSelectedAuthType(this.activeNodeType, type);
+			if (credentialsForType) {
+				this.selectedCredential = credentialsForType.name;
+				this.resetCredentialData();
+				this.setupNodeAccess();
+				// Update current node auth type so credentials dropdown can be displayed properly
+				updateNodeAuthType(this.ndvStore.activeNode, type);
+				// Also update credential name but only if the default name is still used
+				if (this.hasUnsavedChanges && !this.hasUserSpecifiedName) {
+					const newDefaultName = await this.credentialsStore.getNewCredentialName({
+						credentialTypeName: this.defaultCredentialTypeName,
+					});
+					this.credentialName = newDefaultName;
+				}
+			}
+		},
+		setupNodeAccess(): void {
+			this.nodeAccess = this.nodesWithAccess.reduce(
+				(accu: NodeAccessMap, node: { name: string }) => {
+					if (this.mode === 'new') {
+						accu[node.name] = { nodeType: node.name }; // enable all nodes by default
+					} else {
+						accu[node.name] = null;
+					}
+
+					return accu;
+				},
+				{},
+			);
+		},
+		resetCredentialData(): void {
+			if (!this.credentialType) {
+				return;
+			}
+			for (const property of this.credentialType.properties) {
+				if (!this.credentialType.__overwrittenProperties?.includes(property.name)) {
+					Vue.set(this.credentialData, property.name, property.default as CredentialInformation);
+				}
+			}
+		},
 	},
 });
 </script>

packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue

@@ -227,6 +227,8 @@ const {
 	setAddedNodeActionParameters,
 } = useNodeCreatorStore();
 
+const { getNodeType } = useNodeTypesStore();
+
 const telemetry = instance?.proxy.$telemetry;
 const { categorizedItems: allNodes, isTriggerNode } = useNodeTypesStore();
 const containsAPIAction = computed(
@@ -368,18 +370,26 @@ function onActionSelected(actionCreateElement: INodeCreateElement) {
 	setAddedNodeActionParameters(actionUpdateData, telemetry);
 }
 function addHttpNode() {
+	const app_identifier = state.activeNodeActions?.name;
+	let nodeCredentialType = '';
+	const nodeType = app_identifier ? getNodeType(app_identifier) : null;
+
+	if (nodeType && nodeType.credentials && nodeType.credentials.length > 0) {
+		nodeCredentialType = nodeType.credentials[0].name;
+	}
+
 	const updateData = {
 		name: '',
 		key: HTTP_REQUEST_NODE_TYPE,
 		value: {
 			authentication: 'predefinedCredentialType',
+			nodeCredentialType,
 		},
 	} as IUpdateInformation;
 
 	emit('nodeTypeSelected', [MANUAL_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
 	setAddedNodeActionParameters(updateData, telemetry, false);
 
-	const app_identifier = state.activeNodeActions?.name;
 	$externalHooks().run('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
 	telemetry?.trackNodesPanel('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
 }

packages/editor-ui/src/components/NodeCredentials.vue

@@ -8,17 +8,12 @@
 			:key="credentialTypeDescription.name"
 		>
 			<n8n-input-label
-				:label="
+				:label="getCredentialsFieldLabel(credentialTypeDescription)"
-					$locale.baseText('nodeCredentials.credentialFor', {
-						interpolate: {
-							credentialType: credentialTypeNames[credentialTypeDescription.name],
-						},
-					})
-				"
 				:bold="false"
 				:set="(issues = getIssues(credentialTypeDescription.name))"
 				size="small"
 				color="text-dark"
+				data-test-id="credentials-label"
 			>
 				<div v-if="readonly || isReadOnly">
 					<n8n-input
@@ -27,20 +22,37 @@
 						size="small"
 					/>
 				</div>
-				<div v-else :class="issues.length && !hideIssues ? $style.hasIssues : $style.input">
+				<div
+					v-else
+					:class="issues.length && !hideIssues ? $style.hasIssues : $style.input"
+					data-test-id="node-credentials-select"
+				>
 					<n8n-select
 						:value="getSelectedId(credentialTypeDescription.name)"
-						@change="(value) => onCredentialSelected(credentialTypeDescription.name, value)"
+						@change="
+							(value) =>
+								onCredentialSelected(
+									credentialTypeDescription.name,
+									value,
+									showMixedCredentials(credentialTypeDescription),
+								)
+						"
 						@blur="$emit('blur', 'credentials')"
 						:placeholder="getSelectPlaceholder(credentialTypeDescription.name, issues)"
 						size="small"
 					>
 						<n8n-option
-							v-for="item in getCredentialOptions(credentialTypeDescription.name)"
+							v-for="item in getCredentialOptions(
+								getAllRelatedCredentialTypes(credentialTypeDescription),
+							)"
 							:key="item.id"
 							:label="item.name"
 							:value="item.id"
 						>
+							<div :class="[$style.credentialOption, 'mt-2xs', 'mb-2xs']">
+								<n8n-text bold>{{ item.name }}</n8n-text>
+								<n8n-text size="small">{{ item.typeDisplayName }}</n8n-text>
+							</div>
 						</n8n-option>
 						<n8n-option
 							:key="NEW_CREDENTIALS_TEXT"
@@ -68,6 +80,7 @@
 							selected[credentialTypeDescription.name] &&
 							isCredentialExisting(credentialTypeDescription.name)
 						"
+						data-test-id="credential-edit-button"
 					>
 						<font-awesome-icon
 							icon="pen"
@@ -91,7 +104,14 @@ import {
 	INodeUpdatePropertiesInformation,
 	IUser,
 } from '@/Interface';
-import { ICredentialType, INodeCredentialDescription, INodeCredentialsDetails } from 'n8n-workflow';
+import {
+	ICredentialType,
+	INodeCredentialDescription,
+	INodeCredentialsDetails,
+	INodeParameters,
+	INodeProperties,
+	INodeTypeDescription,
+} from 'n8n-workflow';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
@@ -100,13 +120,26 @@ import { showMessage } from '@/mixins/showMessage';
 import TitledList from '@/components/TitledList.vue';
 
 import mixins from 'vue-typed-mixins';
-import { getCredentialPermissions } from '@/permissions';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useCredentialsStore } from '@/stores/credentials';
+import { useNDVStore } from '@/stores/ndv';
+import { KEEP_AUTH_IN_NDV_FOR_NODES } from '@/constants';
+import {
+	getAuthTypeForNodeCredential,
+	getMainAuthField,
+	getNodeCredentialForSelectedAuthType,
+	getAllNodeCredentialForAuthType,
+	updateNodeAuthType,
+	isRequiredCredential,
+} from '@/utils';
+
+interface CredentialDropdownOption extends ICredentialsResponse {
+	typeDisplayName: string;
+}
 
 export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend({
 	name: 'NodeCredentials',
@@ -122,6 +155,10 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 		overrideCredType: {
 			type: String,
 		},
+		showAll: {
+			type: Boolean,
+			default: false,
+		},
 		hideIssues: {
 			type: Boolean,
 			default: false,
@@ -134,15 +171,101 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 		return {
 			NEW_CREDENTIALS_TEXT: `- ${this.$locale.baseText('nodeCredentials.createNew')} -`,
 			subscribedToCredentialType: '',
+			listeningForAuthChange: false,
 		};
 	},
 	mounted() {
-		this.listenForCredentialUpdates();
+		// Listen for credentials store changes so credential selection can be updated if creds are changed from the modal
+		this.credentialsStore.$onAction(({ name, after, store, args }) => {
+			const listeningForActions = ['createNewCredential', 'updateCredential', 'deleteCredential'];
+			const credentialType = this.subscribedToCredentialType;
+			if (!credentialType) {
+				return;
+			}
+
+			after(async (result) => {
+				if (!listeningForActions.includes(name)) {
+					return;
+				}
+				const current = this.selected[credentialType];
+				let credentialsOfType: ICredentialsResponse[] = [];
+				if (this.showAll) {
+					if (this.node) {
+						credentialsOfType = [
+							...(this.credentialsStore.allUsableCredentialsForNode(this.node) || []),
+						];
+					}
+				} else {
+					credentialsOfType = [
+						...(this.credentialsStore.allUsableCredentialsByType[credentialType] || []),
+					];
+				}
+				switch (name) {
+					// new credential was added
+					case 'createNewCredential':
+						if (result) {
+							this.onCredentialSelected(credentialType, (result as ICredentialsResponse).id);
+						}
+						break;
+					case 'updateCredential':
+						const updatedCredential = result as ICredentialsResponse;
+						// credential name was changed, update it
+						if (updatedCredential.name !== current.name) {
+							this.onCredentialSelected(credentialType, current.id);
+						}
+						break;
+					case 'deleteCredential':
+						// all credentials were deleted
+						if (credentialsOfType.length === 0) {
+							this.clearSelectedCredential(credentialType);
+						} else {
+							const id = args[0].id;
+							// credential was deleted, select last one added to replace with
+							if (current.id === id) {
+								this.onCredentialSelected(
+									credentialType,
+									credentialsOfType[credentialsOfType.length - 1].id,
+								);
+							}
+						}
+						break;
+				}
+			});
+		});
+	},
+	watch: {
+		'node.parameters': {
+			immediate: true,
+			deep: true,
+			handler(newValue: INodeParameters, oldValue: INodeParameters) {
+				// When active node parameters change, check if authentication type has been changed
+				// and set `subscribedToCredentialType` to corresponding credential type
+				const isActive = this.node.name === this.ndvStore.activeNode?.name;
+				const nodeType = this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+				// Only do this for active node and if it's listening for auth change
+				if (isActive && nodeType && this.listeningForAuthChange) {
+					if (this.mainNodeAuthField && oldValue && newValue) {
+						const newAuth = newValue[this.mainNodeAuthField.name];
+
+						if (newAuth) {
+							const credentialType = getNodeCredentialForSelectedAuthType(
+								nodeType,
+								newAuth.toString(),
+							);
+							if (credentialType) {
+								this.subscribedToCredentialType = credentialType.name;
+							}
+						}
+					}
+				}
+			},
+		},
 	},
 	computed: {
 		...mapStores(
 			useCredentialsStore,
 			useNodeTypesStore,
+			useNDVStore,
 			useUIStore,
 			useUsersStore,
 			useWorkflowsStore,
@@ -189,11 +312,39 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 		selected(): { [type: string]: INodeCredentialsDetails } {
 			return this.node.credentials || {};
 		},
+		nodeType(): INodeTypeDescription | null {
+			return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+		},
+		mainNodeAuthField(): INodeProperties | null {
+			return getMainAuthField(this.nodeType);
+		},
 	},
 
 	methods: {
-		getCredentialOptions(type: string): ICredentialsResponse[] {
+		getAllRelatedCredentialTypes(credentialType: INodeCredentialDescription): string[] {
-			return this.credentialsStore.allUsableCredentialsByType[type];
+			const isRequiredCredential = this.showMixedCredentials(credentialType);
+			if (isRequiredCredential) {
+				if (this.mainNodeAuthField) {
+					const credentials = getAllNodeCredentialForAuthType(
+						this.nodeType,
+						this.mainNodeAuthField.name,
+					);
+					return credentials.map((cred) => cred.name);
+				}
+			}
+			return [credentialType.name];
+		},
+		getCredentialOptions(types: string[]): CredentialDropdownOption[] {
+			let options: CredentialDropdownOption[] = [];
+			types.forEach((type) => {
+				options = options.concat(
+					this.credentialsStore.allUsableCredentialsByType[type].map((option: any) => ({
+						...option,
+						typeDisplayName: this.credentialsStore.getCredentialTypeByName(type).displayName,
+					})),
+				);
+			});
+			return options;
 		},
 		getSelectedId(type: string) {
 			if (this.isCredentialExisting(type)) {
@@ -226,70 +377,6 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 
 			return styles;
 		},
-		// Listen for credentials store changes so credential selection can be updated if creds are changed from the modal
-		listenForCredentialUpdates() {
-			const getCounts = () => {
-				return Object.keys(this.credentialsStore.allUsableCredentialsByType).reduce(
-					(counts: { [key: string]: number }, key: string) => {
-						counts[key] = this.credentialsStore.allUsableCredentialsByType[key].length;
-						return counts;
-					},
-					{},
-				);
-			};
-
-			let previousCredentialCounts = getCounts();
-			const onCredentialMutation = () => {
-				// This data pro stores credential type that the component is currently interested in
-				const credentialType = this.subscribedToCredentialType;
-				if (!credentialType) {
-					return;
-				}
-
-				let credentialsOfType = [
-					...(this.credentialsStore.allUsableCredentialsByType[credentialType] || []),
-				];
-				// all credentials were deleted
-				if (credentialsOfType.length === 0) {
-					this.clearSelectedCredential(credentialType);
-					return;
-				}
-
-				credentialsOfType = credentialsOfType.sort((a, b) => (a.id < b.id ? -1 : 1));
-				const previousCredsOfType = previousCredentialCounts[credentialType] || 0;
-				const current = this.selected[credentialType];
-
-				// new credential was added
-				if (credentialsOfType.length > previousCredsOfType || !current) {
-					this.onCredentialSelected(
-						credentialType,
-						credentialsOfType[credentialsOfType.length - 1].id,
-					);
-					return;
-				}
-
-				const matchingCredential = credentialsOfType.find((cred) => cred.id === current.id);
-				// credential was deleted, select last one added to replace with
-				if (!matchingCredential) {
-					this.onCredentialSelected(
-						credentialType,
-						credentialsOfType[credentialsOfType.length - 1].id,
-					);
-					return;
-				}
-
-				// credential was updated
-				if (matchingCredential.name !== current.name) {
-					// credential name was changed, update it
-					this.onCredentialSelected(credentialType, current.id);
-				}
-			};
-
-			this.credentialsStore.$subscribe((mutation, state) => {
-				onCredentialMutation();
-				previousCredentialCounts = getCounts();
-			});
-		},
 
 		clearSelectedCredential(credentialType: string) {
 			const node: INodeUi = this.node;
@@ -310,12 +397,19 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 			this.$emit('credentialSelected', updateInformation);
 		},
 
-		onCredentialSelected(credentialType: string, credentialId: string | null | undefined) {
+		onCredentialSelected(
+			credentialType: string,
+			credentialId: string | null | undefined,
+			requiredCredentials = false,
+		) {
 			if (credentialId === this.NEW_CREDENTIALS_TEXT) {
+				// If new credential dialog is open, start listening for auth type change which should happen in the modal
+				// this will be handled in this component's watcher which will set subscribed credential accordingly
+				this.listeningForAuthChange = true;
 				this.subscribedToCredentialType = credentialType;
 			}
 			if (!credentialId || credentialId === this.NEW_CREDENTIALS_TEXT) {
-				this.uiStore.openNewCredential(credentialType);
+				this.uiStore.openNewCredential(credentialType, requiredCredentials);
 				this.$telemetry.track('User opened Credential modal', {
 					credential_type: credentialType,
 					source: 'node',
@@ -334,9 +428,10 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 			});
 
 			const selectedCredentials = this.credentialsStore.getCredentialById(credentialId);
+			const selectedCredentialsType = this.showAll ? selectedCredentials.type : credentialType;
 			const oldCredentials =
-				this.node.credentials && this.node.credentials[credentialType]
+				this.node.credentials && this.node.credentials[selectedCredentialsType]
-					? this.node.credentials[credentialType]
+					? this.node.credentials[selectedCredentialsType]
 					: {};
 
 			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
@@ -345,13 +440,16 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 			if (
 				oldCredentials.id === null ||
 				(oldCredentials.id &&
-					!this.credentialsStore.getCredentialByIdAndType(oldCredentials.id, credentialType))
+					!this.credentialsStore.getCredentialByIdAndType(
+						oldCredentials.id,
+						selectedCredentialsType,
+					))
 			) {
 				// update all nodes in the workflow with the same old/invalid credentials
 				this.workflowsStore.replaceInvalidWorkflowCredentials({
 					credentials: selected,
 					invalid: oldCredentials,
-					type: credentialType,
+					type: selectedCredentialsType,
 				});
 				this.updateNodesCredentialsIssues();
 				this.$showMessage({
@@ -366,11 +464,27 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 				});
 			}
 
+			// If credential is selected from mixed credential dropdown, update node's auth filed based on selected credential
+			if (this.showAll && this.mainNodeAuthField) {
+				const nodeCredentialDescription = this.nodeType?.credentials?.find(
+					(cred) => cred.name === selectedCredentialsType,
+				);
+				const authOption = getAuthTypeForNodeCredential(this.nodeType, nodeCredentialDescription);
+				if (authOption) {
+					updateNodeAuthType(this.node, authOption.value);
+					const parameterData = {
+						name: `parameters.${this.mainNodeAuthField.name}`,
+						value: authOption.value,
+					};
+					this.$emit('valueChanged', parameterData);
+				}
+			}
+
 			const node: INodeUi = this.node;
 
 			const credentials = {
 				...(node.credentials || {}),
-				[credentialType]: selected,
+				[selectedCredentialsType]: selected,
 			};
 
 			const updateInformation: INodeUpdatePropertiesInformation = {
@@ -401,7 +515,6 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 			if (!node.issues.credentials.hasOwnProperty(credentialTypeName)) {
 				return [];
 			}
-
 			return node.issues.credentials[credentialTypeName];
 		},
 
@@ -414,7 +527,7 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 				return false;
 			}
 			const { id } = this.node.credentials[credentialType];
-			const options = this.getCredentialOptions(credentialType);
+			const options = this.getCredentialOptions([credentialType]);
 
 			return !!options.find((option: ICredentialsResponse) => option.id === id);
 		},
@@ -431,6 +544,24 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 			});
 			this.subscribedToCredentialType = credentialType;
 		},
+		showMixedCredentials(credentialType: INodeCredentialDescription): boolean {
+			const nodeType = this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+			const isRequired = isRequiredCredential(nodeType, credentialType);
+
+			return !KEEP_AUTH_IN_NDV_FOR_NODES.includes(this.node.type || '') && isRequired;
+		},
+		getCredentialsFieldLabel(credentialType: INodeCredentialDescription): string {
+			const credentialTypeName = this.credentialTypeNames[credentialType.name];
+
+			if (!this.showMixedCredentials(credentialType)) {
+				return this.$locale.baseText('nodeCredentials.credentialFor', {
+					interpolate: {
+						credentialType: credentialTypeName,
+					},
+				});
+			}
+			return this.$locale.baseText('nodeCredentials.credentialsLabel');
+		},
 	},
 });
 </script>
@@ -470,4 +601,9 @@ export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend(
 	composes: input;
 	--input-border-color: var(--color-danger);
 }
+
+.credentialOption {
+	display: flex;
+	flex-direction: column;
+}
 </style>

packages/editor-ui/src/components/NodeSettings.vue

@@ -103,7 +103,9 @@
 					<node-credentials
 						:node="node"
 						:readonly="isReadOnly"
+						:showAll="true"
 						@credentialSelected="credentialSelected"
+						@valueChanged="valueChanged"
 						@blur="onParameterBlur"
 						:hide-issues="hiddenIssuesInputs.includes('credentials')"
 					/>

packages/editor-ui/src/components/ParameterInputList.vue

@@ -1,6 +1,11 @@
 <template>
 	<div class="parameter-input-list-wrapper">
-		<div v-for="(parameter, index) in filteredParameters" :key="parameter.name" :class="{ indent }">
+		<div
+			v-for="(parameter, index) in filteredParameters"
+			:key="parameter.name"
+			:class="{ indent }"
+			data-test-id="parameter-item"
+		>
 			<slot v-if="indexToShowSlotAt === index" />
 
 			<div
@@ -126,6 +131,8 @@ import { Component, PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { isAuthRelatedParameter, getNodeAuthFields, getMainAuthField } from '@/utils';
+import { KEEP_AUTH_IN_NDV_FOR_NODES } from '@/constants';
 
 export default mixins(workflowHelpers).extend({
 	name: 'ParameterInputList',
@@ -180,6 +187,12 @@ export default mixins(workflowHelpers).extend({
 			}
 			return '';
 		},
+		nodeType(): INodeTypeDescription | null {
+			if (this.node) {
+				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+			}
+			return null;
+		},
 		filteredParameters(): INodeProperties[] {
 			return this.parameters.filter((parameter: INodeProperties) =>
 				this.displayNodeParameter(parameter),
@@ -191,18 +204,27 @@ export default mixins(workflowHelpers).extend({
 		node(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
+		nodeAuthFields(): INodeProperties[] {
+			return getNodeAuthFields(this.nodeType);
+		},
 		indexToShowSlotAt(): number {
 			let index = 0;
+			// For nodes that use old credentials UI, keep credentials below authentication field in NDV
+			// otherwise credentials will use auth filed position since the auth field is moved to credentials modal
+			const fieldOffset = KEEP_AUTH_IN_NDV_FOR_NODES.includes(this.nodeType?.name || '') ? 1 : 0;
 			const credentialsDependencies = this.getCredentialsDependencies();
 
 			this.filteredParameters.forEach((prop, propIndex) => {
 				if (credentialsDependencies.has(prop.name)) {
-					index = propIndex + 1;
+					index = propIndex + fieldOffset;
 				}
 			});
 
 			return index < this.filteredParameters.length ? index : this.filteredParameters.length - 1;
 		},
+		mainNodeAuthField(): INodeProperties | null {
+			return getMainAuthField(this.nodeType || undefined);
+		},
 	},
 	methods: {
 		onParameterBlur(parameterName: string) {
@@ -273,7 +295,6 @@ export default mixins(workflowHelpers).extend({
 
 			return !MUST_REMAIN_VISIBLE.includes(parameter.name);
 		},
-
 		displayNodeParameter(parameter: INodeProperties): boolean {
 			if (parameter.type === 'hidden') {
 				return false;
@@ -286,6 +307,16 @@ export default mixins(workflowHelpers).extend({
 				return false;
 			}
 
+			// Hide authentication related fields since it will now be part of credentials modal
+			if (
+				!KEEP_AUTH_IN_NDV_FOR_NODES.includes(this.node?.type || '') &&
+				this.mainNodeAuthField &&
+				(parameter.name === this.mainNodeAuthField?.name ||
+					this.shouldHideAuthRelatedParameter(parameter))
+			) {
+				return false;
+			}
+
 			if (parameter.displayOptions === undefined) {
 				// If it is not defined no need to do a proper check
 				return true;
@@ -357,6 +388,15 @@ export default mixins(workflowHelpers).extend({
 				this.$emit('activate');
 			}
 		},
+		isNodeAuthField(name: string): boolean {
+			return this.nodeAuthFields.find((field) => field.name === name) !== undefined;
+		},
+		shouldHideAuthRelatedParameter(parameter: INodeProperties): boolean {
+			// TODO: For now, hide all fields that are used in authentication fields displayOptions
+			// Ideally, we should check if any non-auth field depends on it before hiding it but
+			// since there is no such case, omitting it to avoid additional computation
+			return isAuthRelatedParameter(this.nodeAuthFields, parameter);
+		},
 	},
 	watch: {
 		filteredParameterNames(newValue, oldValue) {

packages/editor-ui/src/components/ParameterInputWrapper.vue

@@ -53,7 +53,7 @@ import {
 	NodeParameterValue,
 	NodeParameterValueType,
 } from 'n8n-workflow';
-import { INodeUi, IUiState, IUpdateInformation, TargetItem } from '@/Interface';
+import { INodeUi, IUpdateInformation, TargetItem } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { isValueExpression } from '@/utils';
 import { mapStores } from 'pinia';

packages/editor-ui/src/components/ParameterOptions.vue

@@ -42,7 +42,7 @@ export default Vue.extend({
 			type: Boolean,
 		},
 		value: {
-			type: [Object, String, Number, Boolean] as PropType<NodeParameterValueType>,
+			type: [Object, String, Number, Boolean, Array] as PropType<NodeParameterValueType>,
 		},
 		showOptions: {
 			type: Boolean,

packages/editor-ui/src/constants.ts

@@ -119,6 +119,7 @@ export const START_NODE_TYPE = 'n8n-nodes-base.start';
 export const SWITCH_NODE_TYPE = 'n8n-nodes-base.switch';
 export const THE_HIVE_TRIGGER_NODE_TYPE = 'n8n-nodes-base.theHiveTrigger';
 export const QUICKBOOKS_NODE_TYPE = 'n8n-nodes-base.quickbooks';
+export const WAIT_NODE_TYPE = 'n8n-nodes-base.wait';
 export const WEBHOOK_NODE_TYPE = 'n8n-nodes-base.webhook';
 export const WORKABLE_TRIGGER_NODE_TYPE = 'n8n-nodes-base.workableTrigger';
 export const WORKFLOW_TRIGGER_NODE_TYPE = 'n8n-nodes-base.workflowTrigger';
@@ -456,4 +457,7 @@ export const N8N_CONTACT_EMAIL = 'contact@n8n.io';
 
 export const EXPRESSION_EDITOR_PARSER_TIMEOUT = 15_000; // ms
 
+export const KEEP_AUTH_IN_NDV_FOR_NODES = [HTTP_REQUEST_NODE_TYPE, WEBHOOK_NODE_TYPE];
+export const MAIN_AUTH_FIELD_NAME = 'authentication';
+export const NODE_RESOURCE_FIELD_NAME = 'resource';
 export const POSTHOG_ASSUMPTION_TEST = 'adore-assumption-tests';

packages/editor-ui/src/mixins/nodeHelpers.ts

@@ -309,7 +309,7 @@ export const nodeHelpers = mixins(restApi).extend({
 					if (credentialTypeDescription.required) {
 						foundIssues[credentialTypeDescription.name] = [
 							this.$locale.baseText('nodeIssues.credentials.notSet', {
-								interpolate: { type: credentialDisplayName },
+								interpolate: { type: nodeType.displayName },
 							}),
 						];
 					}

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -267,6 +267,8 @@
 	"credentialEdit.credentialConfig.subtitle": "In {appName}, use the URL above when prompted to enter an OAuth callback or redirect URL",
 	"credentialEdit.credentialConfig.theServiceYouReConnectingTo": "the service you're connecting to",
 	"credentialEdit.credentialConfig.missingCredentialType": "This credential's type isn't available. This usually happens when a previously installed community or custom node was uninstalled.",
+	"credentialEdit.credentialConfig.authTypeSelectorLabel": "Connect using",
+	"credentialEdit.credentialConfig.authTypeSelectorTooltip": "The authentication method to use for the connection",
 	"credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText": "Keep Editing",
 	"credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText": "Close",
 	"credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline": "Close without saving?",
@@ -724,8 +726,9 @@
 	"nodeCreator.triggerHelperPanel.manualTriggerDescription": "Runs the flow on clicking a button in n8n",
 	"nodeCreator.triggerHelperPanel.workflowTriggerDisplayName": "When Called By Another Workflow",
 	"nodeCreator.triggerHelperPanel.workflowTriggerDescription": "Runs the flow when called by the Execute Workflow node from a different workflow",
-	"nodeCredentials.createNew": "Create New",
+	"nodeCredentials.createNew": "Create New Credential",
 	"nodeCredentials.credentialFor": "Credential for {credentialType}",
+	"nodeCredentials.credentialsLabel": "Credential to connect with",
 	"nodeCredentials.issues": "Issues",
 	"nodeCredentials.selectCredential": "Select Credential",
 	"nodeCredentials.selectedCredentialUnavailable": "{name} (unavailable)",

packages/editor-ui/src/stores/credentials.ts

@@ -1,3 +1,4 @@
+import { INodeUi } from './../Interface';
 import {
 	createNewCredential,
 	deleteCredential,
@@ -72,6 +73,22 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 				{},
 			);
 		},
+		allUsableCredentialsForNode() {
+			return (node: INodeUi): ICredentialsResponse[] => {
+				let credentials: ICredentialsResponse[] = [];
+				const nodeType = useNodeTypesStore().getNodeType(node.type, node.typeVersion);
+				if (nodeType && nodeType.credentials) {
+					nodeType.credentials.forEach((cred) => {
+						credentials = credentials.concat(this.allUsableCredentialsByType[cred.name]);
+					});
+				}
+				return credentials.sort((a, b) => {
+					const aDate = new Date(a.updatedAt);
+					const bDate = new Date(b.updatedAt);
+					return aDate.getTime() - bDate.getTime();
+				});
+			};
+		},
 		allUsableCredentialsByType(): { [type: string]: ICredentialsResponse[] } {
 			const credentials = this.allCredentials;
 			const types = this.allCredentialTypes;

packages/editor-ui/src/stores/ui.ts

@@ -61,11 +61,6 @@ export const useUIStore = defineStore(STORES.UI, {
 			[CONTACT_PROMPT_MODAL_KEY]: {
 				open: false,
 			},
-			[CREDENTIAL_EDIT_MODAL_KEY]: {
-				open: false,
-				mode: '',
-				activeId: null,
-			},
 			[CREDENTIAL_SELECT_MODAL_KEY]: {
 				open: false,
 			},
@@ -123,6 +118,12 @@ export const useUIStore = defineStore(STORES.UI, {
 				open: false,
 				data: undefined,
 			},
+			[CREDENTIAL_EDIT_MODAL_KEY]: {
+				open: false,
+				mode: '',
+				activeId: null,
+				showAuthSelector: false,
+			},
 		},
 		modalStack: [],
 		sidebarMenuCollapsed: true,
@@ -290,6 +291,9 @@ export const useUIStore = defineStore(STORES.UI, {
 		setActiveId(name: string, id: string): void {
 			Vue.set(this.modals[name], 'activeId', id);
 		},
+		setShowAuthSelector(name: string, show: boolean) {
+			Vue.set(this.modals[name], 'showAuthSelector', show);
+		},
 		setModalData(payload: { name: string; data: Record<string, unknown> }) {
 			Vue.set(this.modals[payload.name], 'data', payload.data);
 		},
@@ -348,8 +352,9 @@ export const useUIStore = defineStore(STORES.UI, {
 			this.setMode(CREDENTIAL_EDIT_MODAL_KEY, 'edit');
 			this.openModal(CREDENTIAL_EDIT_MODAL_KEY);
 		},
-		openNewCredential(type: string): void {
+		openNewCredential(type: string, showAuthOptions = false): void {
 			this.setActiveId(CREDENTIAL_EDIT_MODAL_KEY, type);
+			this.setShowAuthSelector(CREDENTIAL_EDIT_MODAL_KEY, showAuthOptions);
 			this.setMode(CREDENTIAL_EDIT_MODAL_KEY, 'new');
 			this.openModal(CREDENTIAL_EDIT_MODAL_KEY);
 		},

packages/editor-ui/src/utils/nodeTypesUtils.ts

@@ -1,3 +1,7 @@
+import { MAIN_AUTH_FIELD_NAME, NODE_RESOURCE_FIELD_NAME } from './../constants';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNodeTypesStore } from './../stores/nodeTypes';
+import { INodeCredentialDescription } from './../../../workflow/src/Interfaces';
 import {
 	CORE_NODES_CATEGORY,
 	RECOMMENDED_CATEGORY,
@@ -19,6 +23,8 @@ import {
 	INodeUi,
 	ITemplatesNode,
 	INodeItemProps,
+	NodeAuthenticationOption,
+	INodeUpdatePropertiesInformation,
 } from '@/Interface';
 import {
 	IDataObject,
@@ -27,6 +33,8 @@ import {
 	INodeTypeDescription,
 	INodeActionTypeDescription,
 	NodeParameterValueType,
+	INodePropertyOptions,
+	INodePropertyCollection,
 } from 'n8n-workflow';
 import { isResourceLocatorValue, isJsonKeyObject } from '@/utils';
 
@@ -305,3 +313,247 @@ export const hasOnlyListMode = (parameter: INodeProperties): boolean => {
 		parameter.modes[0].name === 'list'
 	);
 };
+
+// A credential type is considered required if it has no dependencies
+// or if it's only dependency is the main authentication fields
+export const isRequiredCredential = (
+	nodeType: INodeTypeDescription | null,
+	credential: INodeCredentialDescription,
+): boolean => {
+	if (!credential.displayOptions || !credential.displayOptions.show) {
+		return true;
+	}
+	const mainAuthField = getMainAuthField(nodeType);
+	if (mainAuthField) {
+		return mainAuthField.name in credential.displayOptions.show;
+	}
+	return false;
+};
+
+// Finds the main authentication filed for the node type
+// It's the field that node's required credential depend on
+export const getMainAuthField = (nodeType: INodeTypeDescription | null): INodeProperties | null => {
+	if (!nodeType) {
+		return null;
+	}
+	const credentialDependencies = getNodeAuthFields(nodeType);
+	const authenticationField =
+		credentialDependencies.find(
+			(prop) =>
+				prop.name === MAIN_AUTH_FIELD_NAME &&
+				!prop.options?.find((option) => option.value === 'none'),
+		) || null;
+	// If there is a field name `authentication`, use it
+	// Otherwise, try to find alternative main auth field
+	const mainAuthFiled =
+		authenticationField || findAlternativeAuthField(nodeType, credentialDependencies);
+	// Main authentication field has to be required
+	const isFieldRequired = mainAuthFiled ? isNodeParameterRequired(nodeType, mainAuthFiled) : false;
+	return mainAuthFiled && isFieldRequired ? mainAuthFiled : null;
+};
+
+// A field is considered main auth filed if:
+// 1. It is a credential dependency
+// 2. If all of it's possible values are used in credential's display options
+const findAlternativeAuthField = (
+	nodeType: INodeTypeDescription,
+	fields: INodeProperties[],
+): INodeProperties | null => {
+	const dependentAuthFieldValues: { [fieldName: string]: string[] } = {};
+	nodeType.credentials?.forEach((cred) => {
+		if (cred.displayOptions && cred.displayOptions.show) {
+			for (const fieldName in cred.displayOptions.show) {
+				dependentAuthFieldValues[fieldName] = (dependentAuthFieldValues[fieldName] || []).concat(
+					(cred.displayOptions.show[fieldName] || []).map((val) => (val ? val.toString() : '')),
+				);
+			}
+		}
+	});
+	const alternativeAuthField = fields.find((field) => {
+		let required = true;
+		field.options?.forEach((option) => {
+			if (!dependentAuthFieldValues[field.name].includes(option.value)) {
+				required = false;
+			}
+		});
+		return required;
+	});
+	return alternativeAuthField || null;
+};
+
+// Gets all authentication types that a given node type supports
+export const getNodeAuthOptions = (
+	nodeType: INodeTypeDescription | null,
+): NodeAuthenticationOption[] => {
+	if (!nodeType) {
+		return [];
+	}
+	let options: NodeAuthenticationOption[] = [];
+	const authProp = getMainAuthField(nodeType);
+	// Some nodes have multiple auth fields with same name but different display options so need
+	// take them all into account
+	const authProps = getNodeAuthFields(nodeType).filter((prop) => prop.name === authProp?.name);
+
+	authProps.forEach((field) => {
+		if (field.options) {
+			options = options.concat(
+				field.options.map((option) => ({
+					name: option.name,
+					value: option.value,
+					// Also add in the display options so we can hide/show the option if necessary
+					displayOptions: field.displayOptions,
+				})) || [],
+			);
+		}
+	});
+	return options;
+};
+
+export const getAllNodeCredentialForAuthType = (
+	nodeType: INodeTypeDescription | null,
+	authType: string,
+): INodeCredentialDescription[] => {
+	if (nodeType) {
+		return (
+			nodeType.credentials?.filter(
+				(cred) => cred.displayOptions?.show && authType in (cred.displayOptions.show || {}),
+			) || []
+		);
+	}
+	return [];
+};
+
+export const getNodeCredentialForSelectedAuthType = (
+	nodeType: INodeTypeDescription,
+	authType: string,
+): INodeCredentialDescription | null => {
+	const authField = getMainAuthField(nodeType);
+	const authFieldName = authField ? authField.name : '';
+	return (
+		nodeType.credentials?.find(
+			(cred) =>
+				cred.displayOptions?.show && cred.displayOptions.show[authFieldName]?.includes(authType),
+		) || null
+	);
+};
+
+export const getAuthTypeForNodeCredential = (
+	nodeType: INodeTypeDescription | null | undefined,
+	credentialType: INodeCredentialDescription | null | undefined,
+): INodePropertyOptions | INodeProperties | INodePropertyCollection | null => {
+	if (nodeType && credentialType) {
+		const authField = getMainAuthField(nodeType);
+		const authFieldName = authField ? authField.name : '';
+		const nodeAuthOptions = getNodeAuthOptions(nodeType);
+		return (
+			nodeAuthOptions.find(
+				(option) =>
+					credentialType.displayOptions?.show &&
+					credentialType.displayOptions?.show[authFieldName]?.includes(option.value),
+			) || null
+		);
+	}
+	return null;
+};
+
+export const isAuthRelatedParameter = (
+	authFields: INodeProperties[],
+	parameter: INodeProperties,
+): boolean => {
+	let isRelated = false;
+	authFields.forEach((prop) => {
+		if (
+			prop.displayOptions &&
+			prop.displayOptions.show &&
+			parameter.name in prop.displayOptions.show
+		) {
+			isRelated = true;
+			return;
+		}
+	});
+	return isRelated;
+};
+
+export const getNodeAuthFields = (nodeType: INodeTypeDescription | null): INodeProperties[] => {
+	const authFields: INodeProperties[] = [];
+	if (nodeType && nodeType.credentials && nodeType.credentials.length > 0) {
+		nodeType.credentials.forEach((cred) => {
+			if (cred.displayOptions && cred.displayOptions.show) {
+				Object.keys(cred.displayOptions.show).forEach((option) => {
+					const nodeFieldsForName = nodeType.properties.filter((prop) => prop.name === option);
+					if (nodeFieldsForName) {
+						nodeFieldsForName.forEach((nodeField) => {
+							if (!authFields.includes(nodeField)) {
+								authFields.push(nodeField);
+							}
+						});
+					}
+				});
+			}
+		});
+	}
+	return authFields;
+};
+
+export const getCredentialsRelatedFields = (
+	nodeType: INodeTypeDescription | null,
+	credentialType: INodeCredentialDescription | null,
+): INodeProperties[] => {
+	let fields: INodeProperties[] = [];
+	if (
+		nodeType &&
+		credentialType &&
+		credentialType.displayOptions &&
+		credentialType.displayOptions.show
+	) {
+		Object.keys(credentialType.displayOptions.show).forEach((option) => {
+			console.log(option);
+			fields = fields.concat(nodeType.properties.filter((prop) => prop.name === option));
+		});
+	}
+	return fields;
+};
+
+export const updateNodeAuthType = (node: INodeUi | null, type: string) => {
+	if (!node) {
+		return;
+	}
+	const nodeType = useNodeTypesStore().getNodeType(node.type, node.typeVersion);
+	if (nodeType) {
+		const nodeAuthField = getMainAuthField(nodeType);
+		if (nodeAuthField) {
+			const updateInformation = {
+				name: node.name,
+				properties: {
+					parameters: {
+						...node.parameters,
+						[nodeAuthField.name]: type,
+					},
+				} as IDataObject,
+			} as INodeUpdatePropertiesInformation;
+			useWorkflowsStore().updateNodeProperties(updateInformation);
+		}
+	}
+};
+
+export const isNodeParameterRequired = (
+	nodeType: INodeTypeDescription,
+	parameter: INodeProperties,
+): boolean => {
+	if (!parameter.displayOptions || !parameter.displayOptions.show) {
+		return true;
+	}
+	// If parameter itself contains 'none'?
+	// Walk through dependencies and check if all their values are used in displayOptions
+	Object.keys(parameter.displayOptions.show).forEach((name) => {
+		const relatedField = nodeType.properties.find((prop) => {
+			prop.name === name;
+		});
+		if (relatedField && !isNodeParameterRequired(nodeType, relatedField)) {
+			return false;
+		} else {
+			return true;
+		}
+	});
+	return true;
+};

packages/editor-ui/src/utils/typeGuards.ts

@@ -1,3 +1,4 @@
+import { NewCredentialsModal } from './../Interface';
 import { INodeParameterResourceLocator } from 'n8n-workflow';
 import { ICredentialsResponse } from '@/Interface';
 
@@ -31,3 +32,7 @@ export function isString(value: unknown): value is string {
 export function isNumber(value: unknown): value is number {
 	return typeof value === 'number';
 }
+
+export const isCredentialModalState = (value: unknown): value is NewCredentialsModal => {
+	return typeof value === 'object' && value !== null && 'showAuthSelector' in value;
+};