Skip to content

fix(settings): fix OTP engage timing and add change email glean metric#20314

Open
vbudhram wants to merge 1 commit intomainfrom
fxa-13393
Open

fix(settings): fix OTP engage timing and add change email glean metric#20314
vbudhram wants to merge 1 commit intomainfrom
fxa-13393

Conversation

@vbudhram
Copy link
Copy Markdown
Contributor

@vbudhram vbudhram commented Apr 3, 2026

Because

  • The Engage event on the passwordless OTP screen fired immediately on page load due to autoFocus triggering the onFocus handler, before the View event and without any user interaction
  • There was no tracking for when users click "Use a different account" on the OTP code page
  • The statsd passwordless.sendCode.success metric did not distinguish signup from signin

This pull request

  • Emits change email event when user clicks "Use a different account" on the OTP page
  • Adds isNewAccount tag to passwordless.sendCode.success statsd metric (passwordless.ts)

Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-13393

Checklist

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).
  • I have manually reviewed all AI generated code.

Other information

How to test:

  1. Start local FxA stack (yarn start mza)
  2. Enable passwordless: set featureFlags.passwordlessEnabled: true in packages/fxa-content-server/server/config/local.json
  3. Navigate to http://localhost:8080/?force_passwordless=true, enter a new email
  4. On the OTP code page, open browser devtools Network tab filtered to Glean pings
  5. Verify: no reg_otp_engage event on page load; typing in the code field triggers it
  6. Click "Use a different account" and verify reg_otp_change_email event fires
Screenshot 2026-04-03 at 11 38 23 AM

Because:
- The Engage event on the passwordless OTP screen fired immediately on
  page load due to autoFocus triggering the onFocus handler, before the
  View event and without any user interaction
- There was no tracking for when users click "Use a different account"
  on the OTP page
- The statsd sendCode metric did not distinguish signup from signin

This commit:
- Emits the engage event on the first onChange (keystroke) using the
  same hasEngaged pattern as the signin password page
- Adds otp_change_email Glean event for both reg and login flows
- Emits change email event when user clicks "Use a different account"
- Adds isNewAccount tag to passwordless.sendCode.success statsd metric
- Adds unit and functional tests for all new metrics

Closes: FXA-13393
Copilot AI review requested due to automatic review settings April 3, 2026 16:28
@vbudhram vbudhram requested a review from a team as a code owner April 3, 2026 16:28
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates passwordless OTP telemetry across FxA Settings (Glean) and Auth Server (StatsD) to better reflect real user interaction and differentiate signup vs signin flows.

Changes:

  • Add new Glean events for “Use a different account” clicks on the passwordless OTP code page (login + registration).
  • Adjust OTP “engage” emission intent so it’s triggered by actual user interaction (typing) rather than autofocus-driven focus.
  • Add an isNewAccount tag to the auth-server passwordless.sendCode.success StatsD metric.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
packages/fxa-shared/metrics/glean/web/reg.ts Adds reg.otp_change_email event metric export.
packages/fxa-shared/metrics/glean/web/login.ts Adds login.otp_change_email event metric export.
packages/fxa-shared/metrics/glean/web/index.ts Wires new change-email events into the shared events map.
packages/fxa-shared/metrics/glean/web/event.ts Import ordering tweak in generated metrics file.
packages/fxa-shared/metrics/glean/fxa-ui-metrics.yaml Defines new otp_change_email events for login and registration.
packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.tsx Emits change-email metric on link click and attempts to adjust engage timing.
packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.test.tsx Updates/extends unit tests for engage timing and change-email event.
packages/fxa-settings/src/lib/glean/index.ts Adds switch cases to record the new Glean events.
packages/fxa-auth-server/lib/routes/passwordless.ts Adds isNewAccount tag to passwordless.sendCode.success.
packages/functional-tests/tests/passwordless/signinPasswordless.spec.ts Adds functional coverage asserting change-email event ordering.
packages/functional-tests/pages/signinPasswordlessCode.ts Adds page-object accessor for the “Use a different account” link.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +516 to +523
setClearMessages: () => {
// Only log the engage event once. Note that this text box is
// autofocused, so using autofocus wouldn't be a good way to do this.
if (hasEngaged === false) {
setHasEngaged(true);
gleanOtp.engage();
}
},
Copy link

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setClearMessages is being repurposed here to record the OTP engage metric. In FormVerifyCode, setClearMessages is specifically used to clear error messages on input change (setClearMessages(true)), so passing a custom function here means code errors will no longer be cleared while the user types (and the boolean argument is ignored). It also overloads the intent of this prop and makes the engage behavior hard to reason about. Suggested fix: keep setClearMessages for its intended purpose (or omit it so FormVerifyCode falls back to setCodeErrorMessage('')), and introduce a dedicated way to emit the engage metric on first user input (e.g., add a new prop to FormVerifyCode for onFirstInputChange / onChangeCb, or update FormVerifyCode to optionally trigger onEngageCb on first change instead of focus for this page).

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I agree with this one. Is there a different way to do this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants