feat(signin): Add conditional keys fetch, scopes in fxaOAuthLogin, "Authorization" in Strapi

Because:
* Non-Sync browser services (VPN, Relay, SmartWindow) should not force password entry just to fetch keys, but should fetch them opportunistically if a password is entered for another reason
* The browser needs to know which scopes were granted after the authorization flow completes
* The isSignedIntoFirefoxDesktop state was too narrow for the scope authorization flow which applies to all Firefox platforms, and we want this editable in Strapi

This commit:
* Splits wantsKeys into requiresKeys (Sync only, forces password) and wantsKeysIfPasswordEntered (non-Sync, opportunistic), with wantsKeys, to allow a "cached login" render without the "keys optional" capability, which is a capability intended for passwordless non-sync browser logins
* Adds scopes field to fxaOAuthLogin WebChannel message at all call sites, because the browser needs to know which scopes were actually granted — with ADR 0049, FxA may deny requested scopes or grant additional ones, and the browser may not request scope at all
* Renames isSignedIntoFirefoxDesktop to isSignedIntoFirefox and removes the Desktop-only check, adds a new page in Strapi for this state so the copy can be updated (e.g. "Authorize")

closes FXA-12939

Author: LZoog

libs/shared/cms/src/__generated__/gql.ts

@@ -175,6 +175,13 @@ export const RelyingPartyResultFactory = (
     pageTitle: faker.string.sample(),
     splitLayout: faker.datatype.boolean(),
   },
+  AuthorizePage: {
+    headline: faker.string.sample(),
+    description: faker.string.sample(),
+    primaryButtonText: faker.string.sample(),
+    pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
+  },
   SigninPasswordlessCodePage: {
     logoUrl: faker.internet.url(),
     logoAltText: faker.internet.url(),

libs/shared/cms/src/__generated__/graphql.ts

@@ -112,6 +112,13 @@ export const relyingPartyQuery = graphql(`
         pageTitle
         splitLayout
       }
+      AuthorizePage {
+        headline
+        description
+        primaryButtonText
+        pageTitle
+        splitLayout
+      }
       SigninPasswordlessCodePage {
         headline
         description

libs/shared/cms/src/lib/queries/relying-party/factories.ts

@@ -73,6 +73,7 @@ export interface RelyingPartyResult {
   SignupConfirmedSyncPage: Page;
   SigninPage: Page;
   SigninCachedPage?: Page;
+  AuthorizePage?: Page;
   SigninTokenCodePage?: Page;
   SigninUnblockCodePage?: Page;
   SigninTotpCodePage?: Page;

libs/shared/cms/src/lib/queries/relying-party/query.ts

@@ -69,6 +69,17 @@ export const smartWindowDesktopOAuthQueryParams = new URLSearchParams({
   service: 'smartwindow',
 });
 
+export const vpnMobileOAuthQueryParams = new URLSearchParams({
+  ...Object.fromEntries(oauthWebchannelV1.entries()),
+  client_id: 'a2270f727f45f648', // Fenix (Android)
+  code_challenge_method: 'S256',
+  code_challenge: '2oc_C4v1qHeefWAGu5LI5oDG1oX4FV_Itc148D8_oQI',
+  scope: 'https://identity.mozilla.com/apps/vpn',
+  state: 'fakestate',
+  automatedBrowser: 'true',
+  service: 'vpn',
+});
+
 export const syncDesktopV3QueryParams = new URLSearchParams({
   context: 'fx_desktop_v3',
   service: 'sync',

libs/shared/cms/src/lib/queries/relying-party/types.ts

@@ -117,6 +117,28 @@ export abstract class BaseLayout {
     }
   }
 
+  /**
+   * Asserts that a web channel message with the given command was sent
+   * and contains the expected scope string in its data.
+   */
+  async checkWebChannelMessageScopes(
+    command: FirefoxCommand,
+    expectedScope: string
+  ) {
+    await this.checkWebChannelMessage(command);
+    const events = await this.getWebChannelEvents();
+    const event = events.find((e) => e.command === command);
+    if (!event) {
+      throw new Error(`No web channel event found for command: ${command}`);
+    }
+    const scopes = (event.data as { scopes?: string })?.scopes;
+    if (!scopes?.includes(expectedScope)) {
+      throw new Error(
+        `Expected scopes to contain "${expectedScope}" but got "${scopes}"`
+      );
+    }
+  }
+
   async listenToWebChannelMessages() {
     await this.page.evaluate(() => {
       function listener(msg: { detail: string }) {

packages/functional-tests/lib/query-params.ts

@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { FirefoxCommand, FxAStatusResponse } from '../../lib/channels';
+import { expect, test } from '../../lib/fixtures/standard';
+import { vpnMobileOAuthQueryParams } from '../../lib/query-params';
+
+test.describe('vpn integration', () => {
+  test('authorization flow - user already signed into Firefox', async ({
+    syncOAuthBrowserPages: { page, signin },
+    testAccountTracker,
+  }) => {
+    const syncCredentials = await testAccountTracker.signUpSync();
+
+    // Simulate the browser reporting that the user is already signed into Firefox
+    const fxaStatusResponse: FxAStatusResponse = {
+      id: 'account_updates',
+      message: {
+        command: FirefoxCommand.FxAStatus,
+        data: {
+          signedInUser: syncCredentials,
+          clientId: 'a2270f727f45f648', // Fenix (Android)
+          capabilities: {
+            engines: [],
+            pairing: false,
+            multiService: false,
+          },
+        },
+      },
+    };
+    await signin.respondToWebChannelMessage(fxaStatusResponse);
+
+    await signin.goto('/authorization', vpnMobileOAuthQueryParams);
+
+    // User is already signed in — cached signin view, no password required
+    await expect(signin.cachedSigninHeading).toBeVisible();
+    await expect(page.getByText(syncCredentials.email)).toBeVisible();
+
+    await signin.signInButton.click();
+
+    await page.waitForURL(/settings/);
+
+    // Verify fxaOAuthLogin was sent with VPN scopes
+    await signin.checkWebChannelMessageScopes(
+      FirefoxCommand.OAuthLogin,
+      'https://identity.mozilla.com/apps/vpn'
+    );
+
+    // Verify services data includes vpn
+    await signin.checkWebChannelMessageServices(FirefoxCommand.Login, {
+      vpn: {},
+    });
+  });
+});

packages/functional-tests/pages/layout.ts

@@ -219,9 +219,10 @@ export const App = ({
   // Determine if user is actually signed in
   const [isSignedIn, setIsSignedIn] = useState<boolean | undefined>(undefined);
 
-  // Track whether the user is signed into Firefox Desktop via WebChannel
-  const [isSignedIntoFirefoxDesktop, setIsSignedIntoFirefoxDesktop] =
-    useState(false);
+  // Determine whether the user is signed into Firefox via WebChannel.
+  // This also partially tells us if the user is in a Firefox "authorization" flow,
+  // where they are already signed in but need to consent to a new scope.
+  const [isSignedIntoFirefox, setIsSignedIntoFirefox] = useState(false);
 
   // Track current page's split layout state to prevent visual flashing during navigation.
   // This state is updated by AppLayout and read by the Suspense fallback to preserve
@@ -256,10 +257,7 @@ export const App = ({
             userFromBrowser.sessionToken
           );
           if (isValidSession) {
-            setIsSignedIntoFirefoxDesktop(
-              !!userFromBrowser?.sessionToken &&
-                integration.isFirefoxDesktopClient()
-            );
+            setIsSignedIntoFirefox(true);
             const cachedUser = getAccountByUid(userFromBrowser.uid);
             // Refresh the token without switching the "current" account.
             persistAccount(
@@ -421,7 +419,7 @@ export const App = ({
             isSignedIn,
             integration,
             flowQueryParams: updatedFlowQueryParams,
-            isSignedIntoFirefoxDesktop,
+            isSignedIntoFirefox,
             setCurrentSplitLayout,
           }}
           path="/*"
@@ -496,13 +494,13 @@ const AuthAndAccountSetupRoutes = ({
   isSignedIn,
   integration,
   flowQueryParams,
-  isSignedIntoFirefoxDesktop,
+  isSignedIntoFirefox,
   setCurrentSplitLayout,
 }: {
   isSignedIn: boolean;
   integration: Integration;
   flowQueryParams: QueryParams;
-  isSignedIntoFirefoxDesktop: boolean;
+  isSignedIntoFirefox: boolean;
   setCurrentSplitLayout: (value: boolean) => void;
 } & RouteComponentProps) => {
   const localAccount = currentAccount();
@@ -639,7 +637,7 @@ const AuthAndAccountSetupRoutes = ({
             serviceName,
             flowQueryParams,
             useFxAStatusResult,
-            isSignedIntoFirefoxDesktop,
+            isSignedIntoFirefox,
             setCurrentSplitLayout,
           }}
         />
@@ -650,7 +648,7 @@ const AuthAndAccountSetupRoutes = ({
             serviceName,
             flowQueryParams,
             useFxAStatusResult,
-            isSignedIntoFirefoxDesktop,
+            isSignedIntoFirefox,
             setCurrentSplitLayout,
           }}
         />
@@ -679,7 +677,7 @@ const AuthAndAccountSetupRoutes = ({
             serviceName,
             flowQueryParams,
             useFxAStatusResult,
-            isSignedIntoFirefoxDesktop,
+            isSignedIntoFirefox,
             setCurrentSplitLayout,
           }}
         />
@@ -690,7 +688,7 @@ const AuthAndAccountSetupRoutes = ({
             serviceName,
             flowQueryParams,
             useFxAStatusResult,
-            isSignedIntoFirefoxDesktop,
+            isSignedIntoFirefox,
             setCurrentSplitLayout,
           }}
         />

packages/functional-tests/tests/misc/vpnIntegration.spec.ts

@@ -146,6 +146,9 @@ export type FxAOAuthLogin = {
   // eventually move to look at fxaLogin as well to prevent FXA-10596.
   declinedSyncEngines?: string[];
   offeredSyncEngines?: string[];
+  // Space-separated list of granted scopes, sent so the browser knows
+  // which scopes were authorized in this flow.
+  scopes?: string;
 };
 
 // ref: https://searchfox.org/mozilla-central/rev/82828dba9e290914eddd294a0871533875b3a0b5/services/fxaccounts/FxAccountsWebChannel.sys.mjs#230