feat(mfa): allow disabling 2FA with a backup code when authenticator is lost

app/javascript/dashboard/api/mfa.js

@@ -14,9 +14,9 @@ class MfaAPI extends ApiClient {
     return axios.post(`${this.url}/verify`, { otp_code: otpCode });
   }
 
-  disable(password, otpCode) {
+  disable(password, { otpCode, backupCode } = {}) {
     return axios.delete(this.url, {
-      data: { password, otp_code: otpCode },
+      data: { password, otp_code: otpCode, backup_code: backupCode },
     });
   }
 

app/javascript/dashboard/i18n/locale/en/mfa.json

@@ -51,10 +51,14 @@
     },
     "DISABLE": {
       "TITLE": "Disable Two-Factor Authentication",
-      "DESCRIPTION": "You'll need to enter your password and a verification code to disable two-factor authentication.",
+      "DESCRIPTION": "You'll need to enter your password and either a verification code from your authenticator app or a backup code to disable two-factor authentication.",
       "PASSWORD": "Password",
       "OTP_CODE": "Verification Code",
       "OTP_CODE_PLACEHOLDER": "000000",
+      "BACKUP_CODE": "Backup Code",
+      "BACKUP_CODE_PLACEHOLDER": "Enter one of your backup codes",
+      "USE_BACKUP_CODE": "Lost access to your authenticator? Use a backup code instead",
+      "USE_OTP_CODE": "Use a verification code from your authenticator app",
       "CONFIRM": "Disable 2FA",
       "CANCEL": "Cancel",
       "SUCCESS": "Two-factor authentication has been disabled",

app/javascript/dashboard/routes/dashboard/settings/profile/MfaManagementActions.vue

@@ -31,6 +31,8 @@ const backupCodesDialogRef = ref(null);
 // Form values
 const disablePassword = ref('');
 const disableOtpCode = ref('');
+const disableBackupCode = ref('');
+const useBackupCodeToDisable = ref(false);
 const regenerateOtpCode = ref('');
 
 // Utility functions
@@ -54,10 +56,17 @@ const downloadBackupCodes = () => {
 const handleDisableMfa = async () => {
   emit('disableMfa', {
     password: disablePassword.value,
-    otpCode: disableOtpCode.value,
+    otpCode: useBackupCodeToDisable.value ? '' : disableOtpCode.value,
+    backupCode: useBackupCodeToDisable.value ? disableBackupCode.value : '',
   });
 };
 
+const toggleDisableMethod = () => {
+  useBackupCodeToDisable.value = !useBackupCodeToDisable.value;
+  disableOtpCode.value = '';
+  disableBackupCode.value = '';
+};
+
 const handleRegenerateBackupCodes = async () => {
   emit('regenerateBackupCodes', {
     otpCode: regenerateOtpCode.value,
@@ -68,6 +77,8 @@ const handleRegenerateBackupCodes = async () => {
 const resetDisableForm = () => {
   disablePassword.value = '';
   disableOtpCode.value = '';
+  disableBackupCode.value = '';
+  useBackupCodeToDisable.value = false;
   disableDialogRef.value?.close();
 };
 
@@ -157,12 +168,32 @@ defineExpose({
           :label="$t('MFA_SETTINGS.DISABLE.PASSWORD')"
         />
         <Input
+          v-if="!useBackupCodeToDisable"
           v-model="disableOtpCode"
           type="text"
           maxlength="6"
           :label="$t('MFA_SETTINGS.DISABLE.OTP_CODE')"
           :placeholder="$t('MFA_SETTINGS.DISABLE.OTP_CODE_PLACEHOLDER')"
         />
+        <Input
+          v-else
+          v-model="disableBackupCode"
+          type="text"
+          maxlength="8"
+          :label="$t('MFA_SETTINGS.DISABLE.BACKUP_CODE')"
+          :placeholder="$t('MFA_SETTINGS.DISABLE.BACKUP_CODE_PLACEHOLDER')"
+        />
+        <button
+          type="button"
+          class="text-sm text-n-brand hover:underline"
+          @click="toggleDisableMethod"
+        >
+          {{
+            useBackupCodeToDisable
+              ? $t('MFA_SETTINGS.DISABLE.USE_OTP_CODE')
+              : $t('MFA_SETTINGS.DISABLE.USE_BACKUP_CODE')
+          }}
+        </button>
       </div>
     </Dialog>
 

app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue

@@ -104,9 +104,9 @@ const cancelSetup = () => {
 };
 
 // Disable MFA
-const disableMfa = async ({ password, otpCode }) => {
+const disableMfa = async ({ password, otpCode, backupCode }) => {
   try {
-    await mfaAPI.disable(password, otpCode);
+    await mfaAPI.disable(password, { otpCode, backupCode });
     mfaEnabled.value = false;
     backupCodesGenerated.value = false;
     managementActionsRef.value?.resetDisableForm();