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

@@ -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 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,
           }}
         />

libs/shared/cms/src/lib/queries/relying-party/types.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

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

@@ -305,15 +305,15 @@ export function useFinishOAuthFlowHandler(
  * to /signin instead of showing an error component? FXA-10889
  */
 export function useOAuthKeysCheck(
-  integration: Pick<OAuthIntegration, 'type' | 'wantsKeys'>,
+  integration: Pick<OAuthIntegration, 'type' | 'requiresKeys'>,
   keyFetchToken?: hexstring,
   unwrapBKey?: hexstring,
   isSignInWithThirdPartyAuth?: boolean
 ) {
   if (
     (isOAuthIntegration(integration) ||
       isSyncDesktopV3Integration(integration)) &&
-    integration.wantsKeys() &&
+    integration.requiresKeys() &&
     // If the user has 2FA enabled but chose to login to the browser via third party
     // auth, keys are not fetched because the user didn't enter a password.
     // For this case, skip the keys check, the browser expects them to be undefined.

packages/fxa-settings/src/lib/channels/firefox.ts

@@ -22,7 +22,11 @@ import {
   KeyTransforms as T,
   ModelDataProvider,
 } from '../../../lib/model-data';
-import { IsEmailOrEmpty, IsFxaRedirectToUrl, IsFxaRedirectUri } from '../../../lib/validation';
+import {
+  IsEmailOrEmpty,
+  IsFxaRedirectToUrl,
+  IsFxaRedirectUri,
+} from '../../../lib/validation';
 
 /**
  * Base integration class. Fields in this class represents data commonly accessed across many pages and is useful for various flows.

packages/fxa-settings/src/lib/oauth/hooks.tsx

@@ -106,6 +106,10 @@ export class GenericIntegration<
     return undefined;
   }
 
+  isFirefoxClient() {
+    return this.isFirefoxDesktopClient() || this.isFirefoxMobileClient();
+  }
+
   isFirefoxMobileClient() {
     return false;
   }
@@ -151,23 +155,50 @@ export class GenericIntegration<
   }
 
   /**
-   * Currently only Sync _requires_ keys (entering a password). Other
-   * services may see cached signin or choose to sign in with third party auth.
-   * However, for non-Sync browser service signins, if the password is entered,
-   * we go ahead and get Sync keys so users can turn Sync on in the browser
-   * without being bounced back to FxA.
+   * Whether this integration strictly requires keys, forcing password entry.
+   * Currently only Sync requires keys.
    *
    * Note, the Relay browser service login launched in Firefox desktop 135, and
    * the "keys optional" capability launched in Fx desktop 147, meaning all Relay
    * service users in those Fx versions require a password.
    *
    * Desktop OAuth launched with Fx 134. SyncDesktopV3 users don't have non-Sync
    * browser support.
-   * */
-  wantsKeys(): boolean {
+   */
+  requiresKeys(): boolean {
+    return false;
+  }
+
+  /**
+   * Whether this integration wants keys opportunistically — if the user
+   * enters a password for another reason, we should also fetch keys.
+   * This applies to non-Sync browser services (Relay, VPN, SmartWindow) that
+   * request the Sync scope so users can turn Sync on in the browser without
+   * being bounced back to FxA.
+   */
+  wantsKeysIfPasswordEntered(): boolean {
     return false;
   }
 
+  /**
+   * Combined check: whether this integration wants keys in any scenario.
+   * Use `requiresKeys()` when you need to know if keys are mandatory (e.g.,
+   * deciding whether to force a password). Use `wantsKeys()` when you need
+   * to know if keys should be fetched when available (e.g., setting the
+   * `keys` param on the auth server request).
+   */
+  wantsKeys(): boolean {
+    return this.requiresKeys() || this.wantsKeysIfPasswordEntered();
+  }
+
+  /**
+   * Returns the scopes that were granted for this integration.
+   * Overridden in OAuthNativeIntegration; returns undefined for all other types.
+   */
+  getGrantedScopes(): string | undefined {
+    return undefined;
+  }
+
   wantsLogin(): boolean {
     return false;
   }