bug(settings): isInvalidJwtError not check when invoking confirmReplaceTotp

Because:
- If the errHandler isn't called, the MfaGuard can't resolve an expired JWT.

This Commit:
- Calls the errorHandler in the event the error is of type invalid jwt.

Author: dschom

packages/fxa-settings/src/components/Settings/Page2faChange/index.test.tsx

@@ -9,6 +9,7 @@ import { MOCK_TOTP_INFO, Subject } from './mocks';
 import userEvent from '@testing-library/user-event';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import GleanMetrics from '../../../lib/glean';
+import { JwtNotFoundError } from '../../../lib/cache';
 
 const mockNavigate = jest.fn();
 jest.mock('../../../lib/hooks/useNavigateWithQuery', () => ({
@@ -34,6 +35,12 @@ jest.mock('../../../lib/glean', () => ({
   },
 }));
 
+const mockErrorHandler = jest.fn();
+jest.mock('react-error-boundary', () => ({
+  ...jest.requireActual('react-error-boundary'),
+  useErrorHandler: () => mockErrorHandler,
+}));
+
 describe('Page2faChange', () => {
   it('renders as expected', async () => {
     renderWithLocalizationProvider(<Subject />);
@@ -144,4 +151,26 @@ describe('Page2faChange', () => {
       )
     ).toBeInTheDocument();
   });
+
+  it('invokes the MFA errorHandler if the error is due to an expired jwt', async () => {
+    const missingJwtError = new JwtNotFoundError();
+    renderWithLocalizationProvider(
+      <Subject
+        account={{
+          startReplaceTotp: jest.fn().mockResolvedValue(MOCK_TOTP_INFO),
+          confirmReplaceTotp: jest.fn().mockRejectedValue(missingJwtError),
+        }}
+      />
+    );
+    const codeInput = await screen.findByRole('textbox', {
+      name: 'Enter 6-digit code',
+    });
+    const continueButton = await screen.findByRole('button', {
+      name: 'Continue',
+    });
+    await userEvent.type(codeInput, '000000');
+    await userEvent.click(continueButton);
+
+    expect(mockErrorHandler).toHaveBeenCalledWith(missingJwtError);
+  });
 });

packages/fxa-settings/src/components/Settings/Page2faChange/index.tsx

@@ -18,6 +18,8 @@ import VerifiedSessionGuard from '../VerifiedSessionGuard';
 import { GleanClickEventType2FA } from '../../../lib/types';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import { MfaGuard } from '../MfaGuard';
+import { isInvalidJwtError } from '../../../lib/mfa-guard-utils';
+import { useErrorHandler } from 'react-error-boundary';
 
 export const MfaGuardedPage2faChange = (_: RouteComponentProps) => {
   return (
@@ -37,6 +39,7 @@ export const Page2faChange = () => {
     loading: totpInfoLoading,
     error: totpInfoError,
   } = useTotpReplace();
+  const errorHandler = useErrorHandler();
 
   const localizedPageTitle = ftlMsgResolver.getMsg(
     'page-2fa-change-title',
@@ -103,6 +106,10 @@ export const Page2faChange = () => {
     try {
       await account.confirmReplaceTotp(code);
     } catch (error) {
+      if (isInvalidJwtError(error)) {
+        errorHandler(error);
+        return { error: true };
+      }
       return { error: true };
     }
 

packages/fxa-settings/src/lib/hooks/useTotpReplace/index.tsx

@@ -3,12 +3,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { useEffect, useState } from 'react';
+import { useErrorHandler } from 'react-error-boundary';
 import { useAccount, useSession } from '../../../models';
 import { TotpInfo } from '../../types';
+import { isInvalidJwtError } from '../../mfa-guard-utils';
 
 export const useTotpReplace = () => {
   const account = useAccount();
   const session = useSession();
+  const errorHandler = useErrorHandler();
 
   const [totpInfo, setTotpInfo] = useState<TotpInfo | undefined>();
   const [loading, setLoading] = useState(true);
@@ -27,6 +30,10 @@ export const useTotpReplace = () => {
         const result = await account.startReplaceTotp();
         if (!cancelled) setTotpInfo(result);
       } catch (err) {
+        if (isInvalidJwtError(err)) {
+          errorHandler(err);
+          return;
+        }
         if (!cancelled) setError(err as Error);
       } finally {
         if (!cancelled) setLoading(false);
@@ -38,7 +45,7 @@ export const useTotpReplace = () => {
     return () => {
       cancelled = true;
     };
-  }, [account, session.verified]);
+  }, [account, session.verified, errorHandler]);
 
   return {
     totpInfo,