Merge pull request #20104 from mozilla/fxa-13017-frontend-otp

feat(settings): add passwordless otp ui

Author: StaberindeZA

.circleci/config.yml

@@ -174,6 +174,9 @@ executors:
       CUSTOMS_SERVER_URL: none
       HUSKY_SKIP_INSTALL: 1
       AUTH_CLOUDTASKS_USE_LOCAL_EMULATOR: true
+      # passwordless otp feature
+      PASSWORDLESS_ENABLED: true
+      PASSWORDLESS_ALLOWED_SERVICES: '98e6508e88680e1a,5882386c6d801776,dcdb5ae7add825d2'
       # Seeing if clear customs approach works! RATE_LIMIT__RULES: ""
       # RATE_LIMIT__IGNORE_EMAILS: .*@restmail.net$
 

packages/functional-tests/lib/email.ts

@@ -34,6 +34,8 @@ export enum EmailType {
   passwordChanged,
   passwordChangeRequired,
   passwordForgotOtp,
+  passwordlessSigninOtp,
+  passwordlessSignupOtp,
   passwordReset,
   passwordResetAccountRecovery,
   passwordResetRequired,
@@ -74,6 +76,8 @@ export enum EmailHeader {
   shortCode = 'x-verify-short-code',
   unblockCode = 'x-unblock-code',
   signinCode = 'x-signin-verify-code',
+  passwordlessSignupCode = 'x-passwordless-signup-otp',
+  passwordlessSigninCode = 'x-passwordless-signin-otp',
   recoveryCode = 'x-recovery-code',
   uid = 'x-uid',
   serviceId = 'x-service-id',
@@ -292,6 +296,38 @@ export class EmailClient {
     return code;
   }
 
+  /**
+   * Gets the passwordless OTP code from the email.
+   * Note: Passwordless uses the same email template as password forgot OTP.
+   * @param email - The email address that is expected to receive the code.
+   * @returns The passwordless OTP code.
+   */
+  async getPasswordlessSignupCode(email: string): Promise<string> {
+    const code = await this.waitForEmail(
+      email,
+      EmailType.passwordlessSignupOtp,
+      EmailHeader.passwordlessSignupCode
+    );
+    await this.clear(email);
+    return code;
+  }
+
+  /**
+   * Gets the passwordless OTP code from the email.
+   * Note: Passwordless uses the same email template as password forgot OTP.
+   * @param email - The email address that is expected to receive the code.
+   * @returns The passwordless OTP code.
+   */
+  async getPasswordlessSigninCode(email: string): Promise<string> {
+    const code = await this.waitForEmail(
+      email,
+      EmailType.passwordlessSigninOtp,
+      EmailHeader.passwordlessSigninCode
+    );
+    await this.clear(email);
+    return code;
+  }
+
   /** Creates a bounce record. Note, this only works on localhost. For stage / prod, we expect we can generate a real bounce. */
   async createBounce(
     email: string,

packages/functional-tests/lib/fixtures/standard.ts

@@ -84,6 +84,7 @@ export const test = base.extend<TestOptions, WorkerOptions>({
 
     await use(testAccountTracker);
 
+    await target.clearRateLimits();
     await testAccountTracker.destroyAllAccounts();
   },
 

packages/functional-tests/lib/testAccountTracker.ts

@@ -19,14 +19,21 @@ enum EmailPrefix {
   BOUNCED = 'bounced',
   BOUNCED_ALIAS = 'bounced+',
   FORCED_PWD_CHANGE = 'forcepwdchange',
+  PASSWORDLESS = 'passwordless',
   SIGNIN = 'signin',
   SIGNUP = 'signup',
   SYNC = 'sync',
 }
 
+const RELIER_CLIENT_ID = 'dcdb5ae7add825d2';
+
 type AccountDetails = {
   email: string;
   password: string;
+  /** For passwordless accounts that don't have a password yet */
+  isPasswordless?: boolean;
+  /** Preserved session token for cleanup (used for passwordless+TOTP accounts) */
+  sessionToken?: string;
 };
 
 /**
@@ -147,6 +154,31 @@ export class TestAccountTracker {
     return this.generateAccountDetails(EmailPrefix.BLOCKED);
   }
 
+  /**
+   * Creates a new email address with the 'passwordless' prefix and a new
+   * randomized password. The 'passwordless' prefix triggers the passwordless
+   * flow due to server-side email regex matching.
+   * Note: The account is marked as passwordless for special cleanup handling.
+   * @returns AccountDetails
+   */
+  generatePasswordlessAccountDetails(): AccountDetails {
+    const account = {
+      email: this.generateEmail(EmailPrefix.PASSWORDLESS),
+      password: this.generatePassword(),
+      isPasswordless: true,
+    };
+    this.accounts.push(account);
+    return account;
+  }
+
+  /**
+   * Creates a new email with the 'passwordless' prefix
+   * @returns email
+   */
+  generatePasswordlessEmail(): string {
+    return this.generateEmail(EmailPrefix.PASSWORDLESS);
+  }
+
   /**
    * Creates a new email address with a given prefix and a new randomized
    * password
@@ -211,6 +243,48 @@ export class TestAccountTracker {
     return await this.signUp(options, EmailPrefix.SYNC);
   }
 
+  /**
+   * Creates a passwordless account via API (verifierSetAt: 0, no password).
+   * Used for testing signin to existing passwordless accounts.
+   * Note: The account is created WITHOUT a password to remain passwordless-eligible.
+   * Cleanup will set a password before destroying the account.
+   * @returns Partial credentials with email, uid, and sessionToken
+   */
+  async signUpPasswordless(): Promise<{
+    email: string;
+    uid: string;
+    sessionToken: string;
+  }> {
+    const email = this.generateEmail(EmailPrefix.PASSWORDLESS);
+    const password = this.generatePassword();
+
+    // Send passwordless code
+    await this.target.authClient.passwordlessSendCode(email, {
+      clientId: RELIER_CLIENT_ID,
+    });
+
+    // Get OTP from email
+    const code = await this.target.emailClient.getPasswordlessSignupCode(email);
+
+    // Confirm code - creates account (NO password is set - remains passwordless)
+    const result = await this.target.authClient.passwordlessConfirmCode(
+      email,
+      code,
+      {
+        clientId: RELIER_CLIENT_ID,
+      }
+    );
+
+    // Track for cleanup - mark as passwordless so cleanup knows to handle specially
+    this.accounts.push({ email, password, isPasswordless: true });
+
+    return {
+      email,
+      uid: result.uid,
+      sessionToken: result.sessionToken,
+    };
+  }
+
   /**
    * Signs up an account with the AuthClient with a new email address created
    * with a given prefix and a new randomized password
@@ -302,6 +376,13 @@ export class TestAccountTracker {
    * Once we have a valid sessionToken, we disconnect 2FA then destroy the account.
    */
   private async destroyAccount(account: AccountDetails | Credentials) {
+    // Handle passwordless accounts - they need a password set before we can destroy them
+    const isPasswordless =
+      'isPasswordless' in account && account.isPasswordless;
+    if (isPasswordless) {
+      await this.setupPasswordForPasswordlessAccount(account);
+    }
+
     const { sessionToken } = await this.target.authClient.signIn(
       account.email,
       account.password
@@ -341,7 +422,11 @@ export class TestAccountTracker {
 
     if (has2FA) {
       // Get MFA JWT for 2FA scope to delete TOTP
-      const mfaJwt = await this.getMfaJwtForScope('2fa', sessionToken, account.email);
+      const mfaJwt = await this.getMfaJwtForScope(
+        '2fa',
+        sessionToken,
+        account.email
+      );
       await this.target.authClient.deleteTotpTokenWithJwt(mfaJwt);
     }
 
@@ -353,6 +438,93 @@ export class TestAccountTracker {
     );
   }
 
+  /**
+   * Sets up a password for a passwordless account so it can be destroyed.
+   * Uses the passwordless API to get a session token, then creates a password.
+   * If the password is already set (e.g., user set it during test via UI), this is a no-op.
+   *
+   * For accounts with TOTP enabled, passwordless API returns TOTP_REQUIRED.
+   * In that case, we use the preserved session token if available.
+   */
+  private async setupPasswordForPasswordlessAccount(
+    account: AccountDetails
+  ): Promise<void> {
+    try {
+      // Send passwordless code
+      await this.target.authClient.passwordlessSendCode(account.email, {
+        clientId: RELIER_CLIENT_ID,
+      });
+
+      // Get OTP from email
+      const code = await this.target.emailClient.getPasswordlessSigninCode(
+        account.email
+      );
+
+      // Confirm code to get session token
+      const result = await this.target.authClient.passwordlessConfirmCode(
+        account.email,
+        code,
+        {
+          clientId: RELIER_CLIENT_ID,
+        }
+      );
+
+      // Create password using the session token
+      await this.target.authClient.createPassword(
+        result.sessionToken,
+        account.email,
+        account.password
+      );
+    } catch (error: any) {
+      // If password is already set (e.g., user set it during test via SetPassword page),
+      // that's fine - we can proceed with normal cleanup
+      if (
+        error.message?.includes('password already set') ||
+        error.errno === 148 // ERRNO.CAN_NOT_CREATE_PASSWORD
+      ) {
+        console.log(
+          `Password already set for ${account.email}, proceeding with cleanup`
+        );
+      } else if (error.errno === 160) {
+        // TOTP_REQUIRED - account has 2FA enabled, can't use passwordless
+        // Try to use preserved session token if available
+        if (account.sessionToken) {
+          console.log(
+            `TOTP_REQUIRED for ${account.email}, using preserved session token`
+          );
+          try {
+            await this.target.authClient.createPassword(
+              account.sessionToken,
+              account.email,
+              account.password
+            );
+          } catch (pwdError: any) {
+            if (
+              pwdError.message?.includes('password already set') ||
+              pwdError.errno === 148
+            ) {
+              console.log(
+                `Password already set for ${account.email}, proceeding with cleanup`
+              );
+            } else {
+              throw pwdError;
+            }
+          }
+        } else {
+          throw new Error(
+            `Cannot set password for ${account.email}: TOTP is enabled and no session token was preserved. ` +
+              `Store the sessionToken from signUpPasswordless in the account for cleanup.`
+          );
+        }
+      } else {
+        throw error;
+      }
+    }
+
+    // Mark as no longer passwordless for this session
+    account.isPasswordless = false;
+  }
+
   /**
    * Checks if an account has 2FA enabled by querying the profile.
    * Returns false if profile query fails (graceful degradation).
@@ -404,7 +576,8 @@ export class TestAccountTracker {
       throw new Error(`Failed to request MFA OTP for scope: ${scope}`);
     }
 
-    const code = await this.target.emailClient.getVerifyAccountChangeCode(email);
+    const code =
+      await this.target.emailClient.getVerifyAccountChangeCode(email);
 
     const { accessToken } = await this.target.authClient.mfaOtpVerify(
       sessionToken,

packages/functional-tests/pages/index.ts

@@ -32,6 +32,7 @@ import { SigninRecoveryCodePage } from './signinRecoveryCode';
 import { SigninTokenCodePage } from './signinTokenCode';
 import { SigninTotpCodePage } from './signinTotpCode';
 import { SigninUnblockPage } from './signinUnblock';
+import { SigninPasswordlessCodePage } from './signinPasswordlessCode';
 import { SignupPage } from './signup';
 import { TermsOfService } from './termsOfService';
 import { TotpPage } from './settings/totp';
@@ -75,6 +76,7 @@ export function create(page: Page, target: BaseTarget) {
     signinTokenCode: new SigninTokenCodePage(page, target),
     signinTotpCode: new SigninTotpCodePage(page, target),
     signinUnblock: new SigninUnblockPage(page, target),
+    signinPasswordlessCode: new SigninPasswordlessCodePage(page, target),
     signup: new SignupPage(page, target),
     signupConfirmedSync: new SignupConfirmedSyncPage(page, target),
     termsOfService: new TermsOfService(page, target),

packages/functional-tests/pages/signinPasswordlessCode.ts

@@ -0,0 +1,45 @@
+/* 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 { BaseTokenCodePage } from './baseTokenCode';
+
+export class SigninPasswordlessCodePage extends BaseTokenCodePage {
+  readonly path = '/signin_passwordless_code';
+
+  get heading() {
+    this.checkPath();
+    return this.page.getByRole('heading', {
+      name: /^(Enter confirmation code|Create your account)/,
+    });
+  }
+
+  get codeInput() {
+    this.checkPath();
+    return this.page.getByLabel('Enter 8-digit code');
+  }
+
+  get submitButton() {
+    this.checkPath();
+    return this.page.getByRole('button', { name: 'Confirm' });
+  }
+
+  get resendCodeButton() {
+    this.checkPath();
+    return this.page.getByRole('button', { name: /Email new code/ });
+  }
+
+  get errorBanner() {
+    return this.page.locator('[class*="banner"][class*="error"]');
+  }
+
+  get totpRequiredError() {
+    return this.page.getByText(
+      /Two-step authentication is enabled on your account/
+    );
+  }
+
+  get resendSuccessBanner() {
+    return this.page.getByText(/A new code was sent/);
+  }
+}