fix(editor): Fix initialize authenticated features (#9867)

packages/editor-ui/src/App.vue

@@ -60,7 +60,6 @@ import { useUsageStore } from '@/stores/usage.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { useRoute } from 'vue-router';
-import { initializeAuthenticatedFeatures } from '@/init';
 import { useAIStore } from './stores/ai.store';
 import AIAssistantChat from './components/AIAssistantChat/AIAssistantChat.vue';
 
@@ -103,26 +102,16 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			onAfterAuthenticateInitialized: false,
 			loading: true,
 		};
 	},
 	watch: {
-		// eslint-disable-next-line @typescript-eslint/naming-convention
-		async 'usersStore.currentUser'(currentValue, previousValue) {
-			if (currentValue && !previousValue) {
-				await initializeAuthenticatedFeatures();
-			}
-		},
 		defaultLocale(newLocale) {
 			void loadLanguage(newLocale);
 		},
 	},
 	async mounted() {
 		this.logHiringBanner();
-
-		void initializeAuthenticatedFeatures();
-
 		void useExternalHooks().run('app.mount');
 		this.loading = false;
 	},

packages/editor-ui/src/__tests__/router.test.ts

@@ -7,6 +7,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useRBACStore } from '@/stores/rbac.store';
 import type { Scope } from '@n8n/permissions';
 import type { RouteRecordName } from 'vue-router';
+import * as init from '@/init';
 
 const App = {
 	template: '<div />',
@@ -15,6 +16,7 @@ const renderComponent = createComponentRenderer(App);
 
 describe('router', () => {
 	let server: ReturnType<typeof setupServer>;
+	const initializeAuthenticatedFeaturesSpy = vi.spyOn(init, 'initializeAuthenticatedFeatures');
 
 	beforeAll(async () => {
 		server = setupServer();
@@ -25,8 +27,13 @@ describe('router', () => {
 		renderComponent({ pinia });
 	});
 
+	beforeEach(() => {
+		initializeAuthenticatedFeaturesSpy.mockImplementation(async () => await Promise.resolve());
+	});
+
 	afterAll(() => {
 		server.shutdown();
+		vi.restoreAllMocks();
 	});
 
 	test.each([
@@ -42,6 +49,7 @@ describe('router', () => {
 		'should resolve %s to %s',
 		async (path, name) => {
 			await router.push(path);
+			expect(initializeAuthenticatedFeaturesSpy).toHaveBeenCalled();
 			expect(router.currentRoute.value.name).toBe(name);
 		},
 		10000,
@@ -55,6 +63,7 @@ describe('router', () => {
 		'should redirect %s to %s if user does not have permissions',
 		async (path, name) => {
 			await router.push(path);
+			expect(initializeAuthenticatedFeaturesSpy).toHaveBeenCalled();
 			expect(router.currentRoute.value.name).toBe(name);
 		},
 		10000,
@@ -73,6 +82,7 @@ describe('router', () => {
 			settingsStore.settings.enterprise.workflowHistory = true;
 
 			await router.push(path);
+			expect(initializeAuthenticatedFeaturesSpy).toHaveBeenCalled();
 			expect(router.currentRoute.value.name).toBe(name);
 		},
 		10000,
@@ -111,6 +121,7 @@ describe('router', () => {
 			rbacStore.setGlobalScopes(scopes);
 
 			await router.push(path);
+			expect(initializeAuthenticatedFeaturesSpy).toHaveBeenCalled();
 			expect(router.currentRoute.value.name).toBe(name);
 		},
 		10000,

packages/editor-ui/src/router.ts

@@ -15,7 +15,7 @@ import { EnterpriseEditionFeature, VIEWS, EDITABLE_CANVAS_VIEWS } from '@/consta
 import { useTelemetry } from '@/composables/useTelemetry';
 import { middleware } from '@/utils/rbac/middleware';
 import type { RouterMiddleware } from '@/types/router';
-import { initializeCore } from '@/init';
+import { initializeAuthenticatedFeatures, initializeCore } from '@/init';
 import { tryToParseNumber } from '@/utils/typesUtils';
 import { projectsRoutes } from '@/routes/projects.routes';
 
@@ -777,6 +777,7 @@ router.beforeEach(async (to: RouteLocationNormalized, from, next) => {
 		 */
 
 		await initializeCore();
+		await initializeAuthenticatedFeatures();
 
 		/**
 		 * Redirect to setup page. User should be redirected to this only once

packages/editor-ui/src/views/NodeView.vue

@@ -4789,12 +4789,6 @@ export default defineComponent({
 			}
 
 			try {
-				await Promise.all([
-					this.loadVariables(),
-					this.tagsStore.fetchAll(),
-					this.loadCredentials(),
-				]);
-
 				if (workflowId !== null && !this.uiStore.stateIsDirty) {
 					const workflow: IWorkflowDb | undefined =
 						await this.workflowsStore.fetchWorkflow(workflowId);
@@ -4803,6 +4797,12 @@ export default defineComponent({
 						await this.openWorkflow(workflow);
 					}
 				}
+
+				await Promise.all([
+					this.loadVariables(),
+					this.tagsStore.fetchAll(),
+					this.loadCredentials(),
+				]);
 			} catch (error) {
 				console.error(error);
 			}