Merge pull request #19314 from mozilla/FXA-12128

feat(auth, settings): Move 2fa setup initial code validation server-side

Author: LZoog

packages/functional-tests/lib/totp.ts

@@ -0,0 +1,14 @@
+/* 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 { authenticator as otplibAuthenticator } from 'otplib';
+
+// Generate a TOTP code matching server settings (hex-encoded secret)
+export async function getCode(secretHex: string): Promise<string> {
+  const auth = new otplibAuthenticator.Authenticator();
+  auth.options = Object.assign({}, otplibAuthenticator.options, {
+    encoding: 'hex',
+  });
+  return auth.generate(secretHex);
+}

packages/functional-tests/pages/relier.ts

@@ -23,6 +23,8 @@ export class RelierPage extends BaseLayout {
   }
 
   async isLoggedIn() {
+    // Ensure we've navigated back to the relier before checking login status
+    await this.page.waitForURL(`${this.target.relierUrl}/**`);
     const loggedInStatus = this.page.locator('#loggedin');
     await loggedInStatus.waitFor();
     return loggedInStatus.isVisible();

packages/functional-tests/pages/settings/totp.ts

@@ -6,7 +6,7 @@ import jsQR from 'jsqr';
 import UPNG from 'upng-js';
 import { expect } from '../../lib/fixtures/standard';
 import { SettingsLayout } from './layout';
-import { getCode } from 'fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 import { DataTrioComponent } from './components/dataTrio';
 
 export type TotpCredentials = {

packages/functional-tests/tests/cms/cms-2fa.spec.ts

@@ -4,7 +4,7 @@
 
 import { expect, test } from '../../lib/fixtures/standard';
 import { syncDesktopOAuthQueryParams } from '../../lib/query-params';
-import { getCode } from 'fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 import {
   TargetName,
   getFromEnvWithFallback,
@@ -158,7 +158,8 @@ test.describe('severity-1 #smoke', () => {
       await settings.totp.addButton.click();
 
       // Set up 2FA with QR code and backup codes
-      const { secret } =  await totp.setUpTwoStepAuthWithQrAndBackupCodesChoice();
+      const { secret } =
+        await totp.setUpTwoStepAuthWithQrAndBackupCodesChoice();
 
       await expect(settings.settingsHeading).toBeVisible();
       await expect(settings.alertBar).toHaveText(
@@ -592,7 +593,8 @@ test.describe('severity-1 #smoke', () => {
       await settings.totp.addButton.click();
 
       // Set up 2FA with QR code and backup codes
-      const { secret } = await totp.setUpTwoStepAuthWithQrAndBackupCodesChoice();
+      const { secret } =
+        await totp.setUpTwoStepAuthWithQrAndBackupCodesChoice();
 
       await expect(settings.settingsHeading).toBeVisible();
       await expect(settings.alertBar).toHaveText(

packages/functional-tests/tests/key-stretching-v2/totp.spec.ts

@@ -2,7 +2,7 @@
  * 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 { getCode } from 'fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 import { expect, test } from '../../lib/fixtures/standard';
 
 /**

packages/functional-tests/tests/misc/recoveryKeyPromoInline.spec.ts

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { expect, test } from '../../lib/fixtures/standard';
-import { getCode } from 'packages/fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 
 test.describe('recovery key promo', () => {
   test.describe('inline', () => {

packages/functional-tests/tests/misc/relayIntegration.spec.ts

@@ -5,7 +5,7 @@
 import { FirefoxCommand } from '../../lib/channels';
 import { expect, test } from '../../lib/fixtures/standard';
 import { relayDesktopOAuthQueryParams } from '../../lib/query-params';
-import { getCode } from 'packages/fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 
 test.describe('relay integration', () => {
   test('signup with Relay desktop', async ({

packages/functional-tests/tests/oauth/totp.spec.ts

@@ -2,7 +2,7 @@
  * 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 { getCode } from 'fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 import { Page, expect, test } from '../../lib/fixtures/standard';
 import { BaseTarget, Credentials } from '../../lib/targets/base';
 import { SettingsPage } from '../../pages/settings';
@@ -392,7 +392,7 @@ test.describe('severity-1 #smoke', () => {
       await totp.chooseBackupCodesOption();
       const recoveryCodes = await totp.backupCodesDownloadStep();
       await totp.confirmBackupCodeStep(recoveryCodes[0]);
-      await page.getByRole('button', { name: 'Continue' }).click();
+      await page.getByRole('button', { name: /Continue/ }).click();
 
       expect(await relier.isLoggedIn()).toBe(true);
 

packages/functional-tests/tests/react-conversion/signinTotp.spec.ts

@@ -2,20 +2,13 @@
  * 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 { getCode } from 'fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 import { expect, test } from '../../lib/fixtures/standard';
 
 test.describe('severity-1 #smoke', () => {
   test.describe('two step auth', () => {
     test('add totp', async ({
-      pages: {
-        settings,
-        totp,
-        page,
-        signin,
-        signup,
-        signinTotpCode,
-      },
+      pages: { settings, totp, page, signin, signup, signinTotpCode },
       testAccountTracker,
     }) => {
       const credentials = await testAccountTracker.signUp();
@@ -106,14 +99,7 @@ test.describe('severity-1 #smoke', () => {
     });
 
     test('error message when totp code is invalid', async ({
-      pages: {
-        page,
-        settings,
-        totp,
-        signin,
-        signup,
-        signinTotpCode,
-      },
+      pages: { page, settings, totp, signin, signup, signinTotpCode },
       testAccountTracker,
     }) => {
       const credentials = await testAccountTracker.signUp();

packages/functional-tests/tests/resetPassword/oauthResetPassword.spec.ts

@@ -2,7 +2,7 @@
  * 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 { getCode } from 'fxa-settings/src/lib/totp';
+import { getCode } from '../../lib/totp';
 import { expect, test } from '../../lib/fixtures/standard';
 import { ResetPasswordPage } from '../../pages/resetPassword';
 import { SigninPage } from '../../pages/signin';