feat(passkey): Add new postRemovePasskey email template

vpomerleau · vpomerleau · commit 02197b87bc32 · 2026-04-09T13:33:58.000-07:00
Because: * We want to sent a security notification to users when a passkey is deleted This commit: * Adds the new template with MJML and TXT versions, l10n * Wires up the passkey deletion route to send out the email when deletion is successful Closes #FXA-13368
diff --git a/libs/accounts/email-renderer/gruntfile.js b/libs/accounts/email-renderer/gruntfile.js
@@ -92,6 +92,7 @@
         'src/templates/postConsumeRecoveryCode/en.ftl',
         'src/templates/postNewRecoveryCodes/en.ftl',
         'src/templates/postRemoveAccountRecovery/en.ftl',
+        'src/templates/postRemovePasskey/en.ftl',
         'src/templates/postRemoveRecoveryPhone/en.ftl',
         'src/templates/postRemoveSecondary/en.ftl',
         'src/templates/postRemoveTwoStepAuthentication/en.ftl',
diff --git a/libs/accounts/email-renderer/src/renderer/__snapshots__/fxa-email-renderer.spec.ts.snap b/libs/accounts/email-renderer/src/renderer/__snapshots__/fxa-email-renderer.spec.ts.snap
diff --git a/libs/accounts/email-renderer/src/renderer/email-link-builder.ts b/libs/accounts/email-renderer/src/renderer/email-link-builder.ts
@@ -26,6 +26,7 @@ const TEMPLATE_NAME_TO_CAMPAIGN_MAP: Record<string, string> = {
   postVerifySecondary: 'account-email-verified',
   postAddLinkedAccount: 'account-linked',
   postAddPasskey: 'passkey-registered',
+  postRemovePasskey: 'passkey-removed',
   postAddAccountRecoveryConfirm: 'confirm-account-recovery',
   verifyEmail: 'welcome',
   verifyLoginCode: 'new-device-signin',
@@ -64,6 +65,7 @@ const TEMPLATE_NAME_TO_CONTENT_MAP: Record<string, string> = {
   postVerifySecondary: 'account-email-verified',
   postAddLinkedAccount: 'account-linked',
   postAddPasskey: 'passkey-registered',
+  postRemovePasskey: 'passkey-removed',
   postAddAccountRecoveryConfirm: 'confirm-account-recovery',
   verifyEmail: 'welcome',
   verifyLoginCode: 'new-device-signin',
diff --git a/libs/accounts/email-renderer/src/renderer/fxa-email-renderer.spec.ts b/libs/accounts/email-renderer/src/renderer/fxa-email-renderer.spec.ts
@@ -356,6 +356,20 @@ describe('FxA Email Renderer', () => {
     expect(email.html).toMatchSnapshot('matches full email snapshot');
   });
 
+  it('should render renderPostRemovePasskey', async () => {
+    const email = await renderer.renderPostRemovePasskey({
+      date: 'Jan 1, 2024',
+      device: mockDevice,
+      location: mockLocation,
+      link: mockLink,
+      passwordChangeLink: mockLinkPasswordChange,
+      time: '12:00 PM',
+      ...defaultLayoutTemplateValues,
+    });
+    expect(email).toBeDefined();
+    expect(email.html).toMatchSnapshot('matches full email snapshot');
+  });
+
   it('should render renderPostAddPasskey with Sync note', async () => {
     const email = await renderer.renderPostAddPasskey({
       date: 'Jan 1, 2024',
diff --git a/libs/accounts/email-renderer/src/renderer/fxa-email-renderer.ts b/libs/accounts/email-renderer/src/renderer/fxa-email-renderer.ts
@@ -34,6 +34,7 @@ import * as PostChangeTwoStepAuthentication from '../templates/postChangeTwoStep
 import * as PostConsumeRecoveryCode from '../templates/postConsumeRecoveryCode';
 import * as PostNewRecoveryCodes from '../templates/postNewRecoveryCodes';
 import * as PostRemoveAccountRecovery from '../templates/postRemoveAccountRecovery';
+import * as PostRemovePasskey from '../templates/postRemovePasskey';
 import * as PostRemoveRecoveryPhone from '../templates/postRemoveRecoveryPhone';
 import * as PostRemoveSecondary from '../templates/postRemoveSecondary';
 import * as PostRemoveTwoStepAuthentication from '../templates/postRemoveTwoStepAuthentication';
@@ -308,6 +309,18 @@ export class FxaEmailRenderer extends EmailRenderer {
     });
   }
 
+  async renderPostRemovePasskey(
+    opts: WithFxaLayouts<PostRemovePasskey.TemplateData>
+  ) {
+    return this.renderEmail({
+      template: PostRemovePasskey.template,
+      version: PostRemovePasskey.version,
+      layout: PostRemovePasskey.layout,
+      includes: PostRemovePasskey.includes,
+      ...opts,
+    });
+  }
+
   async renderPostAddRecoveryPhone(
     opts: WithFxaLayouts<PostAddRecoveryPhone.TemplateData>
   ) {
diff --git a/libs/accounts/email-renderer/src/templates/index.ts b/libs/accounts/email-renderer/src/templates/index.ts
@@ -27,6 +27,7 @@ export * as postChangePrimary from './postChangePrimary';
 export * as postRemoveSecondary from './postRemoveSecondary';
 export * as postAddLinkedAccount from './postAddLinkedAccount';
 export * as postAddPasskey from './postAddPasskey';
+export * as postRemovePasskey from './postRemovePasskey';
 export * as postAddTwoStepAuthentication from './postAddTwoStepAuthentication';
 export * as postChangeTwoStepAuthentication from './postChangeTwoStepAuthentication';
 export * as postRemoveTwoStepAuthentication from './postRemoveTwoStepAuthentication';
diff --git a/libs/accounts/email-renderer/src/templates/postRemovePasskey/en.ftl b/libs/accounts/email-renderer/src/templates/postRemovePasskey/en.ftl
@@ -0,0 +1,6 @@
+postRemovePasskey-subject = Passkey deleted
+postRemovePasskey-preview = A passkey was removed from your account
+postRemovePasskey-title = You deleted your passkey
+postRemovePasskey-description = You’ll need to use another method to sign in.
+postRemovePasskey-requested-from = You requested this from:
+postRemovePasskey-action = Manage account
diff --git a/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.mjml b/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.mjml
@@ -0,0 +1,27 @@
+<%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/. %>
+
+<mj-section>
+  <mj-column>
+    <mj-text css-class="text-header">
+      <span data-l10n-id="postRemovePasskey-title">You deleted your passkey</span>
+    </mj-text>
+
+    <mj-text css-class="text-body">
+      <span data-l10n-id="postRemovePasskey-description">You’ll need to use another method to sign in.</span>
+    </mj-text>
+
+    <mj-text css-class="text-body-no-margin">
+      <span data-l10n-id="postRemovePasskey-requested-from">You requested this from:</span>
+    </mj-text>
+  </mj-column>
+</mj-section>
+<%- include('/partials/userInfo/index.mjml') %>
+
+<%- include('/partials/button/index.mjml', {
+  buttonL10nId: "postRemovePasskey-action",
+  buttonText: "Manage account"
+}) %>
+
+<%- include('/partials/automatedEmailChangePassword/index.mjml') %>
diff --git a/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.stories.ts b/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.stories.ts
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+import { includes, TemplateData } from './index';
+import { MOCK_USER_INFO } from '../../partials/userInfo/mocks';
+
+export default {
+  title: 'FxA Emails/Templates/postRemovePasskey',
+} as Meta;
+
+const data = {
+  ...MOCK_USER_INFO,
+  link: 'http://localhost:3030/settings',
+  passwordChangeLink: 'http://localhost:3030/settings/change_password',
+  supportUrl: 'https://support.mozilla.org',
+};
+
+const createStory = storyWithProps<TemplateData>(
+  'postRemovePasskey',
+  'Sent when a user successfully deletes a passkey.',
+  data,
+  includes
+);
+
+export const PostRemovePasskey = createStory();
diff --git a/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.ts b/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.ts
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { TemplateData as AutomatedEmailChangePasswordTemplateData } from '../../partials/automatedEmailChangePassword';
+import { TemplateData as UserInfoTemplateData } from '../../partials/userInfo';
+
+export type TemplateData = AutomatedEmailChangePasswordTemplateData &
+  UserInfoTemplateData & {
+    link: string;
+  };
+
+export const template = 'postRemovePasskey';
+export const version = 1;
+export const layout = 'fxa';
+export const includes = {
+  subject: {
+    id: 'postRemovePasskey-subject',
+    message: 'Passkey deleted',
+  },
+  action: {
+    id: 'postRemovePasskey-action',
+    message: 'Manage account',
+  },
+  preview: {
+    id: 'postRemovePasskey-preview',
+    message: 'A passkey was removed from your account',
+  },
+};
diff --git a/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.txt b/libs/accounts/email-renderer/src/templates/postRemovePasskey/index.txt
@@ -0,0 +1,10 @@
+postRemovePasskey-title = "You deleted your passkey"
+
+postRemovePasskey-description = "You’ll need to use another method to sign in."
+
+postRemovePasskey-requested-from = "You requested this from:"
+<%- include('/partials/userInfo/index.txt') %>
+
+<%- include('/partials/manageAccount/index.txt') %>
+
+<%- include('/partials/automatedEmailChangePassword/index.txt') %>
diff --git a/packages/fxa-auth-server/lib/routes/passkeys.spec.ts b/packages/fxa-auth-server/lib/routes/passkeys.spec.ts
@@ -128,6 +128,7 @@ describe('passkeys routes', () => {
     mockFxaMailer = {
       canSend: jest.fn().mockReturnValue(true),
       sendPostAddPasskeyEmail: jest.fn().mockResolvedValue(undefined),
+      sendPostRemovePasskeyEmail: jest.fn().mockResolvedValue(undefined),
     };
 
     Container.set(PasskeyService, mockPasskeyService);
@@ -611,6 +612,77 @@ describe('passkeys routes', () => {
         'passkeyDelete'
       );
     });
+
+    it('sends postRemovePasskey email on successful deletion', async () => {
+      await runTest(
+        '/passkey/{credentialId}',
+        {
+          auth: {
+            credentials: {
+              uid: UID,
+              id: SESSION_TOKEN_ID,
+              email: TEST_EMAIL,
+            },
+          },
+          params: { credentialId: CREDENTIAL_ID_B64 },
+        },
+        'DELETE'
+      );
+
+      expect(mockFxaMailer.canSend).toHaveBeenCalledWith('postRemovePasskey');
+      expect(mockFxaMailer.sendPostRemovePasskeyEmail).toHaveBeenCalledTimes(1);
+      expect(mockFxaMailer.sendPostRemovePasskeyEmail).toHaveBeenCalledWith(
+        expect.objectContaining({ to: TEST_EMAIL })
+      );
+    });
+
+    it('skips email when canSend returns false', async () => {
+      mockFxaMailer.canSend.mockReturnValue(false);
+
+      await runTest(
+        '/passkey/{credentialId}',
+        {
+          auth: {
+            credentials: {
+              uid: UID,
+              id: SESSION_TOKEN_ID,
+              email: TEST_EMAIL,
+            },
+          },
+          params: { credentialId: CREDENTIAL_ID_B64 },
+        },
+        'DELETE'
+      );
+
+      expect(mockFxaMailer.sendPostRemovePasskeyEmail).not.toHaveBeenCalled();
+    });
+
+    it('swallows email send errors and still returns empty object', async () => {
+      mockFxaMailer.sendPostRemovePasskeyEmail.mockRejectedValue(
+        new Error('email send failed')
+      );
+
+      const result = await runTest(
+        '/passkey/{credentialId}',
+        {
+          auth: {
+            credentials: {
+              uid: UID,
+              id: SESSION_TOKEN_ID,
+              email: TEST_EMAIL,
+            },
+          },
+          params: { credentialId: CREDENTIAL_ID_B64 },
+        },
+        'DELETE'
+      );
+
+      expect(result).toEqual({});
+      expect(log.error).toHaveBeenCalledWith(
+        'passkeys.deletePasskey.sendEmail',
+        expect.objectContaining({ err: expect.any(Error) })
+      );
+    });
   });
 
   describe('PATCH /passkey/{credentialId}', () => {
diff --git a/packages/fxa-auth-server/lib/routes/passkeys.ts b/packages/fxa-auth-server/lib/routes/passkeys.ts
@@ -274,6 +274,22 @@ class PasskeyHandler {
     // TODO: FXA-12914 — Glean event name needs to be defined in the Glean schema
     // await this.glean.passkey.deleteSuccess(request, { uid });
 
+    try {
+      if (this.fxaMailer.canSend('postRemovePasskey')) {
+        await this.fxaMailer.sendPostRemovePasskeyEmail({
+          ...FxaMailerFormat.account({ ...account, uid }),
+          ...(await FxaMailerFormat.metricsContext(request)),
+          ...FxaMailerFormat.localTime(request),
+          ...FxaMailerFormat.location(request),
+          ...FxaMailerFormat.device(request),
+          ...FxaMailerFormat.sync(false),
+        });
+      }
+    } catch (err) {
+      this.log.error('passkeys.deletePasskey.sendEmail', { err });
+      reportSentryError(err, request);
+    }
+
     return {};
   }
 
diff --git a/packages/fxa-auth-server/lib/senders/fxa-mailer.ts b/packages/fxa-auth-server/lib/senders/fxa-mailer.ts
@@ -15,6 +15,7 @@ import {
   postChangePrimary,
   postAddLinkedAccount,
   postAddPasskey,
+  postRemovePasskey,
   newDeviceLogin,
   postAddTwoStepAuthentication,
   postChangeTwoStepAuthentication,
@@ -430,6 +431,40 @@ export class FxaMailer extends FxaEmailRenderer {
     return this.sendEmail(opts, headers, rendered);
   }
 
+  async sendPostRemovePasskeyEmail(
+    opts: EmailSenderOpts &
+      EmailFlowParams &
+      OmitCommonLinks<TemplateData> &
+      OmitCommonLinks<postRemovePasskey.TemplateData>
+  ) {
+    const { template, version } = postRemovePasskey;
+    const { metricsEnabled } = opts;
+    const links = {
+      privacyUrl: this.linkBuilder.buildPrivacyLink(template, metricsEnabled),
+      supportUrl: this.linkBuilder.buildSupportLink(template, metricsEnabled),
+      passwordChangeLink: this.linkBuilder.buildPasswordChangeLink(
+        template,
+        metricsEnabled,
+        { email: opts.to }
+      ),
+      link: this.linkBuilder.buildAccountSettingsLink(
+        template,
+        metricsEnabled,
+        { email: opts.to, uid: opts.uid }
+      ),
+    };
+    const headers = this.buildHeaders(
+      { template, version },
+      { 'X-Link': links.link },
+      opts
+    );
+    const rendered = await this.renderPostRemovePasskey({
+      ...opts,
+      ...links,
+    });
+    return this.sendEmail(opts, headers, rendered);
+  }
+
   async sendNewDeviceLoginEmail(
     opts: EmailSenderOpts &
       EmailFlowParams &
