feat(react): Send fxaLogin webchannel message conditionally after pas…

…sword reset

Because:
* The browser should be be notified when a PW reset occurs on a verified account through the Sync flow, as this logs the user in

This commit:
* Conditionally runs the fxaLogin command with required account data after a password reset with or without recovery key, when the flow is sync
* Receives other values off the account reset call needed for webchannel account data
* Temporarily checks for SyncBasic and SyncDesktop flows to run the check because we don't need to port over context in local storage logic (which would account for SyncDesktop only), since we are switching to codes soon
* Sends up `service` with the email request so we can append the param and check when link is received (causing the  SyncBasic integration)
* Removes resendResetPassword and calls resetPassword where needed since the code was duplicated

Fixes FXA-7172

packages/fxa-graphql-api/src/gql/dto/payload/password-forgot.ts

@@ -64,4 +64,7 @@ export class AccountResetPayload {
 
   @Field({ nullable: true })
   public keyFetchToken?: string;
+
+  @Field({ nullable: true })
+  public unwrapBKey?: string;
 }

packages/fxa-settings/src/components/LinkExpiredResetPassword/index.test.tsx

@@ -3,11 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { LocationProvider } from '@reach/router';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { LinkExpiredResetPassword } from '.';
-import { mockAppContext, MOCK_ACCOUNT } from '../../models/mocks';
-import { Account, AppContext } from '../../models';
+import {
+  mockAppContext,
+  MOCK_ACCOUNT,
+  createHistoryWithQuery,
+  renderWithRouter,
+  createAppContext,
+} from '../../models/mocks';
+import { Account } from '../../models';
 import { FIREFOX_NOREPLY_EMAIL } from 'fxa-settings/src/constants';
 
 const viewName = 'example-view-name';
@@ -17,25 +22,31 @@ jest.mock('@reach/router', () => ({
   ...jest.requireActual('@reach/router'),
 }));
 
-function renderLinkExpiredResetPasswordWithAccount(account: Account) {
-  render(
-    <AppContext.Provider value={mockAppContext({ account })}>
-      <LocationProvider>
-        <LinkExpiredResetPassword {...{ email, viewName }} />
-      </LocationProvider>
-    </AppContext.Provider>
+const route = '/bloop';
+const renderWithHistory = (ui: any, queryParams = '', account?: Account) => {
+  const history = createHistoryWithQuery(route, queryParams);
+  return renderWithRouter(
+    ui,
+    {
+      route,
+      history,
+    },
+    mockAppContext({
+      ...createAppContext(history),
+      ...(account && { account }),
+    })
   );
-}
+};
 
 describe('LinkExpiredResetPassword', () => {
-  const account = {} as unknown as Account;
+  const component = <LinkExpiredResetPassword {...{ email, viewName }} />;
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders the component as expected for an expired Reset Password link', () => {
-    renderLinkExpiredResetPasswordWithAccount(account);
+    renderWithHistory(component);
 
     screen.getByRole('heading', {
       name: 'Reset password link expired',
@@ -47,10 +58,10 @@ describe('LinkExpiredResetPassword', () => {
   });
   it('displays a success banner when clicking on "receive a new link" is successful', async () => {
     const account = {
-      resendResetPassword: jest.fn().mockResolvedValue(true),
+      resetPassword: jest.fn().mockResolvedValue(true),
     } as unknown as Account;
 
-    renderLinkExpiredResetPasswordWithAccount(account);
+    renderWithHistory(component, '', account);
     const receiveNewLinkButton = screen.getByRole('button', {
       name: 'Receive new link',
     });
@@ -65,10 +76,10 @@ describe('LinkExpiredResetPassword', () => {
   });
   it('displays an error banner when clicking on "receive a new link" is unsuccessful', async () => {
     const account = {
-      resendResetPassword: jest.fn().mockRejectedValue('error'),
+      resetPassword: jest.fn().mockRejectedValue('error'),
     } as unknown as Account;
 
-    renderLinkExpiredResetPasswordWithAccount(account);
+    renderWithHistory(component, '', account);
     const receiveNewLinkButton = screen.getByRole('button', {
       name: 'Receive new link',
     });

packages/fxa-settings/src/components/LinkExpiredResetPassword/index.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React, { useState } from 'react';
-import { useAccount } from '../../models';
+import { CreateRelier, useAccount } from '../../models';
 import { ResendStatus } from '../../lib/types';
 import { logViewEvent } from 'fxa-settings/src/lib/metrics';
 import { REACT_ENTRYPOINT } from 'fxa-settings/src/constants';
@@ -20,14 +20,16 @@ export const LinkExpiredResetPassword = ({
 }: LinkExpiredResetPasswordProps) => {
   // TODO in FXA-7630 add metrics event and associated tests for users hitting the LinkExpired page
   const account = useAccount();
+  const relier = CreateRelier();
+  const serviceName = relier.getServiceName();
 
   const [resendStatus, setResendStatus] = useState<ResendStatus>(
     ResendStatus['not sent']
   );
 
   const resendResetPasswordLink = async () => {
     try {
-      await account.resendResetPassword(email);
+      await account.resetPassword(email, serviceName);
       logViewEvent(viewName, 'resend', REACT_ENTRYPOINT);
       setResendStatus(ResendStatus['sent']);
     } catch (e) {

packages/fxa-settings/src/lib/channels/helpers.ts

@@ -2,93 +2,49 @@
  * 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 { AccountData } from '../../models';
+import firefox, { FxALoginRequest } from './firefox';
 
-// const ALLOWED_LOGIN_FIELDS = [
-//   'declinedSyncEngines',
-//   'email',
-//   'keyFetchToken',
-//   'offeredSyncEngines',
-//   'sessionToken',
-//   'services',
-//   'uid',
-//   'unwrapBKey',
-//   'verified',
-// ];
-
-// const REQUIRED_LOGIN_FIELDS = [
-//   'email',
-//   'keyFetchToken',
-//   'sessionToken',
-//   'uid',
-//   'unwrapBKey',
-//   'verified',
-// ];
-
-// Might need to go on the Integration?
+// TODO: might need to go on Integration?
 // let uidOfLoginNotification: hexstring = '';
 
-// function hasRequiredLoginFields(loginData) {
-//   const loginFields = Object.keys(loginData);
-//   return (
-//     REQUIRED_LOGIN_FIELDS.filter((field) => !loginFields.includes(field))
-//       .length === 0
-//   );
-// }
-
-/**
- * Get login data from `account` to send to the browser.
- * All returned keys have a defined value.
- */
-// function getLoginData(account: AccountData) {
-// let loginData: Partial<AccountData> = {};
-// for (const key of ALLOWED_LOGIN_FIELDS) {
-//   loginData[key] = account[key];
-// }
-//   // TODO: account for multiservice when we combine reliers
-//   // const isMultiService = this.relier && this.relier.get('multiService');
-//   // if (isMultiService) {
-//   //   loginData = this._formatForMultiServiceBrowser(loginData);
-//   // }
-//   loginData.verified = !!loginData.verified;
-//   // TODO: this is set in the `beforeSignIn` auth-broker method
-//   // loginData.verifiedCanLinkAccount = !!this._verifiedCanLinkEmail;
-//   return Object.fromEntries(
-//     Object.entries(loginData).filter(([key, value]) => value !== undefined)
-//   );
-// }
+const REQUIRED_LOGIN_FIELDS: Array<keyof FxALoginRequest> = [
+  'authAt',
+  'email',
+  'keyFetchToken',
+  'sessionToken',
+  'uid',
+  'unwrapBKey',
+  'verified',
+];
 
-// TODO in FXA-7172
 export function notifyFirefoxOfLogin(
-  account: AccountData,
+  accountData: FxALoginRequest,
   isSessionVerified: boolean
 ) {
-  // only notify the browser of the login if the user does not have
-  // to verify their account/session
-  if (!isSessionVerified) {
-    return;
-  }
-
-  /**
-   * Workaround for #3078. If the user signs up but does not verify
-   * their account, then visit `/` or `/settings`, they are
+  /* Only notify the browser of the login if the user 1) does not have to
+   * verify their account/session and 2) when all required fields are present,
+   * which is a workaround for #3078. If the user signs up but does not
+   * verify their account, then visit `/` or `/settings`, they are
    * redirected to `/confirm` which attempts to notify the browser of
    * login. Since `unwrapBKey` and `keyFetchToken` are not persisted to
    * disk, the passed in account lacks these items. The browser can't
-   * do anything without this data, so don't actually send the message.
-   *
-   * Also works around #3514. With e10s enabled, localStorage in
-   * about:accounts and localStorage in the verification page are not
-   * shared. This lack of shared state causes the original tab of
-   * a password reset from about:accounts to not have all the
-   * required data. The verification tab sends a WebChannel message
-   * already, so no need here too.
-   */
-  // const loginData = getLoginData(account);
-  // if (!hasRequiredLoginFields(loginData)) {
-  //   return;
+   * do anything without this data, so don't actually send the message. */
+
+  if (
+    !isSessionVerified ||
+    !accountData.verified ||
+    !REQUIRED_LOGIN_FIELDS.every((key) => key in accountData)
+  ) {
+    return;
+  }
+
+  // TODO: account for multiservice TODO with relier/integration combination
+  // const isMultiService = this.relier && this.relier.get('multiService');
+  // if (isMultiService) {
+  //   loginData = this._formatForMultiServiceBrowser(loginData);
   // }
 
+  // TODO with relier/integration combination or during login tickets.
   // Only send one login notification per uid to avoid race
   // conditions within the browser. Two attempts to send
   // a login message occur for users that verify while
@@ -98,6 +54,5 @@ export function notifyFirefoxOfLogin(
   // if (loginData.uid !== uidOfLoginNotification) {
   //   uidOfLoginNotification = loginData.uid;
 
-  // send web channel LOGIN command with loginData
-  // }
+  firefox.fxaLogin(accountData);
 }

packages/fxa-settings/src/lib/storybook-utils.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 { ReactElement } from 'react';
+import {
+  MOCK_ACCOUNT,
+  createAppContext,
+  createHistoryWithQuery,
+  produceComponent,
+} from '../models/mocks';
+import { Account } from '../models';
+
+export function renderStoryWithHistory(
+  component: ReactElement,
+  route: string,
+  account = MOCK_ACCOUNT as unknown as Account,
+  queryParams?: string
+) {
+  const history = createHistoryWithQuery(route, queryParams);
+  return produceComponent(
+    component,
+    { route, history },
+    {
+      ...createAppContext(history),
+      account,
+    }
+  );
+}