Repository: n8n-io/n8n
File: packages/frontend/editor-ui/src/features/credentials/components/NodeCredentials.vue (Vue)

Code before:
						subscribedToCredentialType.value = credentialType.name;
					}
				}
			}
		}
	},
	{ immediate: true, deep: true },
);

// Select most recent credential by default
watch(
	credentialTypesNodeDescriptionDisplayed,
	(types) => {
		if (types.length === 0 || !isEmpty(selected.value)) return;

		const allOptions = types.map((type) => type.options).flat();

		if (allOptions.length === 0) return;

		const mostRecentCredential = allOptions.reduce(
			(mostRecent, current) =>
				mostRecent && mostRecent.updatedAt > current.updatedAt ? mostRecent : current,
			allOptions[0],
		);

		onCredentialSelected(mostRecentCredential.type, mostRecentCredential.id, false, false);
	},
	{ immediate: true },
);

onMounted(() => {
	credentialsStore.$onAction(({ name, after, args }) => {
		const listeningForActions = ['createNewCredential', 'updateCredential', 'deleteCredential'];
		const credentialType = subscribedToCredentialType.value;
		if (!credentialType) {
			return;
		}

		after(async (result) => {
			if (!listeningForActions.includes(name)) {
				return;
			}
			const current = selected.value[credentialType];
			let credentialsOfType: ICredentialsResponse[] = [];
			if (props.showAll) {
				if (props.node) {
					credentialsOfType = [...(credentialsStore.allUsableCredentialsForNode(props.node) || [])];
				}
			} else {
				credentialsOfType = [
					...(credentialsStore.allUsableCredentialsByType[credentialType] || []),

Review comment (security):
Two questions:
1. Why are we disabling auto-assign? Feels like it's very convenient and we had some customer requests to bring it to the setup modal also. We should check this with product
2. Would be nice to document these parameters:
```suggestion
		onCredentialSelected(
			mostRecentCredential.type,
			mostRecentCredential.id,
			false, // showAuthOptions
			false, // isUserAction
		);
```

Code after:
			if (mainNodeAuthField.value && oldValue && newValue) {
				const newAuth = newValue[mainNodeAuthField.value.name];

				if (newAuth) {
					const authType =
						typeof newAuth === 'object' ? JSON.stringify(newAuth) : newAuth.toString();
					const credentialType = getNodeCredentialForSelectedAuthType(nodeType.value, authType);
					if (credentialType) {
						subscribedToCredentialType.value = credentialType.name;
					}
				}
			}
		}
	},
	{ immediate: true, deep: true },
);

// Select most recent credential by default
watch(
	credentialTypesNodeDescriptionDisplayed,
	(types) => {
		if (types.length === 0 || !isEmpty(selected.value)) return;

		const allOptions = types.map((type) => type.options).flat();

		if (allOptions.length === 0) return;

		const mostRecentCredential = allOptions.reduce(
			(mostRecent, current) =>
				mostRecent && mostRecent.updatedAt > current.updatedAt ? mostRecent : current,
			allOptions[0],
		);

		onCredentialSelected(
			mostRecentCredential.type,
			mostRecentCredential.id,
			false, // showAuthOptions
			false, // isUserAction
		);
	},
	{ immediate: true },
);

onMounted(() => {
	credentialsStore.$onAction(({ name, after, args }) => {
		const listeningForActions = ['createNewCredential', 'updateCredential', 'deleteCredential'];
		const credentialType = subscribedToCredentialType.value;
		if (!credentialType) {
			return;
		}