feat: reset wallet on MaxKeyChainLengthExceeded error in social login

Author: lwin-kyaw

app/scripts/metamask-controller.js

@@ -3980,11 +3980,9 @@ export default class MetamaskController extends EventEmitter {
    * Unlock the vault with the latest global password.
    *
    * @param {string} password - latest global seedless password
-   * @returns {boolean} true if the sync was successful, false otherwise. Sync can fail if user is on a very old device
-   * and user has changed password more than 20 times since the last time they used the app on this device.
+   * @returns {void}
    */
   async syncPasswordAndUnlockWallet(password) {
-    let isPasswordSynced = false;
     const isSocialLoginFlow = this.onboardingController.getIsSocialLoginFlow();
     // check if the password is outdated
     let isPasswordOutdated = false;
@@ -4020,8 +4018,7 @@ export default class MetamaskController extends EventEmitter {
               });
           });
       }
-      isPasswordSynced = true;
-      return isPasswordSynced;
+      return;
     }
     const releaseLock = await this.seedlessOperationMutex.acquire();
 
@@ -4046,10 +4043,6 @@ export default class MetamaskController extends EventEmitter {
           globalPassword: password,
           maxKeyChainLength: 20,
         })
-        .then(() => {
-          // Case 1.
-          isPasswordSynced = true;
-        })
         .catch((err) => {
           log.error(`error while submitting global password: ${err.message}`);
           if (err instanceof RecoveryError) {
@@ -4064,28 +4057,10 @@ export default class MetamaskController extends EventEmitter {
               );
             }
             throw new JsonRpcError(-32603, err.message, err.data);
-          } else if (
-            err.message ===
-            SeedlessOnboardingControllerErrorMessage.MaxKeyChainLengthExceeded
-          ) {
-            isPasswordSynced = false;
-          } else {
-            throw err;
           }
+          throw err;
         });
 
-      // we are unable to recover the old pwd enc key as user is on a very old device.
-      // create a new vault and encrypt the new vault with the latest global password.
-      // also show a info popup to user.
-      if (!isPasswordSynced) {
-        // refresh the current auth tokens to get the latest auth tokens
-        await this.seedlessOnboardingController.refreshAuthTokens();
-        // create a new vault and encrypt the new vault with the latest global password
-        await this.restoreSocialBackupAndGetSeedPhrase(password);
-        // display info popup to user based on the password sync status
-        return isPasswordSynced;
-      }
-
       // re-encrypt the old vault data with the latest global password
       const keyringEncryptionKey =
         await this.seedlessOnboardingController.loadKeyringEncryptionKey();
@@ -4151,7 +4126,6 @@ export default class MetamaskController extends EventEmitter {
           data: { success: changePasswordSuccess },
         });
       }
-      return isPasswordSynced;
     } finally {
       releaseLock();
     }

test/e2e/page-objects/pages/login-page.ts

@@ -16,6 +16,10 @@ class LoginPage {
 
   private resetWalletButton: string;
 
+  private connectionsRemovedModal: string;
+
+  private connectionsRemovedModalButton: string;
+
   private incorrectPasswordMessage: { css: string; text: string };
 
   constructor(driver: Driver) {
@@ -37,6 +41,9 @@ class LoginPage {
     };
 
     this.resetWalletButton = '[data-testid="login-error-modal-button"]';
+    this.connectionsRemovedModal = '[data-testid="connections-removed-modal"]';
+    this.connectionsRemovedModalButton =
+      '[data-testid="connections-removed-modal-button"]';
   }
 
   async checkPageIsLoaded(): Promise<void> {
@@ -87,6 +94,16 @@ class LoginPage {
     );
     await this.driver.clickElementAndWaitToDisappear(this.resetWalletButton);
   }
+
+  async checkConnectionsRemovedModalIsDisplayed(): Promise<void> {
+    console.log('Checking if connections removed modal is displayed');
+    await this.driver.waitForSelector(this.connectionsRemovedModal);
+  }
+
+  async resetWalletFromConnectionsRemovedModal(): Promise<void> {
+    console.log('Resetting wallet from connections removed modal');
+    await this.driver.clickElement(this.connectionsRemovedModalButton);
+  }
 }
 
 export default LoginPage;

test/e2e/tests/account/unlock-wallet.spec.ts

@@ -1,4 +1,5 @@
 import { Mockttp } from 'mockttp';
+import { Browser } from 'selenium-webdriver';
 import { withFixtures } from '../../helpers';
 import FixtureBuilder from '../../fixture-builder';
 import { Driver } from '../../webdriver/driver';
@@ -9,11 +10,15 @@ import LoginPage from '../../page-objects/pages/login-page';
 import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
 import { MOCK_GOOGLE_ACCOUNT, WALLET_PASSWORD } from '../../constants';
 import { OAuthMockttpService } from '../../helpers/seedless-onboarding/mocks';
-import { importWalletWithSocialLoginOnboardingFlow } from '../../page-objects/flows/onboarding.flow';
+import {
+  importWalletWithSocialLoginOnboardingFlow,
+  onboardingMetricsFlow,
+} from '../../page-objects/flows/onboarding.flow';
 import SettingsPage from '../../page-objects/pages/settings/settings-page';
 import PrivacySettings from '../../page-objects/pages/settings/privacy-settings';
 import HeaderNavbar from '../../page-objects/pages/header-navbar';
 import ChangePasswordPage from '../../page-objects/pages/settings/change-password-page';
+import StartOnboardingPage from '../../page-objects/pages/onboarding/start-onboarding-page';
 
 describe('Unlock wallet - ', function () {
   it('handle incorrect password during unlock and login successfully', async function () {
@@ -59,6 +64,7 @@ describe('Unlock wallet - ', function () {
         },
       },
       async ({ driver }: { driver: Driver }) => {
+        await driver.delay(5_000);
         await importWalletWithSocialLoginOnboardingFlow({
           driver,
         });
@@ -96,9 +102,20 @@ describe('Unlock wallet - ', function () {
 
         const loginPage = new LoginPage(driver);
         await loginPage.loginToHomepage(WALLET_PASSWORD);
+        await loginPage.checkConnectionsRemovedModalIsDisplayed();
+        // reset wallet from connections removed modal
+        await loginPage.resetWalletFromConnectionsRemovedModal();
 
-        await homePage.checkPageIsLoaded();
-        await homePage.checkConnectionsRemovedModalIsDisplayed();
+        if (process.env.SELENIUM_BROWSER === Browser.FIREFOX) {
+          await onboardingMetricsFlow(driver, {
+            participateInMetaMetrics: false,
+            dataCollectionForMarketing: false,
+          });
+        }
+
+        // check onboarding welcome page is loaded after resetting the wallet
+        const startOnboardingPage = new StartOnboardingPage(driver);
+        await startOnboardingPage.checkLoginPageIsLoaded();
       },
     );
   });

test/e2e/tests/reset-wallet/reset-wallet.spec.ts

@@ -1,5 +1,4 @@
 import { Mockttp } from 'mockttp';
-import { AuthConnection } from '@metamask/seedless-onboarding-controller';
 import { Browser } from 'selenium-webdriver';
 import FixtureBuilder from '../../fixture-builder';
 import { withFixtures } from '../../helpers';
@@ -21,70 +20,6 @@ import OnboardingPasswordPage from '../../page-objects/pages/onboarding/onboardi
 import SecureWalletPage from '../../page-objects/pages/onboarding/secure-wallet-page';
 
 describe('Reset Wallet - ', function () {
-  it('should be able to reset wallet when encounters un-recoverable error in social login unlock', async function () {
-    await withFixtures(
-      {
-        fixtures: new FixtureBuilder({ onboarding: true }).build(),
-        title: this.test?.fullTitle(),
-        ignoredConsoleErrors: [
-          'unable to proceed, wallet is locked',
-          'The snap "npm:@metamask/message-signing-snap" has been terminated during execution', // issue #37342
-          'npm:@metamask/message-signing-snap was stopped and the request was cancelled. This is likely because the Snap crashed.',
-        ],
-        testSpecificMock: (server: Mockttp) => {
-          // using this to mock the OAuth Service (Web Authentication flow + Auth server)
-          const oAuthMockttpService = new OAuthMockttpService();
-          return oAuthMockttpService.setup(server, {
-            userEmail: MOCK_GOOGLE_ACCOUNT,
-            throwAuthenticationErrorAtUnlock: true, // <=== This is intentional error to test the reset wallet flow
-            passwordOutdated: true,
-          });
-        },
-      },
-      async ({ driver }: { driver: Driver }) => {
-        await importWalletWithSocialLoginOnboardingFlow({
-          driver,
-        });
-
-        const homePage = new HomePage(driver);
-        await homePage.checkPageIsLoaded();
-
-        const headerNavbar = new HeaderNavbar(driver);
-
-        await headerNavbar.lockMetaMask();
-
-        const loginPage = new LoginPage(driver);
-
-        // login should fail due to Authentication Error
-        await loginPage.loginToHomepage(WALLET_PASSWORD);
-
-        // reset the wallet
-        await loginPage.resetWallet();
-
-        if (process.env.SELENIUM_BROWSER === Browser.FIREFOX) {
-          // In Firefox, we need to go to the metametrics page first
-          await onboardingMetricsFlow(driver, {
-            participateInMetaMetrics: true,
-            dataCollectionForMarketing: false,
-          });
-        }
-
-        // should be on the welcome page after resetting the wallet
-        const startOnboardingPage = new StartOnboardingPage(driver);
-        await startOnboardingPage.checkLoginPageIsLoaded();
-
-        // import wallet with social login and start a new session
-        await startOnboardingPage.importWalletWithSocialLogin(
-          AuthConnection.Google,
-        );
-
-        await loginPage.checkPageIsLoaded();
-        await loginPage.loginToHomepage(WALLET_PASSWORD);
-        await homePage.headerNavbar.checkPageIsLoaded();
-      },
-    );
-  });
-
   it('creates a new wallet with SRP and completes the onboarding process after resetting the wallet', async function () {
     await withFixtures(
       {
@@ -123,7 +58,9 @@ describe('Reset Wallet - ', function () {
         await loginPage.loginToHomepage(WALLET_PASSWORD);
 
         // reset the wallet
-        await loginPage.resetWallet();
+        await loginPage.checkConnectionsRemovedModalIsDisplayed();
+        // reset wallet from connections removed modal
+        await loginPage.resetWalletFromConnectionsRemovedModal();
 
         if (process.env.SELENIUM_BROWSER === Browser.FIREFOX) {
           // In Firefox, we need to go to the metametrics page first
@@ -205,7 +142,9 @@ describe('Reset Wallet - ', function () {
         await loginPage.loginToHomepage(WALLET_PASSWORD);
 
         // reset the wallet
-        await loginPage.resetWallet();
+        await loginPage.checkConnectionsRemovedModalIsDisplayed();
+        // reset wallet from connections removed modal
+        await loginPage.resetWalletFromConnectionsRemovedModal();
 
         if (process.env.SELENIUM_BROWSER === Browser.FIREFOX) {
           // In Firefox, we need to go to the metametrics page first

ui/components/app/connections-removed-modal/connections-removed-modal.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import React from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   AlignItems,
@@ -24,17 +23,17 @@ import {
   ModalBody,
   ButtonSize,
 } from '../../component-library';
-import { setShowConnectionsRemovedModal } from '../../../store/actions';
+
+type ConnectionsRemovedModalProps = {
+  onConfirm: () => void;
+};
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export default function ConnectionsRemovedModal() {
+export default function ConnectionsRemovedModal({
+  onConfirm,
+}: ConnectionsRemovedModalProps) {
   const t = useI18nContext();
-  const dispatch = useDispatch();
-
-  const onConfirm = useCallback(() => {
-    dispatch(setShowConnectionsRemovedModal(false));
-  }, [dispatch]);
 
   return (
     <Modal
@@ -64,7 +63,12 @@ export default function ConnectionsRemovedModal() {
         </ModalHeader>
         <ModalBody>{t('connectionsRemovedModalDescription')}</ModalBody>
         <ModalFooter>
-          <Button size={ButtonSize.Lg} block onClick={onConfirm}>
+          <Button
+            size={ButtonSize.Lg}
+            block
+            onClick={onConfirm}
+            data-testid="connections-removed-modal-button"
+          >
             {t('gotIt')}
           </Button>
         </ModalFooter>

ui/pages/unlock-page/unlock-page.component.js

@@ -45,6 +45,7 @@ import { withMetaMetrics } from '../../contexts/metametrics';
 import LoginErrorModal from '../onboarding-flow/welcome/login-error-modal';
 import { LOGIN_ERROR } from '../onboarding-flow/welcome/types';
 import MetaFoxHorizontalLogo from '../../components/ui/metafox-logo/horizontal-logo';
+import ConnectionsRemovedModal from '../../components/app/connections-removed-modal';
 import { getCaretCoordinates } from './unlock-page.util';
 import ResetPasswordModal from './reset-password-modal';
 import FormattedCounter from './formatted-counter';
@@ -129,6 +130,7 @@ class UnlockPage extends Component {
     isSubmitting: false,
     unlockDelayPeriod: 0,
     showLoginErrorModal: false,
+    showConnectionsRemovedModal: false,
   };
 
   failed_attempts = 0;
@@ -269,6 +271,7 @@ class UnlockPage extends Component {
     let finalUnlockDelayPeriod = 0;
     let errorReason;
     let shouldShowLoginErrorModal = false;
+    let shouldShowConnectionsRemovedModal = false;
 
     // Check if we are in the onboarding flow
     if (!isOnboardingCompleted) {
@@ -308,6 +311,10 @@ class UnlockPage extends Component {
           shouldShowLoginErrorModal = true;
         }
         break;
+      case SeedlessOnboardingControllerErrorMessage.MaxKeyChainLengthExceeded:
+        finalErrorMessage = message;
+        shouldShowConnectionsRemovedModal = true;
+        break;
       default:
         finalErrorMessage = message;
         break;
@@ -340,6 +347,7 @@ class UnlockPage extends Component {
       error: finalErrorMessage,
       unlockDelayPeriod: finalUnlockDelayPeriod,
       showLoginErrorModal: shouldShowLoginErrorModal,
+      showConnectionsRemovedModal: shouldShowConnectionsRemovedModal,
     });
   };
 
@@ -461,7 +469,11 @@ class UnlockPage extends Component {
   };
 
   onResetWallet = async () => {
-    this.setState({ showLoginErrorModal: false });
+    this.setState({
+      showLoginErrorModal: false,
+      showConnectionsRemovedModal: false,
+      showResetPasswordModal: false,
+    });
     await this.props.resetWallet();
     await this.props.forceUpdateMetamaskState();
     this.props.navigate(DEFAULT_ROUTE, { replace: true });
@@ -474,6 +486,7 @@ class UnlockPage extends Component {
       isLocked,
       showResetPasswordModal,
       showLoginErrorModal,
+      showConnectionsRemovedModal,
     } = this.state;
     const { isOnboardingCompleted, isSocialLoginFlow } = this.props;
     const { t } = this.context;
@@ -504,6 +517,9 @@ class UnlockPage extends Component {
             loginError={LOGIN_ERROR.RESET_WALLET}
           />
         )}
+        {showConnectionsRemovedModal && (
+          <ConnectionsRemovedModal onConfirm={this.onResetWallet} />
+        )}
         <Box
           as="form"
           display={Display.Flex}