Allow disabling MFA using recovery code

cypress/e2e/27-two-factor-authentication.cy.ts

@@ -68,14 +68,28 @@ describe('Two-factor authentication', { disableAutoLogin: true }, () => {
 		mainSidebar.actions.signout();
 	});
 
-	it('Should be able to disable MFA in account', () => {
+	it('Should be able to disable MFA in account with MFA token ', () => {
 		const { email, password } = user;
 		signinPage.actions.loginWithEmailAndPassword(email, password);
 		personalSettingsPage.actions.enableMfa();
 		mainSidebar.actions.signout();
-		const token = generateOTPToken(user.mfaSecret);
-		mfaLoginPage.actions.loginWithMfaToken(email, password, token);
-		personalSettingsPage.actions.disableMfa();
+		const loginToken = generateOTPToken(user.mfaSecret);
+		mfaLoginPage.actions.loginWithMfaToken(email, password, loginToken);
+		const disableToken = generateOTPToken(user.mfaSecret);
+		personalSettingsPage.actions.disableMfaWithMfaToken(disableToken);
+		personalSettingsPage.getters.enableMfaButton().should('exist');
+		mainSidebar.actions.signout();
+	});
+
+	it('Should be able to disable MFA in account with recovery code', () => {
+		const { email, password } = user;
+		signinPage.actions.loginWithEmailAndPassword(email, password);
+		personalSettingsPage.actions.enableMfa();
+		mainSidebar.actions.signout();
+		const loginToken = generateOTPToken(user.mfaSecret);
+		mfaLoginPage.actions.loginWithMfaToken(email, password, loginToken);
+		personalSettingsPage.actions.disableMfaWitRecoveryCode(user.mfaRecoveryCodes[0]);
+		personalSettingsPage.getters.enableMfaButton().should('exist');
 		mainSidebar.actions.signout();
 	});
 });

cypress/pages/settings-personal.ts

@@ -22,6 +22,9 @@ export class PersonalSettingsPage extends BasePage {
 		saveSettingsButton: () => cy.getByTestId('save-settings-button'),
 		enableMfaButton: () => cy.getByTestId('enable-mfa-button'),
 		disableMfaButton: () => cy.getByTestId('disable-mfa-button'),
+		mfaCodeInput: () => cy.getByTestId('mfa-code-input'),
+		recoveryCodeInput: () => cy.getByTestId('recovery-code-input'),
+		mfaSaveButton: () => cy.getByTestId('mfa-save-button'),
 		themeSelector: () => cy.getByTestId('theme-select'),
 		selectOptionsVisible: () => cy.get('.el-select-dropdown:visible .el-select-dropdown__item'),
 	};
@@ -83,9 +86,17 @@ export class PersonalSettingsPage extends BasePage {
 				mfaSetupModal.getters.saveButton().click();
 			});
 		},
-		disableMfa: () => {
+		disableMfaWithMfaToken: (token: string) => {
 			cy.visit(this.url);
 			this.getters.disableMfaButton().click();
+			this.getters.mfaCodeInput().type(token);
+			this.getters.mfaSaveButton().click();
+		},
+		disableMfaWitRecoveryCode: (recoveryCode: string) => {
+			cy.visit(this.url);
+			this.getters.disableMfaButton().click();
+			this.getters.recoveryCodeInput().type(recoveryCode);
+			this.getters.mfaSaveButton().click();
 		},
 	};
 }

packages/cli/src/controllers/mfa.controller.ts

@@ -86,13 +86,13 @@ export class MFAController {
 	@Post('/disable', { rateLimit: true })
 	async disableMFA(req: MFA.Disable) {
 		const { id: userId } = req.user;
-		const { token = null } = req.body;
+		const { token = null, recoveryCode = null } = req.body;
 
-		if (typeof token !== 'string' || !token) {
-			throw new BadRequestError('Token is required to disable MFA feature');
+		if (typeof token !== 'string' || typeof recoveryCode !== 'string') {
+			throw new BadRequestError('Token or recovery code should be strings');
 		}
 
-		await this.mfaService.disableMfa(userId, token);
+		await this.mfaService.disableMfa(userId, token, recoveryCode);
 	}
 
 	@Post('/verify', { rateLimit: true })

packages/cli/src/errors/response-errors/invalid-mfa-code.error.ts

@@ -2,6 +2,6 @@ import { ForbiddenError } from './forbidden.error';
 
 export class InvalidMfaCodeError extends ForbiddenError {
 	constructor(hint?: string) {
-		super('Invalid two-factor code.', hint);
+		super('Invalid two-factor code or recovery code.', hint);
 	}
 }

packages/cli/src/mfa/mfa.service.ts

@@ -85,8 +85,9 @@ export class MfaService {
 		return await this.authUserRepository.save(user);
 	}
 
-	async disableMfa(userId: string, mfaToken: string) {
-		const isValidToken = await this.validateMfa(userId, mfaToken, undefined);
+	async disableMfa(userId: string, mfaToken: string, recoveryCode: string) {
+		const isValidToken = await this.validateMfa(userId, mfaToken, recoveryCode);
+
 		if (!isValidToken) {
 			throw new InvalidMfaCodeError();
 		}

packages/cli/src/requests.ts

@@ -318,7 +318,7 @@ export type LoginRequest = AuthlessRequest<
 export declare namespace MFA {
 	type Verify = AuthenticatedRequest<{}, {}, { token: string }, {}>;
 	type Activate = AuthenticatedRequest<{}, {}, { token: string }, {}>;
-	type Disable = AuthenticatedRequest<{}, {}, { token: string }, {}>;
+	type Disable = AuthenticatedRequest<{}, {}, { token?: string; recoveryCode?: string }, {}>;
 	type Config = AuthenticatedRequest<{}, {}, { login: { enabled: boolean } }, {}>;
 	type ValidateRecoveryCode = AuthenticatedRequest<
 		{},

packages/editor-ui/src/api/mfa.ts

@@ -24,6 +24,7 @@ export async function verifyMfaToken(
 
 export type DisableMfaParams = {
 	token: string;
+	recoveryCode: string;
 };
 
 export async function disableMfa(context: IRestApiContext, data: DisableMfaParams): Promise<void> {

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

@@ -1,50 +1,89 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import Modal from '../Modal.vue';
 import { PROMPT_MFA_CODE_MODAL_KEY } from '@/constants';
 import { useI18n } from '@/composables/useI18n';
 import { promptMfaCodeBus } from '@/event-bus';
-import type { IFormInputs } from '@/Interface';
-import { createFormEventBus } from 'n8n-design-system';
+import { validate as uuidValidate } from 'uuid';
+
+const MFA_CODE_INPUT_NAME = 'mfaCodeInput';
+
+const MFA_CODE_VALIDATORS = {
+	mfaCode: {
+		validate: (value: string) => {
+			if (value === '') {
+				return { message: ' ' };
+			}
+
+			if (value.length < 6) {
+				return {
+					message: 'Code must be 6 digits',
+				};
+			}
+
+			if (!/^\d+$/.test(value)) {
+				return {
+					message: 'Only digits are allow',
+				};
+			}
+
+			return false;
+		},
+	},
+};
+
+const RECOVERY_CODE_VALIDATORS = {
+	recoveryCode: {
+		validate: (value: string) => {
+			if (value === '') {
+				return { message: ' ' };
+			}
+
+			if (!uuidValidate(value)) {
+				return {
+					message: 'Must be an UUID',
+				};
+			}
+
+			return false;
+		},
+	},
+};
 
 const i18n = useI18n();
 
-const formBus = createFormEventBus();
-const readyToSubmit = ref(false);
+const mfaCode = ref('');
+const recoveryCode = ref('');
 
-const formFields: IFormInputs = [
-	{
-		name: 'mfaCode',
-		initialValue: '',
-		properties: {
-			label: i18n.baseText('mfa.code.input.label'),
-			placeholder: i18n.baseText('mfa.code.input.placeholder'),
-			focusInitially: true,
-			capitalize: true,
-			required: true,
-		},
-	},
-];
+const isMfaCodeValid = ref(false);
+const isRecoveryCodeValid = ref(false);
+
+const anyFieldValid = computed(() => isMfaCodeValid.value || isRecoveryCodeValid.value);
+
+function onClickSave() {
+	if (!anyFieldValid.value) {
+		return;
+	}
 
-function onSubmit(values: { mfaCode: string }) {
 	promptMfaCodeBus.emit('close', {
-		mfaCode: values.mfaCode,
+		mfaCode: mfaCode.value,
+		recoveryCode: recoveryCode.value,
 	});
 }
 
-function onClickSave() {
-	formBus.emit('submit');
-}
-
-function onFormReady(isReady: boolean) {
-	readyToSubmit.value = isReady;
+function onValidate(name: string, value: boolean) {
+	if (name === MFA_CODE_INPUT_NAME) {
+		isMfaCodeValid.value = value;
+	} else {
+		isRecoveryCodeValid.value = value;
+	}
 }
 </script>
 
 <template>
 	<Modal
-		width="460px"
-		height="300px"
+		width="500px"
+		height="400px"
 		max-height="640px"
 		:title="i18n.baseText('mfa.prompt.code.modal.title')"
 		:event-bus="promptMfaCodeBus"
@@ -53,12 +92,27 @@ function onFormReady(isReady: boolean) {
 	>
 		<template #content>
 			<div :class="[$style.formContainer]">
-				<n8n-form-inputs
-					data-test-id="mfa-code-form"
-					:inputs="formFields"
-					:event-bus="formBus"
-					@submit="onSubmit"
-					@ready="onFormReady"
+				<n8n-form-input
+					v-model="mfaCode"
+					name="mfaCode"
+					data-test-id="mfa-code-input"
+					:label="i18n.baseText('mfa.code.input.label')"
+					:placeholder="i18n.baseText('mfa.code.input.placeholder')"
+					:validators="MFA_CODE_VALIDATORS"
+					:validation-rules="[{ name: 'MAX_LENGTH', config: { maximum: 6 } }, { name: 'mfaCode' }]"
+					@validate="(value: boolean) => onValidate(MFA_CODE_INPUT_NAME, value)"
+				/>
+				<span> {{ i18n.baseText('mfa.prompt.code.modal.divider') }} </span>
+
+				<n8n-form-input
+					v-model="recoveryCode"
+					name="recoveryCode"
+					data-test-id="recovery-code-input"
+					:label="i18n.baseText('mfa.recoveryCode.input.label')"
+					:placeholder="i18n.baseText('mfa.recovery.input.placeholder')"
+					:validators="RECOVERY_CODE_VALIDATORS"
+					:validation-rules="[{ name: 'recoveryCode' }]"
+					@validate="(value: boolean) => onValidate('recoveryCodeInput', value)"
 				/>
 			</div>
 		</template>
@@ -66,9 +120,9 @@ function onFormReady(isReady: boolean) {
 			<div>
 				<n8n-button
 					float="right"
-					:disabled="!readyToSubmit"
 					:label="i18n.baseText('settings.personal.save')"
 					size="large"
+					:disabled="!anyFieldValid"
 					data-test-id="mfa-save-button"
 					@click="onClickSave"
 				/>
@@ -79,6 +133,12 @@ function onFormReady(isReady: boolean) {
 
 <style lang="scss" module>
 .formContainer {
-	padding-bottom: var(--spacing-xl);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-s);
+
+	span {
+		font-weight: 600;
+	}
 }
 </style>

packages/editor-ui/src/event-bus/mfa.ts

@@ -4,6 +4,7 @@ export const mfaEventBus = createEventBus();
 
 export interface MfaModalClosedEventPayload {
 	mfaCode: string;
+	recoveryCode: string;
 }
 
 export interface MfaModalEvents {

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

@@ -2582,6 +2582,7 @@
 	"mfa.code.button.continue": "Continue",
 	"mfa.recovery.button.verify": "Verify",
 	"mfa.button.back": "Back",
+	"mfa.recoveryCode.input.label": "Recovery code",
 	"mfa.code.input.label": "Two-factor code",
 	"mfa.code.input.placeholder": "e.g. 123456",
 	"mfa.recovery.input.label": "Recovery Code",
@@ -2608,7 +2609,8 @@
 	"mfa.setup.step2.toast.setupFinished.message": "Two-factor authentication enabled",
 	"mfa.setup.step2.toast.setupFinished.error.message": "Error enabling two-factor authentication",
 	"mfa.setup.step2.toast.tokenExpired.error.message": "MFA token expired. Close the modal and enable MFA again",
-	"mfa.prompt.code.modal.title": "Two-factor code required",
+	"mfa.prompt.code.modal.title": "Two-factor code or recovery code required",
+	"mfa.prompt.code.modal.divider": "Or",
 	"settings.personal.mfa.section.title": "Two-factor authentication (2FA)",
 	"settings.personal.personalisation": "Personalisation",
 	"settings.personal.theme": "Theme",

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

@@ -331,9 +331,10 @@ export const useUsersStore = defineStore(STORES.USERS, () => {
 		}
 	};
 
-	const disableMfa = async (mfaCode: string) => {
+	const disableMfa = async (mfaCode: string, recoveryCode: string) => {
 		await mfaApi.disableMfa(rootStore.restApiContext, {
 			token: mfaCode,
+			recoveryCode,
 		});
 
 		if (currentUser.value) {

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

@@ -226,7 +226,7 @@ async function disableMfa(payload: MfaModalEvents['closed']) {
 	}
 
 	try {
-		await usersStore.disableMfa(payload.mfaCode);
+		await usersStore.disableMfa(payload.mfaCode, payload.recoveryCode);
 
 		showToast({
 			title: i18n.baseText('settings.personal.mfa.toast.disabledMfa.title'),