refactor(account): remove auto backup code generation after MFA binding (#8138)

Remove the automatic backup code generation check and navigation after
binding passkey or TOTP. Users can still manually set up backup codes
through the account center if needed.

Author: wangsijie

packages/account/src/pages/PasskeyBinding/index.tsx

@@ -12,34 +12,30 @@ import {
   createWebAuthnRegistration,
   verifyWebAuthnRegistration,
   addWebAuthnMfa,
-  getMfaVerifications,
 } from '@ac/apis/mfa';
 import ErrorPage from '@ac/components/ErrorPage';
 import VerificationMethodList from '@ac/components/VerificationMethodList';
-import { backupCodesGenerateRoute, passkeySuccessRoute } from '@ac/constants/routes';
+import { passkeySuccessRoute } from '@ac/constants/routes';
 import useApi from '@ac/hooks/use-api';
 import useErrorHandler from '@ac/hooks/use-error-handler';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
 
 import styles from './index.module.scss';
 
 const isWebAuthnEnabled = (mfa?: Mfa) => mfa?.factors.includes(MfaFactor.WebAuthn) ?? false;
-const isBackupCodeEnabled = (mfa?: Mfa) => mfa?.factors.includes(MfaFactor.BackupCode) ?? false;
 
 const PasskeyBinding = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { loading } = useContext(LoadingContext);
   const { accountCenterSettings, experienceSettings, verificationId, setVerificationId, setToast } =
     useContext(PageContext);
-  const getMfaRequest = useApi(getMfaVerifications);
   const createRegistrationRequest = useApi(createWebAuthnRegistration);
   const verifyRegistrationRequest = useApi(verifyWebAuthnRegistration);
   const addWebAuthnRequest = useApi(addWebAuthnMfa);
   const handleError = useErrorHandler();
 
   const [isWebAuthnSupported, setIsWebAuthnSupported] = useState<boolean>();
-  const [hasBackupCodes, setHasBackupCodes] = useState<boolean>();
   // Pre-fetched WebAuthn registration options to ensure startRegistration() is called
   // synchronously in the click handler (required for iOS Safari/WKWebView user gesture)
   const [registrationData, setRegistrationData] = useState<{
@@ -75,23 +71,6 @@ const PasskeyBinding = () => {
     void fetchRegistrationOptions();
   }, [verificationId, createRegistrationRequest]);
 
-  // Check if user has backup codes
-  useEffect(() => {
-    const checkExistingMfa = async () => {
-      const [error, result] = await getMfaRequest();
-
-      if (error) {
-        setHasBackupCodes(false);
-        return;
-      }
-
-      const hasBackup = result?.some((mfa) => mfa.type === MfaFactor.BackupCode) ?? false;
-      setHasBackupCodes(hasBackup);
-    };
-
-    void checkExistingMfa();
-  }, [getMfaRequest]);
-
   const handleAddPasskey = useCallback(async () => {
     if (!verificationId || loading || !registrationData) {
       return;
@@ -143,18 +122,10 @@ const PasskeyBinding = () => {
       return;
     }
 
-    // Step 4: Navigate to success or backup code setup
-    if (isBackupCodeEnabled(experienceSettings?.mfa) && !hasBackupCodes) {
-      void navigate(backupCodesGenerateRoute, { replace: true });
-      return;
-    }
-
     void navigate(passkeySuccessRoute, { replace: true });
   }, [
     addWebAuthnRequest,
-    experienceSettings?.mfa,
     handleError,
-    hasBackupCodes,
     loading,
     navigate,
     registrationData,

packages/account/src/pages/TotpBinding/index.tsx

@@ -15,7 +15,7 @@ import PageContext from '@ac/Providers/PageContextProvider/PageContext';
 import { getMfaVerifications, generateTotpSecret, addTotpMfa } from '@ac/apis/mfa';
 import ErrorPage from '@ac/components/ErrorPage';
 import VerificationMethodList from '@ac/components/VerificationMethodList';
-import { authenticatorAppSuccessRoute, backupCodesGenerateRoute } from '@ac/constants/routes';
+import { authenticatorAppSuccessRoute } from '@ac/constants/routes';
 import useApi from '@ac/hooks/use-api';
 import useErrorHandler from '@ac/hooks/use-error-handler';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
@@ -27,7 +27,6 @@ const isCodeReady = (code: string[]) => {
 };
 
 const isTotpEnabled = (mfa?: Mfa) => mfa?.factors.includes(MfaFactor.TOTP) ?? false;
-const isBackupCodeEnabled = (mfa?: Mfa) => mfa?.factors.includes(MfaFactor.BackupCode) ?? false;
 
 const TotpBinding = () => {
   const { t } = useTranslation();
@@ -52,7 +51,6 @@ const TotpBinding = () => {
   const [codeInput, setCodeInput] = useState<string[]>([]);
   const [errorMessage, setErrorMessage] = useState<string>();
   const [hasTotpAlready, setHasTotpAlready] = useState<boolean>();
-  const [hasBackupCodes, setHasBackupCodes] = useState<boolean>();
 
   // Check if TOTP already exists on mount
   useEffect(() => {
@@ -62,14 +60,11 @@ const TotpBinding = () => {
       if (error) {
         // If there's an error, we'll let the user continue and the backend will validate
         setHasTotpAlready(false);
-        setHasBackupCodes(false);
         return;
       }
 
       const hasTotp = result?.some((mfa) => mfa.type === MfaFactor.TOTP) ?? false;
-      const hasBackup = result?.some((mfa) => mfa.type === MfaFactor.BackupCode) ?? false;
       setHasTotpAlready(hasTotp);
-      setHasBackupCodes(hasBackup);
     };
 
     void checkExistingMfa();
@@ -144,19 +139,12 @@ const TotpBinding = () => {
         return;
       }
 
-      if (isBackupCodeEnabled(experienceSettings?.mfa) && !hasBackupCodes) {
-        void navigate(backupCodesGenerateRoute, { replace: true });
-        return;
-      }
-
       void navigate(authenticatorAppSuccessRoute, { replace: true });
     },
     [
       addTotpRequest,
       codeInput,
-      experienceSettings?.mfa,
       handleError,
-      hasBackupCodes,
       loading,
       navigate,
       secret,