feat(signin): Add conditional keys fetch, scopes in fxaOAuthLogin, "Authorization" state + 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")
* Adds tests/stories, updates Signin stories to new format

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,32 @@ export const smartWindowDesktopOAuthQueryParams = new URLSearchParams({
   service: 'smartwindow',
 });
 
+export const syncMobileOAuthFenixQueryParams = new URLSearchParams({
+  ...Object.fromEntries(oauthWebchannelV1.entries()),
+  client_id: 'a2270f727f45f648', // Fenix (Android)
+  code_challenge_method: 'S256',
+  code_challenge: '2oc_C4v1qHeefWAGu5LI5oDG1oX4FV_Itc148D8_oQI',
+  // eslint-disable-next-line camelcase
+  keys_jwk:
+    'eyJrdHkiOiJFQyIsImNydiI6IlAtMjU2IiwieCI6ImdUejVIWFJfa2pxSFRtMG43ZjhxcDMybVZFaHZ1cGo1dXNUV1h5TWZsb1kiLCJ5IjoiVER5TlhkalhibHZld1pWLVc5MXNDZU9fRWd0NU9WYXhpblBzOEFTQ3owZyJ9',
+  scope:
+    'https://identity.mozilla.com/apps/oldsync https://identity.mozilla.com/tokens/session',
+  state: 'fakestate',
+  automatedBrowser: 'true',
+  service: 'sync',
+});
+
+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

@@ -95,6 +95,12 @@ export abstract class BaseLayout {
     });
   }
 
+  async clearWebChannelEvents() {
+    await this.page.evaluate(() => {
+      sessionStorage.removeItem('webChannelEvents');
+    });
+  }
+
   /**
    * Asserts that a web channel message with the given command was sent
    * and contains the expected services object in its data.
@@ -117,6 +123,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,49 @@
+/* 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 } from '../../lib/channels';
+import { expect, test } from '../../lib/fixtures/standard';
+import {
+  syncMobileOAuthFenixQueryParams,
+  vpnMobileOAuthQueryParams,
+} from '../../lib/query-params';
+
+test.describe('vpn integration', () => {
+  test('authorization flow - user already signed into Firefox', async ({
+    syncOAuthBrowserPages: { page, signin },
+    testAccountTracker,
+  }) => {
+    const { email, password } = await testAccountTracker.signUp();
+
+    // First, sign into Sync with Fenix (Android) client ID
+    await signin.goto('/authorization', syncMobileOAuthFenixQueryParams);
+    await signin.fillOutEmailFirstForm(email);
+    await signin.fillOutPasswordForm(password);
+
+    // Wait for Sync sign-in to complete, then clear events for the
+    // VPN scope check later in the test
+    await signin.checkWebChannelMessage(FirefoxCommand.OAuthLogin);
+    await signin.clearWebChannelEvents();
+
+    // Now navigate to VPN authorization — user is already signed into Firefox
+    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(email)).toBeVisible();
+
+    await signin.signInButton.click();
+
+    // 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

@@ -5,7 +5,7 @@
 import { expect, test } from '../../lib/fixtures/standard';
 
 test.describe('severity-2 #smoke', () => {
-  test.describe('OAuth signin token code', () => {
+  test.describe('signin token code for OAuth RP redirect with client requesting scoped keys', () => {
     function toQueryString(obj: Record<string, any>) {
       return Object.entries(obj)
         .map((x) => `${x[0]}=${x[1]}`)
@@ -19,7 +19,6 @@ test.describe('severity-2 #smoke', () => {
       code_challenge_method: 'S256',
       forceUA:
         'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36',
-
       keys_jwk:
         'eyJrdHkiOiJFQyIsImtpZCI6Im9DNGFudFBBSFZRX1pmQ09RRUYycTRaQlZYblVNZ2xISGpVRzdtSjZHOEEiLCJjcnYiOiJQLTI1NiIsIngiOiJDeUpUSjVwbUNZb2lQQnVWOTk1UjNvNTFLZVBMaEg1Y3JaQlkwbXNxTDk0IiwieSI6IkJCWDhfcFVZeHpTaldsdXU5MFdPTVZwamIzTlpVRDAyN0xwcC04RW9vckEifQ',
       redirect_uri: 'https://mozilla.github.io/notes/fxa/android-redirect.html',

packages/functional-tests/tests/misc/vpnIntegration.spec.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,
           }}
         />