Merge pull request #17129 from mozilla/fxa-9564

fix(metrics): always use the metrics flow data in `Metrics` model when redirecting in third party auth

packages/fxa-content-server/app/scripts/views/mixins/third-party-auth-mixin.js

@@ -73,6 +73,14 @@ export default {
     // We stash originating location in the Google state oauth param
     // because we will need it to use it to log the user into FxA
     const currentParams = new URLSearchParams(this.window.location.search);
+
+    if (this.metrics) {
+      const metrics = this.metrics.getFlowEventMetadata();
+      currentParams.append('flowId', metrics.flowId);
+      currentParams.append('flowBeginTime', metrics.flowBeginTime);
+      currentParams.append('deviceId', metrics.deviceId);
+    }
+
     currentParams.delete('deeplink');
 
     const state = encodeURIComponent(
@@ -121,6 +129,14 @@ export default {
     this.logFlowEvent('apple.oauth-start');
 
     const currentParams = new URLSearchParams(this.window.location.search);
+
+    if (this.metrics) {
+      const metrics = this.metrics.getFlowEventMetadata();
+      currentParams.append('flowId', metrics.flowId);
+      currentParams.append('flowBeginTime', metrics.flowBeginTime);
+      currentParams.append('deviceId', metrics.deviceId);
+    }
+
     currentParams.delete('deeplink');
 
     const state = encodeURIComponent(

packages/fxa-content-server/app/tests/spec/views/mixins/third-party-auth-mixin.js

@@ -78,6 +78,11 @@ describe('views/mixins/third-party-auth-mixin', function () {
       user,
     });
     sinon.spy(notifier, 'trigger');
+    sinon.stub(metrics, 'getFlowEventMetadata').callsFake(() => ({
+      flowId: '123',
+      flowBeginTime: '456',
+      deviceId: '789',
+    }));
     await view.render();
   });
 
@@ -146,6 +151,8 @@ describe('views/mixins/third-party-auth-mixin', function () {
 
     assert.isTrue(view.logFlowEvent.calledWith('google.oauth-start'));
 
+    assert.isTrue(metrics.getFlowEventMetadata.calledOnce);
+
     assert.isTrue(mockForm.setAttribute.calledWith('method', 'GET'));
     assert.isTrue(
       mockForm.setAttribute.calledWith(
@@ -167,7 +174,7 @@ describe('views/mixins/third-party-auth-mixin', function () {
       mockInput,
       'state',
       encodeURIComponent(
-        `${windowMock.location.origin}${windowMock.location.pathname}?`
+        `${windowMock.location.origin}${windowMock.location.pathname}?flowId=123&flowBeginTime=456&deviceId=789`
       )
     );
     assertInputEl(mockInput, 'access_type', 'offline');
@@ -189,6 +196,8 @@ describe('views/mixins/third-party-auth-mixin', function () {
 
     assert.isTrue(view.logFlowEvent.calledWith('apple.oauth-start'));
 
+    assert.isTrue(metrics.getFlowEventMetadata.calledOnce);
+
     assert.isTrue(mockForm.setAttribute.calledWith('method', 'GET'));
     assert.isTrue(
       mockForm.setAttribute.calledWith(
@@ -210,7 +219,7 @@ describe('views/mixins/third-party-auth-mixin', function () {
       mockInput,
       'state',
       encodeURIComponent(
-        `${windowMock.location.origin}${windowMock.location.pathname}?`
+        `${windowMock.location.origin}${windowMock.location.pathname}?flowId=123&flowBeginTime=456&deviceId=789`
       )
     );
     assertInputEl(mockInput, 'access_type', 'offline');

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

@@ -10,6 +10,7 @@ import { ReactComponent as AppleLogo } from './apple-logo.svg';
 
 import { useConfig } from '../../models';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
+import { useMetrics } from '../../lib/metrics';
 
 export type ThirdPartyAuthProps = {
   onContinueWithGoogle?: FormEventHandler<HTMLFormElement>;
@@ -125,9 +126,11 @@ const ThirdPartySignInForm = ({
   buttonText: ReactElement;
   onSubmit?: FormEventHandler<HTMLFormElement>;
 }) => {
+  const { logViewEventOnce } = useMetrics();
   const stateRef = useRef<HTMLInputElement>(null);
 
   function onClick() {
+    logViewEventOnce(`flow.${party}`, 'oauth-start');
     stateRef.current!.value = getState();
   }