fix(signin): Render cached signin for passwordless users in Sync flow

Because:
* We recently made some changes to the Signin page to hide the third party auth buttons in favor of showing a cached sign in view for passwordless users signing into Sync. There is a bug where we render the password input for passwordless users trying to sign into Sync

This commit:
* Updates the isPasswordNeeded logic to always exclude users that do not have a password
* Navigates these users to set password instead and does not send web channel messages until password creation is complete

closes FXA-13251

Author: LZoog

packages/fxa-settings/src/pages/PostVerify/SetPassword/container.tsx

@@ -5,6 +5,7 @@
 import { RouteComponentProps, useLocation } from '@reach/router';
 import SetPassword from '.';
 import { currentAccount } from '../../../lib/cache';
+import { persistAccount } from '../../../lib/storage-utils';
 import { useNavigateWithQuery } from '../../../lib/hooks/useNavigateWithQuery';
 import { Integration, useAuthClient } from '../../../models';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -45,7 +46,6 @@ const SetPasswordContainer = ({
   const sessionToken = storedLocalAccount?.sessionToken;
   const uid = storedLocalAccount?.uid;
 
-
   const location = useLocation() as ReturnType<typeof useLocation> & {
     state?: SetPasswordLocationState;
   };
@@ -122,14 +122,18 @@ const SetPasswordContainer = ({
     (uid: string, email: string, sessionToken: string): CreatePasswordHandler =>
       async (newPassword: string) => {
         try {
-          const { authPW, unwrapBKey } =
-            await authClient.createPassword(sessionToken, email, newPassword);
+          const { authPW, unwrapBKey } = await authClient.createPassword(
+            sessionToken,
+            email,
+            newPassword
+          );
 
           const keyFetchToken = await getKeyFetchToken(
             authPW,
             email,
             sessionToken
           );
+          persistAccount({ uid, hasPassword: true });
 
           GleanMetrics.thirdPartyAuthSetPassword.success();
 

packages/fxa-settings/src/pages/Signin/index.stories.tsx

@@ -130,7 +130,17 @@ export const CachedSyncBrowserService = storyWithProps(
     sessionToken: MOCK_SESSION_TOKEN,
     integration: createMockSigninOAuthNativeSyncIntegration(),
   },
-  'Cached > Sync browser service'
+  'Cached > Sync browser service > Account has password'
+);
+export const CachedSyncBrowserServicePasswordlessAccount = storyWithProps(
+  {
+    sessionToken: MOCK_SESSION_TOKEN,
+    serviceName: MozServices.FirefoxSync,
+    hasLinkedAccount: true,
+    hasPassword: false,
+    integration: createMockSigninOAuthNativeSyncIntegration(),
+  },
+  'Cached > Sync browser service > Passwordless account (user will be taken to Set Password page)'
 );
 export const CachedNonSyncBrowserServiceWithoutPasswordlessCapability =
   storyWithProps(

packages/fxa-settings/src/pages/Signin/index.test.tsx

@@ -1136,12 +1136,55 @@ describe('Signin component', () => {
           hardNavigateSpy.mockRestore();
         });
 
-        it('always renders password input when integration wants keys', () => {
+        it('renders password input when integration wants keys and user has a password', () => {
           const integration = createMockSigninOAuthNativeSyncIntegration();
           render({ integration, sessionToken: MOCK_SESSION_TOKEN });
           passwordInputRendered();
         });
 
+        it('does not render password input when integration wants keys but user has no password', () => {
+          const integration = createMockSigninOAuthNativeSyncIntegration();
+          render({
+            integration,
+            sessionToken: MOCK_SESSION_TOKEN,
+            hasPassword: false,
+            hasLinkedAccount: true,
+          });
+          passwordInputNotRendered();
+          // Should show cached sign-in button instead
+          screen.getByRole('button', { name: 'Sign in' });
+        });
+
+        it('passes isSignInWithThirdPartyAuth for cached Sync passwordless user', async () => {
+          const handleNavigationSpy = jest.spyOn(
+            SigninUtils,
+            'handleNavigation'
+          );
+          const cachedSigninHandler = jest
+            .fn()
+            .mockReturnValueOnce(CACHED_SIGNIN_HANDLER_RESPONSE);
+          const integration = createMockSigninOAuthNativeSyncIntegration();
+          render({
+            integration,
+            sessionToken: MOCK_SESSION_TOKEN,
+            hasPassword: false,
+            hasLinkedAccount: true,
+            cachedSigninHandler,
+          });
+
+          await submit();
+          await waitFor(() => {
+            expect(handleNavigationSpy).toHaveBeenCalledWith(
+              expect.objectContaining({
+                isSignInWithThirdPartyAuth: true,
+                handleFxaLogin: false,
+                handleFxaOAuthLogin: false,
+              })
+            );
+          });
+          handleNavigationSpy.mockRestore();
+        });
+
         it('navigates to OAuth redirect', async () => {
           const cachedSigninHandler = jest
             .fn()
@@ -1402,6 +1445,28 @@ describe('Signin component', () => {
         });
       });
 
+      it('shows third party auth instead of password when session expires for passwordless user', async () => {
+        const cachedSigninHandler = jest
+          .fn()
+          .mockReturnValueOnce(createCachedSigninResponseError());
+        renderWithLocalizationProvider(
+          <Subject
+            sessionToken={MOCK_SESSION_TOKEN}
+            hasPassword={false}
+            hasLinkedAccount={true}
+            {...{ cachedSigninHandler }}
+          />
+        );
+
+        await submit();
+        await waitFor(() => {
+          expect(cachedSigninHandler).toHaveBeenCalledWith(MOCK_SESSION_TOKEN);
+          screen.getByText('Session expired. Sign in to continue.');
+          passwordInputNotRendered();
+          thirdPartyAuthRendered();
+        });
+      });
+
       it('displays other errors', async () => {
         const unexpectedError = AuthUiErrors.UNEXPECTED_ERROR;
         const cachedSigninHandler = jest.fn().mockReturnValueOnce(

packages/fxa-settings/src/pages/Signin/index.tsx

@@ -84,6 +84,7 @@ const Signin = ({
 
   const isOAuth = isOAuthIntegration(integration);
   const isOAuthNative = isOAuthNativeIntegration(integration);
+  const isSync = integration.isSync();
   const clientId = integration.getClientId();
   const hasLinkedAccountAndNoPassword = hasLinkedAccount && !hasPassword;
 
@@ -95,17 +96,22 @@ const Signin = ({
   const [hasCachedAccount, setHasCachedAccount] =
     useState<boolean>(!!sessionToken);
 
-  // A password is needed if:
-  // * There is no session token in local storage and the user has a password, OR
+  // A password is needed and password input rendered if the user has a password AND:
+  // * There is no session token in local storage, OR
   // * The integration wants keys (e.g. Sync always wants keys, and non-sync browser
   //   services like Smart Window also request keys if there's no cached sign-in
   //   to prevent a redirect to FxA to turn Sync on), OR
   // * The integration is OAuth and wants login (prompt=login)
   // UNLESS the user has a cached account AND they are in an OAuth Native flow AND
   // the browser supports the "keys optional" capability for non-Sync browser signins.
   // These users will be redirected to FxA later to enter a password to turn Sync on.
+  //
+  // If the user has no password (e.g. third-party auth only), we show the cached
+  // sign-in view instead. After session verification, Sync users will be redirected
+  // to set a password via post_verify/third_party_auth/set_password.
   const isPasswordNeeded =
-    ((!hasCachedAccount && hasPassword) ||
+    hasPassword &&
+    (!hasCachedAccount ||
       integration.wantsKeys() ||
       (isOAuth && integration.wantsLogin())) &&
     !(hasCachedAccount && supportsKeysOptionalLogin);
@@ -136,9 +142,7 @@ const Signin = ({
   // Show for all other cases.
   const hideThirdPartyAuth =
     hasCachedAccount ||
-    (integration.isSync()
-      ? hasPassword
-      : isOAuthNative && !supportsKeysOptionalLogin);
+    (isSync ? hasPassword : isOAuthNative && !supportsKeysOptionalLogin);
 
   useEffect(() => {
     if (!isPasswordNeeded) {
@@ -181,8 +185,12 @@ const Signin = ({
           queryParams: location.search,
           performNavigation: !integration.isFirefoxMobileClient(),
           isServiceWithEmailVerification,
-          handleFxaLogin: true,
-          handleFxaOAuthLogin: true,
+          // Sync users in the cached path are passwordless (third-party auth);
+          // defer web channel messages until after password creation.
+          handleFxaLogin: !isSync,
+          handleFxaOAuthLogin: !isSync,
+          // Redirect passwordless Sync users to set_password after session verification.
+          isSignInWithThirdPartyAuth: isSync,
         };
 
         const { error: navError } = await handleNavigation(navigationOptions);
@@ -209,6 +217,7 @@ const Signin = ({
       setLocalizedBannerError,
       integration,
       finishOAuthFlowHandler,
+      isSync,
       location.search,
       webRedirectCheck,
       isServiceWithEmailVerification,