Merge pull request #19981 from mozilla/FXA-12995

PART3: feat(settings): Migrate fxa-settings from GraphQL to direct auth-client (cutover)

Author: vbudhram

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

@@ -71,7 +71,7 @@ test.describe('severity-1 #smoke', () => {
         initialPassword,
         newPassword,
         target,
-        credentials.email
+        newEmail
       );
 
       credentials.password = newPassword;
@@ -119,7 +119,7 @@ test.describe('severity-1 #smoke', () => {
         initialPassword,
         newPassword,
         target,
-        credentials.email
+        secondEmail
       );
 
       credentials.password = newPassword;
@@ -130,9 +130,16 @@ test.describe('severity-1 #smoke', () => {
       await signin.fillOutEmailFirstForm(secondEmail);
       await signin.fillOutPasswordForm(newPassword);
 
-      // Change back the primary email again
+      // Clear stale MFA OTP codes from the password change step
+      await target.emailClient.clear(secondEmail);
+
+      // makePrimaryButton is wrapped in MfaGuard(scope="email").
+      // After sign-out + sign-in, the JWT cache is cleared, so the MFA modal appears.
       await settings.secondaryEmail.makePrimaryButton.click();
-      await settings.confirmMfaGuard(credentials.email);
+      await settings.confirmMfaGuard(secondEmail);
+      await expect(settings.alertBar).toHaveText(
+        new RegExp(`${initialEmail}.*is now your primary email`)
+      );
       await settings.signOut();
 
       // Login with primary email and new password
@@ -141,8 +148,7 @@ test.describe('severity-1 #smoke', () => {
 
       await expect(settings.settingsHeading).toBeVisible();
 
-      console.log('credentials.password', credentials.password);
-      // Update which password to use the account cleanup
+      // Update which password to use for account cleanup
       credentials.password = newPassword;
     });
 
@@ -175,6 +181,8 @@ test.describe('severity-1 #smoke', () => {
       await settings.deleteAccountButton.click();
       await deleteAccount.deleteAccount(credentials.password);
 
+      await expect(page.getByText('Account deleted successfully')).toBeVisible();
+
       // Try creating a new account with the same secondary email as previous account and new password
       await signup.fillOutEmailForm(newEmail);
       await signup.fillOutSignupForm(newPassword);
@@ -290,6 +298,9 @@ async function setNewPassword(
 ): Promise<void> {
   await settings.password.changeButton.click();
 
+  // PageChangePassword is wrapped in MfaGuard(scope="password").
+  // signUpAndPrimeMfa only primes the "email" scope JWT, so the
+  // "password" scope JWT is never cached and the MFA modal always appears.
   await settings.confirmMfaGuard(email);
 
   await changePassword.fillOutChangePassword(oldPassword, newPassword);

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

@@ -138,6 +138,7 @@ test.describe('severity-2 #smoke', () => {
     test('sign in, delete the account', async ({
       target,
       syncBrowserPages: {
+        connectAnotherDevice,
         settings,
         deleteAccount,
         page,
@@ -147,22 +148,39 @@ test.describe('severity-2 #smoke', () => {
       testAccountTracker,
     }) => {
       const credentials = await testAccountTracker.signUpSync();
+      const customEventDetail: LinkAccountResponse = {
+        id: 'account_updates',
+        message: {
+          command: FirefoxCommand.LinkAccount,
+          data: {
+            ok: true,
+          },
+        },
+      };
 
       await page.goto(
         `${target.contentServerUrl}?context=fx_desktop_v3&service=sync&action=email`
       );
+      await signin.respondToWebChannelMessage(customEventDetail);
       await signin.fillOutEmailFirstForm(credentials.email);
       await signin.fillOutPasswordForm(credentials.password);
 
       await expect(page).toHaveURL(/signin_token_code/);
 
+      await signin.checkWebChannelMessage(FirefoxCommand.LinkAccount);
+
       const code = await target.emailClient.getVerifyLoginCode(
         credentials.email
       );
       await signinTokenCode.fillOutCodeForm(code);
-      await expect(page).toHaveURL(/pair/);
+
+      await signin.checkWebChannelMessage(FirefoxCommand.Login);
+
+      await expect(connectAnotherDevice.fxaConnected).toBeEnabled();
 
       await settings.goto();
+      await page.waitForURL(/settings/);
+      await expect(settings.settingsHeading).toBeVisible();
       //Click Delete account
       await settings.deleteAccountButton.click();
       await deleteAccount.deleteAccount(credentials.password);

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

@@ -47,6 +47,38 @@ export type CredentialStatus = {
   clientSalt?: string;
 };
 
+export interface SecurityEvent {
+  name: string;
+  createdAt: number;
+  verified?: boolean;
+}
+
+export interface AttachedClient {
+  clientId: string;
+  isCurrentSession: boolean;
+  userAgent: string;
+  deviceType: string | null;
+  deviceId: string | null;
+  name: string | null;
+  lastAccessTime: number;
+  lastAccessTimeFormatted: string;
+  approximateLastAccessTime: number | null;
+  approximateLastAccessTimeFormatted: string | null;
+  location?: {
+    city?: string | null;
+    country?: string | null;
+    state?: string | null;
+    stateCode?: string | null;
+  };
+  os: string | null;
+  sessionTokenId: string | null;
+  refreshTokenId: string | null;
+}
+
+export interface RecoveryKeyData {
+  recoveryData: string;
+}
+
 export type SignUpOptions = {
   keys?: boolean;
   service?: string;
@@ -1874,11 +1906,11 @@ export default class AuthClient {
     return this.sessionGet('/account/sessions', sessionToken, headers);
   }
 
-  async securityEvents(sessionToken: hexstring, headers?: Headers) {
+  async securityEvents(sessionToken: hexstring, headers?: Headers): Promise<SecurityEvent[]> {
     return this.sessionGet('/securityEvents', sessionToken, headers);
   }
 
-  async attachedClients(sessionToken: hexstring, headers?: Headers) {
+  async attachedClients(sessionToken: hexstring, headers?: Headers): Promise<AttachedClient[]> {
     return this.sessionGet('/account/attached_clients', sessionToken, headers);
   }
 
@@ -2636,7 +2668,7 @@ export default class AuthClient {
     accountResetToken: hexstring,
     recoveryKeyId: string,
     headers?: Headers
-  ) {
+  ): Promise<RecoveryKeyData> {
     return this.hawkRequest(
       'GET',
       `/recoveryKey/${recoveryKeyId}`,

packages/fxa-auth-client/lib/client.ts

@@ -61,9 +61,6 @@ const settingsConfig = {
     serverName: config.get('sentry.serverName'),
   },
   servers: {
-    gql: {
-      url: config.get('settings_gql_url'),
-    },
     oauth: {
       url: config.get('fxaccount_url'),
     },
@@ -76,6 +73,9 @@ const settingsConfig = {
     paymentsNext: {
       url: config.get('payments_next_hosted_url'),
     },
+    legalDocs: {
+      url: config.get('legal_docs_url'),
+    },
   },
   oauth: {
     clientId: config.get('oauth_client_id'),
@@ -173,10 +173,7 @@ function preconnect(val) {
 
 function resolvePreConnectDirectives(settingsConfig) {
   // Using '?' will breaks l10n extraction :9
-  let gqlUrl, authUrl, oauthUrl, sentryUrl;
-  try {
-    gqlUrl = settingsConfig.servers.gql.url;
-  } catch (e) {}
+  let authUrl, oauthUrl, sentryUrl;
   try {
     authUrl = settingsConfig.servers.auth.url;
   } catch (e) {}
@@ -188,7 +185,6 @@ function resolvePreConnectDirectives(settingsConfig) {
   } catch (e) {}
 
   return {
-    __GQL_URL_PRECONNECT__: preconnect(gqlUrl),
     __AUTH_URL_PRECONNECT__: preconnect(authUrl),
     __OAUTH_URL_PRECONNECT__: preconnect(oauthUrl),
     __SENTRY_URL_PRECONNECT__: preconnect(sentryUrl),
@@ -249,9 +245,9 @@ const createSettingsProxy = createProxyMiddleware({
 // Modify the static settings page by replacing __SERVER_CONFIG__ with the config object
 const modifySettingsStatic = function (req, res) {
   if (
-    process.env.NODE_ENV === 'development' &&
+    ['development', 'test'].includes(process.env.NODE_ENV) &&
     req.path.startsWith('/settings/') &&
-    ['.js', '.css', '.ftl', '.json', '.svg'].includes(extname(req.path))
+    ['.js', '.css', '.ftl', '.json', '.svg', '.md'].includes(extname(req.path))
   ) {
     const filePath = join(
       settingsStaticPath,