diff --git a/packages/fxa-settings/src/components/App/index.tsx b/packages/fxa-settings/src/components/App/index.tsx
index 187531d0e5..7c0b571d89 100644
--- a/packages/fxa-settings/src/components/App/index.tsx
+++ b/packages/fxa-settings/src/components/App/index.tsx
@@ -399,13 +399,16 @@ const AuthAndAccountSetupRoutes = ({
/>
-
+
- ),
};
await session.verifySession(code, options);
diff --git a/packages/fxa-settings/src/pages/Signup/container.test.tsx b/packages/fxa-settings/src/pages/Signup/container.test.tsx
index 9c397eaad3..88c03d7736 100644
--- a/packages/fxa-settings/src/pages/Signup/container.test.tsx
+++ b/packages/fxa-settings/src/pages/Signup/container.test.tsx
@@ -50,7 +50,7 @@ import { ApolloClient } from '@apollo/client';
import { ModelDataProvider } from '../../lib/model-data';
import AuthClient from 'fxa-auth-client/browser';
import { LocationProvider } from '@reach/router';
-import { mockLoadingSpinnerModule } from '../mocks';
+import { mockLoadingSpinnerModule, MOCK_FLOW_ID } from '../mocks';
// TIP - Sometimes, we want to mock inputs. In this case they can be mocked directly and
// often times a mocking util isn't even necessary. Note that using the Dependency Inversion
@@ -218,6 +218,7 @@ async function render(text?: string) {
integration,
serviceName,
}}
+ flowQueryParams={{ flowId: MOCK_FLOW_ID }}
/>
);
@@ -402,6 +403,9 @@ describe('sign-up-container', () => {
keys: true,
service: MozServices.FirefoxSync,
atLeast18AtReg: true,
+ metricsContext: {
+ flowId: MOCK_FLOW_ID,
+ },
},
},
},
diff --git a/packages/fxa-settings/src/pages/Signup/container.tsx b/packages/fxa-settings/src/pages/Signup/container.tsx
index 6f587e0706..7159e8b7a6 100644
--- a/packages/fxa-settings/src/pages/Signup/container.tsx
+++ b/packages/fxa-settings/src/pages/Signup/container.tsx
@@ -40,6 +40,8 @@ import { createSaltV2 } from 'fxa-auth-client/lib/salt';
import { KeyStretchExperiment } from '../../models/experiments/key-stretch-experiment';
import { handleGQLError } from './utils';
import VerificationMethods from '../../constants/verification-methods';
+import { queryParamsToMetricsContext } from '../../lib/metrics';
+import { QueryParams } from '../..';
/*
* In content-server, the `email` param is optional. If it's provided, we
@@ -74,8 +76,10 @@ type LocationState = {
const SignupContainer = ({
integration,
+ flowQueryParams,
}: {
integration: SignupContainerIntegration;
+ flowQueryParams: QueryParams;
} & RouteComponentProps) => {
const authClient = useAuthClient();
const keyStretchExp = useValidatedQueryParams(KeyStretchExperiment);
@@ -190,6 +194,9 @@ const SignupContainer = ({
keys: wantsKeys,
...(service !== MozServices.Default && { service }),
atLeast18AtReg,
+ metricsContext: queryParamsToMetricsContext(
+ flowQueryParams as unknown as Record
+ ),
};
try {
const credentialsV1 = await getCredentials(email, password);
@@ -253,7 +260,14 @@ const SignupContainer = ({
return handleGQLError(error);
}
},
- [beginSignup, integration, keyStretchExp, config, wantsKeys]
+ [
+ integration,
+ wantsKeys,
+ flowQueryParams,
+ keyStretchExp.queryParamModel,
+ config,
+ beginSignup,
+ ]
);
// TODO: probably a better way to read this?
diff --git a/packages/fxa-settings/src/pages/Signup/interfaces.ts b/packages/fxa-settings/src/pages/Signup/interfaces.ts
index 28f3bdaaec..d9163fdfc2 100644
--- a/packages/fxa-settings/src/pages/Signup/interfaces.ts
+++ b/packages/fxa-settings/src/pages/Signup/interfaces.ts
@@ -9,6 +9,7 @@ import {
OAuthIntegration,
} from '../../models';
import { SignupQueryParams } from '../../models/pages/signup';
+import { MetricsContext } from 'fxa-auth-client/browser';
export interface BeginSignupResponse {
signUp: {
@@ -27,6 +28,7 @@ export interface BeginSignUpOptions {
verificationMethod?: string;
keys?: boolean;
atLeast18AtReg: true | null;
+ metricsContext: MetricsContext;
}
export type BeginSignupHandler = (