feat(emails): Add emails for sign-in with recovery methods

vpomerleau · vpomerleau · commit 6338c12c95ca · 2025-01-14T14:33:21.000-08:00
Because: * We want to notify users when their recovery methods are used This commit: * Adds new templates, tests, handlers * Small fixes to other recovery phone emails Closes #FXA-10921
diff --git a/packages/fxa-auth-server/lib/metrics/amplitude.js b/packages/fxa-auth-server/lib/metrics/amplitude.js
@@ -68,6 +68,8 @@ const EMAIL_TYPES = {
   postAddRecoveryPhone: '2fa',
   postRemoveRecoveryPhone: '2fa',
   postChangeRecoveryPhone: '2fa',
+  postSigninRecoveryPhone: 'login',
+  postSigninRecoveryCode: 'login',
   recovery: 'reset_password',
   unblockCode: 'unblock',
   verify: 'registration',
diff --git a/packages/fxa-auth-server/lib/senders/email.js b/packages/fxa-auth-server/lib/senders/email.js
@@ -87,6 +87,8 @@ module.exports = function (log, config, bounces) {
     postAddRecoveryPhone: 'recovery-phone-added',
     postChangeRecoveryPhone: 'recovery-phone-changed',
     postRemoveRecoveryPhone: 'recovery-phone-removed',
+    postSigninRecoveryPhone: 'signin-recovery-phone',
+    postSigninRecoveryCode: 'signin-recovery-code',
     recovery: 'forgot-password',
     unblockCode: 'new-unblock',
     verify: 'welcome',
@@ -140,6 +142,8 @@ module.exports = function (log, config, bounces) {
     postChangeAccountRecovery: 'manage-account',
     postRemoveAccountRecovery: 'manage-account',
     postAddRecoveryPhone: 'manage-account',
+    postSigninRecoveryPhone: 'manage-account',
+    postSigninRecoveryCode: 'manage-account',
     recovery: 'reset-password',
     unblockCode: 'unblock-code',
     verify: 'activate',
@@ -1584,19 +1588,14 @@ module.exports = function (log, config, bounces) {
 
   Mailer.prototype.postAddRecoveryPhoneEmail = function (message) {
     const templateName = 'postAddRecoveryPhone';
-    const links = this._generateLinks(
-      this.initiatePasswordResetUrl,
-      message,
-      {},
-      templateName
-    );
+    const links = this._generateSettingLinks(message, templateName);
     const [time, date] = this._constructLocalTimeString(
       message.timeZone,
       message.acceptLanguage
     );
 
     const headers = {
-      'X-Link': links.resetLink,
+      'X-Link': links.link,
     };
 
     return this.send({
@@ -1676,7 +1675,7 @@ module.exports = function (log, config, bounces) {
     );
 
     const headers = {
-      'X-Link': links.resetLink,
+      'X-Link': links.link,
     };
 
     return this.send({
@@ -1696,6 +1695,66 @@ module.exports = function (log, config, bounces) {
     });
   };
 
+  Mailer.prototype.postSigninRecoveryPhoneEmail = function (message) {
+    const templateName = 'postSigninRecoveryPhone';
+    const links = this._generateSettingLinks(message, templateName);
+    const [time, date] = this._constructLocalTimeString(
+      message.timeZone,
+      message.acceptLanguage
+    );
+
+    const headers = {
+      'X-Link': links.link,
+    };
+
+    return this.send({
+      ...message,
+      headers,
+      template: templateName,
+      templateValues: {
+        date,
+        device: this._formatUserAgentInfo(message),
+        privacyUrl: links.privacyUrl,
+        link: links.link,
+        resetLink: links.resetLink,
+        resetLinkAttributes: links.resetLinkAttributes,
+        supportLinkAttributes: links.supportLinkAttributes,
+        supportUrl: links.supportUrl,
+        time,
+      },
+    });
+  };
+
+  Mailer.prototype.postSigninRecoveryCodeEmail = function (message) {
+    const templateName = 'postSigninRecoveryCode';
+    const links = this._generateSettingLinks(message, templateName);
+    const [time, date] = this._constructLocalTimeString(
+      message.timeZone,
+      message.acceptLanguage
+    );
+
+    const headers = {
+      'X-Link': links.link,
+    };
+
+    return this.send({
+      ...message,
+      headers,
+      template: templateName,
+      templateValues: {
+        date,
+        device: this._formatUserAgentInfo(message),
+        privacyUrl: links.privacyUrl,
+        link: links.link,
+        resetLink: links.resetLink,
+        resetLinkAttributes: links.resetLinkAttributes,
+        supportLinkAttributes: links.supportLinkAttributes,
+        supportUrl: links.supportUrl,
+        time,
+      },
+    });
+  };
+
   Mailer.prototype.postAddAccountRecoveryEmail = function (message) {
     log.trace('mailer.postAddAccountRecoveryEmail', {
       email: message.email,
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/en.ftl b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/en.ftl
@@ -2,4 +2,4 @@ automated-email-reset = This is an automated email; if you did not authorize thi
   For more information, please visit <a data-l10n-name="supportLink">{ -brand-mozilla } Support</a>.
 # Variables:
 #  $resetLink (String) - Link to https://accounts.firefox.com/reset_password
-automated-email-reset-plaintext = If you did not change it, please reset your password now at { $resetLink }
+automated-email-reset-plaintext-v2 = If you did not authorize this action, please reset your password now at { $resetLink }
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/index.txt b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/index.txt
@@ -1 +1 @@
-automated-email-reset-plaintext = "If you did not change it, please reset your password now at <%- resetLink %>"
+automated-email-reset-plaintext-v2 = "If you did not authorize this action, please reset your password now at <%- resetLink %>"
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/_versions.json b/packages/fxa-auth-server/lib/senders/emails/templates/_versions.json
@@ -49,6 +49,8 @@
   "postAddRecoveryPhone": 1,
   "postChangeRecoveryPhone": 1,
   "postRemoveRecoveryPhone": 1,
+  "postSigninRecoveryPhone": 1,
+  "postSigninRecoveryCode": 1,
   "cadReminderFirst": 3,
   "cadReminderSecond": 3,
   "subscriptionAccountReminderFirst": 3,
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/en.ftl b/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/en.ftl
@@ -1,4 +1,5 @@
 postAddRecoveryPhone-subject = Recovery phone added
+postAddRecoveryPhone-preview = Account protected by two-step authentication
 postAddRecoveryPhone-title = You created a recovery phone number
 # Variables:
 #  $maskedLastFourPhoneNumber (String) - A bullet point mask with the last four digits of the user's phone number, e.g. ••••••1234
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/includes.json b/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/includes.json
@@ -6,5 +6,9 @@
   "action": {
     "id": "postAddRecoveryPhone-action",
     "message": "Manage account"
+  },
+  "preview": {
+    "id": "postAddRecoveryPhone-preview",
+    "message": "Account protected by two-step authentication"
   }
 }
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/index.stories.ts
@@ -25,4 +25,4 @@ const createStory = storyWithProps(
   }
 );
 
-export const PostChangePrimary = createStory();
+export const PostAddRecoveryPhone = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/index.txt b/packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/index.txt
@@ -5,7 +5,7 @@ postAddRecoveryPhone-description = "You added <%- maskedLastFourPhoneNumber %> a
 postAddRecoveryPhone-how-protect-plaintext = "How this protects your account:"
 <%- twoFactorSupportLink %>
 
-postAddRecoveryPhone-from-device = "You enabled it from:"
+postAddRecoveryPhone-enabled-device = "You enabled it from:"
 <%- include('/partials/userInfo/index.txt') %>
 
 <%- include('/partials/manageAccount/index.txt') %>
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postChangeRecoveryPhone/en.ftl b/packages/fxa-auth-server/lib/senders/emails/templates/postChangeRecoveryPhone/en.ftl
@@ -1,4 +1,5 @@
 postChangeRecoveryPhone-subject = Recovery phone updated
+postChangeRecoveryPhone-preview = Account protected by two-step authentication
 postChangeRecoveryPhone-title = You changed your recovery phone
 postChangeRecoveryPhone-description = You now have a new recovery phone. Your previous phone number was deleted.
 postChangeRecoveryPhone-requested-device = You requested it from:
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postChangeRecoveryPhone/includes.json b/packages/fxa-auth-server/lib/senders/emails/templates/postChangeRecoveryPhone/includes.json
@@ -2,5 +2,9 @@
   "subject": {
     "id": "postChangeRecoveryPhone-subject",
     "message": "Recovery phone updated"
+  },
+  "preview": {
+    "id": "postChangeRecoveryPhone-preview",
+    "message": "Account protected by two-step authentication"
   }
 }
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postChangeRecoveryPhone/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/templates/postChangeRecoveryPhone/index.stories.ts
@@ -19,4 +19,4 @@ const createStory = storyWithProps(
   }
 );
 
-export const PasswordReset = createStory();
+export const PostChangeRecoveryPhone = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postRemoveRecoveryPhone/en.ftl b/packages/fxa-auth-server/lib/senders/emails/templates/postRemoveRecoveryPhone/en.ftl
@@ -1,4 +1,5 @@
 postRemoveRecoveryPhone-subject = Recovery phone removed
+postRemoveRecoveryPhone-preview = Account protected by two-step authentication
 postRemoveRecoveryPhone-title = Recovery phone removed
 postRemoveRecoveryPhone-description = Your recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.
 postRemoveRecoveryPhone-requested-device = You requested it from:
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postRemoveRecoveryPhone/includes.json b/packages/fxa-auth-server/lib/senders/emails/templates/postRemoveRecoveryPhone/includes.json
@@ -2,5 +2,9 @@
   "subject": {
     "id": "postRemoveRecoveryPhone-subject",
     "message": "Recovery phone removed"
+  },
+  "preview": {
+    "id": "postRemoveRecoveryPhone-preview",
+    "message": "Account protected by two-step authentication"
   }
 }
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postRemoveRecoveryPhone/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/templates/postRemoveRecoveryPhone/index.stories.ts
@@ -19,4 +19,4 @@ const createStory = storyWithProps(
   }
 );
 
-export const PasswordReset = createStory();
+export const postRemoveRecoveryPhone = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/en.ftl b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/en.ftl
@@ -0,0 +1,6 @@
+postSigninRecoveryCode-subject = Backup authentication code used to sign in
+postSigninRecoveryCode-preview = Confirm account activity
+postSigninRecoveryCode-title = Your backup authentication code was used to sign in
+postSigninRecoveryCode-description = If you didn’t do this, you should change your password immediately to keep your account safe.
+postSigninRecoveryCode-device = You signed in from:
+postSigninRecoveryCode-action = Manage account
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/includes.json b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/includes.json
@@ -0,0 +1,14 @@
+{
+  "subject": {
+    "id": "postSigninRecoveryCode-subject",
+    "message": "Backup authentication code used to sign in"
+  },
+  "action": {
+    "id": "postSigninRecoveryCode-action",
+    "message": "Manage account"
+  },
+  "preview": {
+    "id": "postSigninRecoveryCode-preview",
+    "message": "Confirm account activity"
+  }
+}
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/index.mjml b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/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="postSigninRecoveryCode-title">Your backup authentication code was used to sign in</span>
+    </mj-text>
+
+    <mj-text css-class="text-body">
+      <span data-l10n-id="postSigninRecoveryCode-description">If you didn’t do this, you should change your password immediately to keep your account safe.</span>
+    </mj-text>
+
+    <mj-text css-class="text-body-no-margin">
+      <span data-l10n-id="postSigninRecoveryCode-device">You signed in from:</span>
+    </mj-text>
+  </mj-column>
+</mj-section>
+<%- include('/partials/userInfo/index.mjml') %>
+
+<%- include('/partials/button/index.mjml', {
+  buttonL10nId: "postSigninRecoveryCode-action",
+  buttonText: "Manage account"
+}) %>
+
+<%- include('/partials/automatedEmailResetPassword/index.mjml') %>
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/index.stories.ts
@@ -0,0 +1,23 @@
+/* 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 { MOCK_USER_INFO } from '../../partials/userInfo/mocks';
+
+export default {
+  title: 'FxA Emails/Templates/postSigninRecoveryCode',
+} as Meta;
+
+const createStory = storyWithProps(
+  'postSigninRecoveryCode',
+  'Sent when a user uses one of their backup authentication codes to sign in as an alternative to their authenticator app.',
+  {
+    ...MOCK_USER_INFO,
+    link: 'http://localhost:3030/settings',
+    resetLink: 'http://localhost:3030/reset_password',
+  }
+);
+
+export const postSigninRecoveryCode = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/index.txt b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryCode/index.txt
@@ -0,0 +1,12 @@
+postSigninRecoveryCode-title = "Your backup authentication code was used to sign in"
+
+postSigninRecoveryCode-description = "If you didn’t do this, you should change your password immediately to keep your account safe."
+
+postSigninRecoveryCode-device = "You signed in from:"
+<%- include('/partials/userInfo/index.txt') %>
+
+<%- include('/partials/manageAccount/index.txt') %>
+
+<%- include('/partials/automatedEmailResetPassword/index.txt') %>
+
+<%- include('/partials/support/index.txt') %>
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/en.ftl b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/en.ftl
@@ -0,0 +1,6 @@
+postSigninRecoveryPhone-subject = Recovery phone used to sign in
+postSigninRecoveryPhone-preview = Confirm account activity
+postSigninRecoveryPhone-title = Your recovery phone was used to sign in
+postSigninRecoveryPhone-description = If you didn’t do this, you should change your password immediately to keep your account safe.
+postSigninRecoveryPhone-device = You signed in from:
+postSigninRecoveryPhone-action = Manage account
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/includes.json b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/includes.json
@@ -0,0 +1,14 @@
+{
+  "subject": {
+    "id": "postSigninRecoveryPhone-subject",
+    "message": "Recovery phone used to sign in"
+  },
+  "action": {
+    "id": "postSigninRecoveryPhone-action",
+    "message": "Manage account"
+  },
+  "preview": {
+    "id": "postSigninRecoveryPhone-preview",
+    "message": "Confirm account activity"
+  }
+}
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/index.mjml b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/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="postSigninRecoveryPhone-title">Your recovery phone was used to sign in</span>
+    </mj-text>
+
+    <mj-text css-class="text-body">
+      <span data-l10n-id="postSigninRecoveryPhone-description">If you didn’t do this, you should change your password immediately to keep your account safe.</span>
+    </mj-text>
+
+    <mj-text css-class="text-body-no-margin">
+      <span data-l10n-id="postSigninRecoveryPhone-device">You signed in from:</span>
+    </mj-text>
+  </mj-column>
+</mj-section>
+<%- include('/partials/userInfo/index.mjml') %>
+
+<%- include('/partials/button/index.mjml', {
+  buttonL10nId: "postSigninRecoveryPhone-action",
+  buttonText: "Manage account"
+}) %>
+
+<%- include('/partials/automatedEmailResetPassword/index.mjml') %>
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/index.stories.ts
@@ -0,0 +1,23 @@
+/* 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 { MOCK_USER_INFO } from '../../partials/userInfo/mocks';
+
+export default {
+  title: 'FxA Emails/Templates/postSigninRecoveryPhone',
+} as Meta;
+
+const createStory = storyWithProps(
+  'postSigninRecoveryPhone',
+  'Sent when a user uses their recovery phone to sign in as an alternative to their authenticator app.',
+  {
+    ...MOCK_USER_INFO,
+    link: 'http://localhost:3030/settings',
+    resetLink: 'http://localhost:3030/reset_password',
+  }
+);
+
+export const postSigninRecoveryPhone = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/index.txt b/packages/fxa-auth-server/lib/senders/emails/templates/postSigninRecoveryPhone/index.txt
@@ -0,0 +1,12 @@
+postSigninRecoveryPhone-title = "Your recovery phone was used to sign in"
+
+postSigninRecoveryPhone-description = "If you didn’t do this, you should change your password immediately to keep your account safe."
+
+postSigninRecoveryPhone-device = "You signed in from:"
+<%- include('/partials/userInfo/index.txt') %>
+
+<%- include('/partials/manageAccount/index.txt') %>
+
+<%- include('/partials/automatedEmailResetPassword/index.txt') %>
+
+<%- include('/partials/support/index.txt') %>
diff --git a/packages/fxa-auth-server/test/local/senders/emails.ts b/packages/fxa-auth-server/test/local/senders/emails.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-automated-email-reset-plaintext = "If you did not change it, please reset your password now at <%- resetLink %>"`
	`1`	`+automated-email-reset-plaintext-v2 = "If you did not authorize this action, please reset your password now at <%- resetLink %>"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`postAddRecoveryPhone-subject = Recovery phone added`
	`2`	`+postAddRecoveryPhone-preview = Account protected by two-step authentication`
`2`	`3`	`postAddRecoveryPhone-title = You created a recovery phone number`
`3`	`4`	`# Variables:`
`4`	`5`	`# $maskedLastFourPhoneNumber (String) - A bullet point mask with the last four digits of the user's phone number, e.g. ••••••1234`
Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,9 @@`
`6`	`6`	`"action": {`
`7`	`7`	`"id": "postAddRecoveryPhone-action",`
`8`	`8`	`"message": "Manage account"`
	`9`	`+ },`
	`10`	`+ "preview": {`
	`11`	`+ "id": "postAddRecoveryPhone-preview",`
	`12`	`+ "message": "Account protected by two-step authentication"`
`9`	`13`	`}`
`10`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,4 @@ const createStory = storyWithProps(`
`25`	`25`	`}`
`26`	`26`	`);`
`27`	`27`
`28`		`-export const PostChangePrimary = createStory();`
	`28`	`+export const PostAddRecoveryPhone = createStory();`