Merge pull request #20414 from mozilla/fxa-13429

feat(fxa-settings): add reason extra_key to OTP password metrics

Author: vbudhram

packages/functional-tests/tests/passwordless/signinPasswordless.spec.ts

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { expect, test } from '../../lib/fixtures/standard';
+import { GleanEventsHelper } from '../../lib/glean';
 import {
   relayDesktopOAuthQueryParams,
   syncDesktopOAuthQueryParams,
@@ -1032,6 +1033,13 @@ test.describe('severity-2', () => {
       syncOAuthBrowserPages: { page, signin, signinPasswordlessCode },
       testAccountTracker,
     }) => {
+      // syncOAuthBrowserPages runs in a separate Firefox instance, so the
+      // default gleanEventsHelper fixture (bound to the main page) does not
+      // capture pings from this flow. Attach a fresh helper to the sync page
+      // before any navigation so route interception is in place.
+      const gleanEventsHelper = new GleanEventsHelper(page);
+      await gleanEventsHelper.start();
+
       // Create passwordless account via API first (no password)
       const { email } = await testAccountTracker.signUpPasswordless();
       const password = (testAccountTracker.accounts[0] as any).password;
@@ -1065,6 +1073,23 @@ test.describe('severity-2', () => {
       await expect(
         page.getByRole('heading', { name: 'Sync is turned on' })
       ).toBeVisible();
+
+      // Verify every third_party_auth_set_password event emitted during the
+      // OTP flow carries reason='otp' so telemetry can distinguish this
+      // flow from the third-party-auth set-password path.
+      await gleanEventsHelper.waitForEvent(
+        'third_party_auth_set_password_success'
+      );
+      for (const eventName of [
+        'third_party_auth_set_password_view',
+        'third_party_auth_set_password_engage',
+        'third_party_auth_set_password_submit',
+        'third_party_auth_set_password_success',
+      ]) {
+        const pings = gleanEventsHelper.getEventsByName(eventName);
+        expect(pings.length).toBeGreaterThan(0);
+        expect(pings[0].extras.reason).toBe('otp');
+      }
     });
 
     test('passwordless signin - Sync with TOTP and set password', async ({

packages/functional-tests/tests/settings/changePassword.spec.ts

@@ -35,6 +35,7 @@ test.describe('severity-1 #smoke', () => {
       target,
       pages: { page, changePassword, settings, signin },
       testAccountTracker,
+      gleanEventsHelper,
     }) => {
       const credentials = await testAccountTracker.signUp();
       await signInAccount(target, page, settings, signin, credentials);
@@ -51,6 +52,14 @@ test.describe('severity-1 #smoke', () => {
       await expect(settings.settingsHeading).toBeVisible();
       await expect(settings.alertBar).toHaveText('Password updated');
 
+      // Account already has a password, so the change password CTA should
+      // emit reason='change' (vs 'create' for passwordless accounts).
+      const submitPings = gleanEventsHelper.getEventsByName(
+        'account_pref_change_password_submit'
+      );
+      expect(submitPings.length).toBeGreaterThan(0);
+      expect(submitPings[0].extras.reason).toBe('change');
+
       // Sign out and login with new password
       await settings.signOut();
       await signin.fillOutEmailFirstForm(credentials.email);

packages/fxa-settings/src/components/Settings/Security/index.tsx

@@ -70,7 +70,9 @@ export const Security = forwardRef<HTMLDivElement>((_, ref) => {
             }
             prefixDataTestId="password"
             ctaOnClickAction={() => {
-              GleanMetrics.accountPref.changePasswordSubmit();
+              GleanMetrics.accountPref.changePasswordSubmit({
+                event: { reason: hasPassword ? 'change' : 'create' },
+              });
             }}
           >
             {hasPassword ? (

packages/fxa-settings/src/lib/glean/index.test.ts

@@ -16,6 +16,7 @@ import * as accountPref from 'fxa-shared/metrics/glean/web/accountPref';
 import * as accountBanner from 'fxa-shared/metrics/glean/web/accountBanner';
 import * as deleteAccount from 'fxa-shared/metrics/glean/web/deleteAccount';
 import * as thirdPartyAuth from 'fxa-shared/metrics/glean/web/thirdPartyAuth';
+import * as thirdPartyAuthSetPassword from 'fxa-shared/metrics/glean/web/thirdPartyAuthSetPassword';
 import { userIdSha256, userId } from 'fxa-shared/metrics/glean/web/account';
 import {
   oauthClientId,
@@ -687,6 +688,45 @@ describe('lib/glean', () => {
       });
     });
 
+    describe('thirdPartyAuthSetPassword', () => {
+      // Each event is recorded with a `reason` extra key that distinguishes
+      // OTP/passwordless flows ('otp') from third-party auth flows
+      // ('third_party_auth'). Both values are asserted below so the bridge
+      // between GleanMetrics and the generated event metric stays in sync.
+      const cases: Array<{
+        method: 'view' | 'engage' | 'submit' | 'success';
+        eventName: string;
+      }> = [
+        { method: 'view', eventName: 'third_party_auth_set_password_view' },
+        { method: 'engage', eventName: 'third_party_auth_set_password_engage' },
+        { method: 'submit', eventName: 'third_party_auth_set_password_submit' },
+        {
+          method: 'success',
+          eventName: 'third_party_auth_set_password_success',
+        },
+      ];
+
+      for (const { method, eventName } of cases) {
+        for (const reason of ['otp', 'third_party_auth'] as const) {
+          it(`submits ${eventName} with reason='${reason}'`, async () => {
+            const spy = sandbox.spy(
+              thirdPartyAuthSetPassword[method],
+              'record'
+            );
+            GleanMetrics.thirdPartyAuthSetPassword[method]({
+              event: { reason },
+            });
+            await GleanMetrics.isDone();
+            sinon.assert.calledOnce(setEventNameStub);
+            sinon.assert.calledWith(setEventNameStub, eventName);
+            sinon.assert.calledOnce(setEventReasonStub);
+            sinon.assert.calledWith(setEventReasonStub, reason);
+            sinon.assert.calledWith(spy, { reason });
+          });
+        }
+      }
+    });
+
     describe('accountPref', () => {
       it('submits a ping with the account_pref_view event name', async () => {
         GleanMetrics.accountPref.view();
@@ -793,16 +833,30 @@ describe('lib/glean', () => {
         sinon.assert.called(spy);
       });
 
-      it('submits a ping with the account_pref_change_password_submit event name', async () => {
-        GleanMetrics.accountPref.changePasswordSubmit();
+      it('submits a ping with the account_pref_change_password_submit event name and forwards reason', async () => {
         const spy = sandbox.spy(accountPref.changePasswordSubmit, 'record');
+        GleanMetrics.accountPref.changePasswordSubmit({
+          event: { reason: 'change' },
+        });
         await GleanMetrics.isDone();
         sinon.assert.calledOnce(setEventNameStub);
         sinon.assert.calledWith(
           setEventNameStub,
           'account_pref_change_password_submit'
         );
-        sinon.assert.called(spy);
+        sinon.assert.calledOnce(setEventReasonStub);
+        sinon.assert.calledWith(setEventReasonStub, 'change');
+        sinon.assert.calledWith(spy, { reason: 'change' });
+      });
+
+      it('forwards reason="create" to account_pref_change_password_submit', async () => {
+        const spy = sandbox.spy(accountPref.changePasswordSubmit, 'record');
+        GleanMetrics.accountPref.changePasswordSubmit({
+          event: { reason: 'create' },
+        });
+        await GleanMetrics.isDone();
+        sinon.assert.calledWith(setEventReasonStub, 'create');
+        sinon.assert.calledWith(spy, { reason: 'create' });
       });
 
       it('submits a ping with the account_pref_device_signout event name', async () => {

packages/fxa-settings/src/lib/glean/index.ts

@@ -533,7 +533,9 @@ const recordEventMetric = (
       });
       break;
     case 'account_pref_change_password_submit':
-      accountPref.changePasswordSubmit.record();
+      accountPref.changePasswordSubmit.record({
+        reason: gleanPingMetrics?.event?.['reason'] || '',
+      });
       break;
     case 'account_pref_google_unlink_submit':
       accountPref.googleUnlinkSubmit.record({
@@ -722,8 +724,25 @@ const recordEventMetric = (
         reason: gleanPingMetrics?.event?.['reason'] || '',
       });
       break;
+    case 'third_party_auth_set_password_view':
+      thirdPartyAuthSetPassword.view.record({
+        reason: gleanPingMetrics?.event?.['reason'] || '',
+      });
+      break;
+    case 'third_party_auth_set_password_engage':
+      thirdPartyAuthSetPassword.engage.record({
+        reason: gleanPingMetrics?.event?.['reason'] || '',
+      });
+      break;
+    case 'third_party_auth_set_password_submit':
+      thirdPartyAuthSetPassword.submit.record({
+        reason: gleanPingMetrics?.event?.['reason'] || '',
+      });
+      break;
     case 'third_party_auth_set_password_success':
-      thirdPartyAuthSetPassword.success.record();
+      thirdPartyAuthSetPassword.success.record({
+        reason: gleanPingMetrics?.event?.['reason'] || '',
+      });
       break;
     case 'promo_qr_mobile_view':
       promoQrMobile.view.record();

packages/fxa-settings/src/pages/PostVerify/SetPassword/container.tsx

@@ -135,7 +135,9 @@ const SetPasswordContainer = ({
           );
           persistAccount({ uid, hasPassword: true });
 
-          GleanMetrics.thirdPartyAuthSetPassword.success();
+          GleanMetrics.thirdPartyAuthSetPassword.success({
+            event: { reason: isPasswordlessFlow ? 'otp' : 'third_party_auth' },
+          });
 
           const navigationOptions: NavigationOptions = {
             email,
@@ -180,6 +182,7 @@ const SetPasswordContainer = ({
       integration,
       finishOAuthFlowHandler,
       getKeyFetchToken,
+      isPasswordlessFlow,
       offeredSyncEngines,
       location.search,
     ]

packages/fxa-settings/src/pages/PostVerify/SetPassword/index.tsx

@@ -8,14 +8,15 @@ import AppLayout from '../../../components/AppLayout';
 import { FormSetupAccount } from '../../../components/FormSetupAccount';
 import { SetPasswordFormData, SetPasswordProps } from './interfaces';
 import { useForm } from 'react-hook-form';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useFtlMsgResolver } from '../../../models';
 import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 import Banner from '../../../components/Banner';
 import {
   getCmsHeadlineClassName,
   getCmsHeadlineStyle,
 } from '../../../components/CardHeader';
+import GleanMetrics from '../../../lib/glean';
 
 export const SetPassword = ({
   email,
@@ -29,8 +30,19 @@ export const SetPassword = ({
     useState<boolean>(false);
   const [bannerErrorText, setBannerErrorText] = useState<string>('');
 
+  const gleanReason = isPasswordlessFlow ? 'otp' : 'third_party_auth';
+
+  useEffect(() => {
+    GleanMetrics.thirdPartyAuthSetPassword.view({
+      event: { reason: gleanReason },
+    });
+  }, [gleanReason]);
+
   const onSubmit = useCallback(
     async ({ newPassword }: SetPasswordFormData) => {
+      GleanMetrics.thirdPartyAuthSetPassword.submit({
+        event: { reason: gleanReason },
+      });
       setCreatePasswordLoading(true);
       setBannerErrorText('');
 
@@ -47,19 +59,40 @@ export const SetPassword = ({
         return;
       }
     },
-    [createPasswordHandler, ftlMsgResolver]
+    [createPasswordHandler, ftlMsgResolver, gleanReason]
   );
 
-  const { handleSubmit, register, getValues, errors, formState, trigger } =
-    useForm<SetPasswordFormData>({
-      mode: 'onChange',
-      criteriaMode: 'all',
-      defaultValues: {
-        email,
-        newPassword: '',
-        confirmPassword: '',
-      },
-    });
+  const {
+    handleSubmit,
+    register,
+    getValues,
+    errors,
+    formState,
+    trigger,
+    watch,
+  } = useForm<SetPasswordFormData>({
+    mode: 'onChange',
+    criteriaMode: 'all',
+    defaultValues: {
+      email,
+      newPassword: '',
+      confirmPassword: '',
+    },
+  });
+
+  // Fire engage on the first keystroke into the password field (not on focus
+  // alone) so the event reflects actual user intent to type a password.
+  // Matches the engage pattern used by SigninPasswordlessCode.
+  const [hasEngaged, setHasEngaged] = useState(false);
+  const newPasswordValue = watch('newPassword');
+  useEffect(() => {
+    if (hasEngaged === false && newPasswordValue) {
+      setHasEngaged(true);
+      GleanMetrics.thirdPartyAuthSetPassword.engage({
+        event: { reason: gleanReason },
+      });
+    }
+  }, [hasEngaged, newPasswordValue, gleanReason]);
 
   const cmsInfo = integration?.getCmsInfo?.();
   const cmsPage = cmsInfo?.PostVerifySetPasswordPage;
@@ -122,7 +155,6 @@ export const SetPassword = ({
         onSubmit={handleSubmit(onSubmit)}
         // This page is only shown during the Sync flow
         isSync={true}
-        submitButtonGleanId="third-party-auth-set-password-submit"
         passwordFormType="post-verify-set-password"
         cmsButton={cmsButton}
       />