feat(mfa): Wrap delete secondary email with MfaGuard

Because:
 - We want additional security for deleting a secondary email

This Commit:
 - Wraps the action to delete the secondary email with an MfaGuard
 - Adds and updates tests for secondary email delete

Closes: FXA-12228

Author: dschom

packages/fxa-auth-client/lib/client.ts

@@ -1690,6 +1690,14 @@ export default class AuthClient {
     );
   }
 
+  async recoveryEmailDestroyWithJwt(
+    jwt: string,
+    email: string,
+    headers?: Headers
+  ) {
+    return this.jwtPost('/mfa/recovery_email/destroy', jwt, { email }, headers);
+  }
+
   async recoveryEmailSetPrimaryEmail(
     sessionToken: hexstring,
     email: string,

packages/fxa-auth-server/docs/swagger/emails-api.ts

@@ -156,6 +156,36 @@ const RECOVERY_EMAIL_DESTROY_POST = {
   },
 };
 
+const MFA_RECOVERY_EMAIL_DESTROY_POST = {
+  ...TAGS_EMAILS,
+  description: '/mfa/recovery_email/destroy',
+  notes: [
+    dedent`
+      🔒 Authenticated with session MFA JWT (scope: mfa:email)
+
+      Delete an email address associated with the logged-in user.
+    `,
+  ],
+  plugins: {
+    'hapi-swagger': {
+      responses: {
+        400: {
+          description: dedent`
+            Failing requests may be caused by the following errors (this is not an exhaustive list):
+            - \`errno: 138\` - Unverified session
+          `,
+        },
+        401: {
+          description: dedent`
+            Failing requests may be caused by the following errors (this is not an exhaustive list):
+            - \`errno: 110\` - Invalid authentication token in request signature
+          `,
+        },
+      },
+    },
+  },
+};
+
 const RECOVERY_EMAIL_SET_PRIMARY_POST = {
   ...TAGS_EMAILS,
   description: '/recovery_email/set_primary',
@@ -235,6 +265,7 @@ const RECOVERY_EMAIL_SECONDARY_VERIFY_CODE_POST = {
 const API_DOCS = {
   EMAILS_REMINDERS_CAD_POST,
   RECOVERY_EMAIL_DESTROY_POST,
+  MFA_RECOVERY_EMAIL_DESTROY_POST,
   RECOVERY_EMAIL_POST,
   RECOVERY_EMAIL_RESEND_CODE_POST,
   RECOVERY_EMAIL_SECONDARY_RESEND_CODE_POST,

packages/fxa-auth-server/lib/routes/emails.js

@@ -299,7 +299,7 @@ module.exports = (
     },
   };
 
-  return [
+  const routes = [
     {
       method: 'GET',
       path: '/recovery_email/status',
@@ -860,6 +860,35 @@ module.exports = (
         return {};
       },
     },
+    {
+      method: 'POST',
+      path: '/mfa/recovery_email/destroy',
+      options: {
+        ...EMAILS_DOCS.MFA_RECOVERY_EMAIL_DESTROY_POST,
+        auth: {
+          strategy: 'mfa',
+          scope: ['mfa:email'],
+          payload: false,
+        },
+        validate: {
+          payload: isA.object({
+            email: validators
+              .email()
+              .required()
+              .description(DESCRIPTION.emailDelete),
+          }),
+        },
+        response: {},
+      },
+      handler: async function (request) {
+        return routes
+          .find(
+            (r) =>
+              r.path === '/v1/recovery_email/destroy' && r.method === 'POST'
+          )
+          .handler(request);
+      },
+    },
     {
       method: 'POST',
       path: '/recovery_email/set_primary',
@@ -1152,6 +1181,8 @@ module.exports = (
       },
     },
   ];
+
+  return routes;
 };
 
 // Exported for testing purposes.

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

@@ -4,16 +4,29 @@
 
 import 'mutationobserver-shim';
 import React from 'react';
-import { screen, fireEvent, act } from '@testing-library/react';
+import { screen, fireEvent, act, waitFor } from '@testing-library/react';
 import {
   renderWithRouter,
   mockEmail,
   mockAppContext,
   mockSettingsContext,
 } from '../../../models/mocks';
+import { createMockAccount } from './mocks';
 import { UnitRowSecondaryEmail } from '.';
 import { Account, AppContext } from '../../../models';
 import { SettingsContext } from '../../../models/contexts/SettingsContext';
+import { JwtTokenCache } from '../../../lib/cache';
+import AuthClient from 'fxa-auth-client/lib/client';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+
+const mockSessionToken = 'you-get-a-session-token';
+const mockJwt = 'and-you-get-a-jwt';
+
+jest.mock('../../../lib/cache', () => ({
+  __esModule: true,
+  ...jest.requireActual('../../../lib/cache'),
+  sessionToken: () => mockSessionToken,
+}));
 
 const account = {
   emails: [mockEmail(), mockEmail('[email protected]', false, false)],
@@ -308,46 +321,81 @@ describe('UnitRowSecondaryEmail', () => {
   });
 
   describe('deleteSecondaryEmail', () => {
+    let user: UserEvent;
+    const mockAuthClient = new AuthClient('http://localhost:9000');
+
+    const setupMockAuthClient = () => {
+      mockAuthClient.mfaRequestOtp = jest
+        .fn()
+        .mockResolvedValue({ code: 200, errno: 0 });
+      mockAuthClient.mfaOtpVerify = jest
+        .fn()
+        .mockResolvedValue({ accessToken: mockJwt });
+    };
+
+    const resetJwtCache = () => {
+      if (JwtTokenCache.hasToken(mockSessionToken, 'email')) {
+        JwtTokenCache.removeToken(mockSessionToken, 'email');
+      }
+    };
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      resetJwtCache();
+      setupMockAuthClient();
+      user = userEvent.setup();
+    });
+    /**
+     * This test case also implicitly covers that the MfaGuard is not displayed
+     * on success, so no need for a separate test for that specific case.
+     */
     it('displays a success message in the AlertBar', async () => {
-      const primaryEmail = mockEmail('[email protected]');
+      JwtTokenCache.setToken(mockSessionToken, 'email', mockJwt);
+
       const emails = [
-        { ...primaryEmail },
+        mockEmail('[email protected]'),
         mockEmail('[email protected]', false, false),
       ];
-      const account = {
+      const account = createMockAccount({
+        deleteSecondaryEmailWithJwt: jest.fn().mockResolvedValue(true),
         emails,
-        deleteSecondaryEmail: jest.fn().mockResolvedValue(true),
-      } as unknown as Account;
-      const context = mockAppContext({ account });
+      });
+
+      const appCtx = mockAppContext({
+        authClient: mockAuthClient as any,
+        account,
+      });
       const settingsContext = mockSettingsContext();
       renderWithRouter(
-        <AppContext.Provider value={context}>
+        <AppContext.Provider value={appCtx}>
           <SettingsContext.Provider value={settingsContext}>
             <UnitRowSecondaryEmail />
           </SettingsContext.Provider>
         </AppContext.Provider>
       );
 
-      await act(async () => {
-        fireEvent.click(screen.getByTestId('secondary-email-delete'));
-      });
+      await user.click(screen.getByTestId('secondary-email-delete'));
 
-      expect(settingsContext.alertBarInfo?.success).toHaveBeenCalledTimes(1);
-      expect(settingsContext.alertBarInfo?.success).toHaveBeenCalledWith(
-        '[email protected] successfully deleted'
+      await waitFor(() =>
+        expect(settingsContext.alertBarInfo?.success).toHaveBeenCalledTimes(1)
+      );
+      await waitFor(() =>
+        expect(settingsContext.alertBarInfo?.success).toHaveBeenCalledWith(
+          '[email protected] successfully deleted'
+        )
       );
     });
 
     it('displays an error message in the AlertBar', async () => {
-      const emails = [
-        mockEmail(),
-        mockEmail('[email protected]', false, false),
-      ];
-      const account = {
-        emails,
-        deleteSecondaryEmail: jest.fn().mockRejectedValue(new Error()),
-      } as unknown as Account;
-      const context = mockAppContext({ account });
+      JwtTokenCache.setToken(mockSessionToken, 'email', mockJwt);
+
+      const account = createMockAccount({
+        deleteSecondaryEmailWithJwt: jest.fn().mockRejectedValue(new Error()),
+      });
+      const context = mockAppContext({
+        authClient: mockAuthClient as any,
+        account,
+      });
       const settingsContext = mockSettingsContext();
       renderWithRouter(
         <AppContext.Provider value={context}>
@@ -362,5 +410,36 @@ describe('UnitRowSecondaryEmail', () => {
       });
       expect(settingsContext.alertBarInfo?.error).toHaveBeenCalledTimes(1);
     });
+
+    it('displays the MFA guard if the JWT is invalid', async () => {
+      JwtTokenCache.setToken(mockSessionToken, 'email', 'invalid-jwt');
+
+      const account = createMockAccount({
+        deleteSecondaryEmailWithJwt: jest
+          .fn()
+          .mockRejectedValue({ code: 401, errno: 110 }),
+      });
+
+      const context = mockAppContext({
+        authClient: mockAuthClient as any,
+        account,
+      });
+      const settingsContext = mockSettingsContext();
+      renderWithRouter(
+        <AppContext.Provider value={context}>
+          <SettingsContext.Provider value={settingsContext}>
+            <UnitRowSecondaryEmail />
+          </SettingsContext.Provider>
+        </AppContext.Provider>
+      );
+
+      await act(async () => {
+        fireEvent.click(screen.getByTestId('secondary-email-delete'));
+      });
+
+      expect(
+        await screen.findByText('Enter confirmation code')
+      ).toBeInTheDocument();
+    });
   });
 });