From 2e41075fc88a3a7cb17c03aa97cba4eb93c1c983 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Wed, 5 Mar 2025 11:22:25 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1Improve=20auth=20error=20detection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ResourceLocator/ResourceLocator.vue       | 67 ++++++++++++-------
 .../ResourceLocator/resourceLocator.scss      | 20 ++++--
 2 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 73e031e52e..3275938759 100644
--- a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -63,6 +63,7 @@ interface IResourceLocatorQuery {
 		message?: string;
 		description?: string;
 		httpCode?: string;
+		stackTrace?: string;
 	};
 	loading: boolean;
 }
@@ -154,9 +155,26 @@ const selectedMode = computed(() => {
 
 const isListMode = computed(() => selectedMode.value === 'list');
 
-const hasPermissionError = computed(() =>
-	['401', '403'].includes(currentResponse.value?.errorDetails?.httpCode ?? ''),
-);
+const hasCredentialError = computed(() => {
+	const PERMISSION_ERROR_CODES = ['401', '403'];
+	// Some of our NodeAPIErrors just return 500 without any details,
+	// so checking messages and stack traces for permission errors
+	const NODE_API_AUTH_ERROR_MESSAGES = [
+		'NodeApiError: Authorization failed',
+		'NodeApiError: Unable to sign without access token',
+		'secretOrPrivateKey must be an asymmetric key when using RS256',
+	];
+	// Check if error stack trace contains permission error messages
+	const stackTraceContainsCredentialError = (currentResponse.value?.errorDetails?.stackTrace ?? '')
+		.split('\n')
+		.some((line) => NODE_API_AUTH_ERROR_MESSAGES.includes(line.trim()));
+
+	return (
+		PERMISSION_ERROR_CODES.includes(currentResponse.value?.errorDetails?.httpCode ?? '') ||
+		NODE_API_AUTH_ERROR_MESSAGES.includes(currentResponse.value?.errorDetails?.message ?? '') ||
+		stackTraceContainsCredentialError
+	);
+});
 
 const credentialsNotSet = computed(() => {
 	if (!props.node) return false;
@@ -784,28 +802,31 @@ function removeOverride() {
 			@load-more="loadResourcesDebounced"
 		>
 			<template #error>
-				<div
-					v-if="currentResponse.errorDetails"
-					:class="$style.error"
-					data-test-id="rlc-error-container"
-				>
-					<n8n-text color="text-dark" align="center" tag="div" class="mb-3xs">
+				<div :class="$style.errorContainer" data-test-id="rlc-error-container">
+					<n8n-text
+						v-if="credentialsNotSet || currentResponse.errorDetails"
+						color="text-dark"
+						align="center"
+						tag="div"
+					>
 						{{ i18n.baseText('resourceLocator.mode.list.error.title') }}
 					</n8n-text>
-					<n8n-text size="small">
-						<span v-if="currentResponse.errorDetails.httpCode">
-							{{ currentResponse.errorDetails.httpCode }} -
-						</span>
-						{{ currentResponse.errorDetails.message?.split('-')[0]?.trim() }}
-					</n8n-text>
-					<N8nNotice
-						v-if="currentResponse.errorDetails.description"
-						theme="warning"
-						class="mt-s mb-s text-left"
-					>
-						{{ currentResponse.errorDetails.description }}
-					</N8nNotice>
-					<div v-if="hasPermissionError" data-test-id="permission-error-link">
+					<div v-if="currentResponse.errorDetails" :class="$style.errorDetails">
+						<n8n-text size="small">
+							<span v-if="currentResponse.errorDetails.httpCode">
+								{{ currentResponse.errorDetails.httpCode }} -
+							</span>
+							{{ currentResponse.errorDetails.message }}
+						</n8n-text>
+						<N8nNotice
+							v-if="currentResponse.errorDetails.description"
+							theme="warning"
+							:class="$style.errorDescription"
+						>
+							{{ currentResponse.errorDetails.description }}
+						</N8nNotice>
+					</div>
+					<div v-if="hasCredentialError || credentialsNotSet" data-test-id="permission-error-link">
 						<a
 							v-if="credentialsNotSet"
 							:class="$style['credential-link']"
diff --git a/packages/frontend/editor-ui/src/components/ResourceLocator/resourceLocator.scss b/packages/frontend/editor-ui/src/components/ResourceLocator/resourceLocator.scss
index 795fe9fdb8..6d60c88f86 100644
--- a/packages/frontend/editor-ui/src/components/ResourceLocator/resourceLocator.scss
+++ b/packages/frontend/editor-ui/src/components/ResourceLocator/resourceLocator.scss
@@ -140,15 +140,27 @@ $--mode-selector-width: 92px;
 	cursor: pointer;
 }
 
-.error {
+.errorContainer,
+.errorDetails {
+	display: flex;
+	gap: var(--spacing-s);
+	flex-direction: column;
+}
+
+.errorContainer {
 	width: 80%;
-	word-break: normal;
+	align-items: center;
 	text-align: center;
-	color: var(--color-text-base);
+}
+
+.errorDescription {
+	text-align: left;
+	margin: 0;
+	word-break: normal;
 }
 
 .credential-link {
-	font-size: 12px;
+	font-size: var(--font-size-2xs);
 }
 
 .openResourceLink {