Merge pull request #19911 from mozilla/FXA-12800

feat(signin): Allow cached signin when keys optional

Author: MagentaManifold

packages/fxa-settings/src/components/Settings/VerifiedSessionGuard/index.test.tsx

@@ -64,7 +64,19 @@ it('renders the guard when unverified', async () => {
     async () =>
       await renderWithRouter(
         <AppContext.Provider
-          value={mockAppContext({ account, session: mockSession(false) })}
+          value={mockAppContext({
+            account,
+            session: mockSession(false),
+            authClient: {
+              sessionStatus: () => {
+                return {
+                  details: {
+                    sessionVerified: false,
+                  },
+                };
+              },
+            } as unknown as AuthClient,
+          })}
         >
           <VerifiedSessionGuard {...{ onDismiss, onError }}>
             <div>Content</div>

packages/fxa-settings/src/models/mocks.tsx

@@ -204,7 +204,6 @@ export function mockAppContext(context?: AppContextValue) {
     {
       account: MOCK_ACCOUNT,
       session: mockSession(),
-      authClient: mockAuthClient(),
       config: getDefault(),
       sensitiveDataClient: mockSensitiveDataClient(),
       uniqueUserId: '4a9512ac-3110-43df-aa8a-958A3d210b9c3',

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

@@ -139,6 +139,24 @@ export const SignInRelayWithPasswordlessSupport = storyWithProps({
   supportsKeysOptionalLogin: true,
 });
 
+export const CachedSignInAiWindowWithPasswordlessSupport = storyWithProps({
+  sessionToken: MOCK_SESSION_TOKEN,
+  integration: createMockSigninOAuthNativeIntegration({
+    service: OAuthNativeServices.AiWindow,
+    isSync: false,
+  }),
+  supportsKeysOptionalLogin: true,
+});
+
+export const CachedSignInRelayWithPasswordlessSupport = storyWithProps({
+  sessionToken: MOCK_SESSION_TOKEN,
+  integration: createMockSigninOAuthNativeIntegration({
+    service: OAuthNativeServices.Relay,
+    isSync: false,
+  }),
+  supportsKeysOptionalLogin: true,
+});
+
 export const SignInAiWindowWithPasswordlessSupport = storyWithProps({
   integration: createMockSigninOAuthNativeIntegration({
     service: OAuthNativeServices.AiWindow,

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

@@ -1031,6 +1031,81 @@ describe('Signin component', () => {
       passwordInputNotRendered();
     });
 
+    it('shows cached signin for service=relay when supportsKeysOptionalLogin is true', () => {
+      const integration = createMockSigninOAuthNativeIntegration({
+        service: OAuthNativeServices.Relay,
+        isSync: false,
+      });
+      render({
+        integration,
+        sessionToken: MOCK_SESSION_TOKEN,
+        supportsKeysOptionalLogin: true,
+      });
+
+      passwordInputNotRendered();
+      expect(GleanMetrics.cachedLogin.view).toHaveBeenCalledWith({
+        event: { thirdPartyLinks: true },
+      });
+    });
+
+    it('shows cached signin for service=aiwindow when supportsKeysOptionalLogin is true', () => {
+      const integration = createMockSigninOAuthNativeIntegration({
+        service: OAuthNativeServices.AiWindow,
+        isSync: false,
+      });
+      render({
+        integration,
+        sessionToken: MOCK_SESSION_TOKEN,
+        supportsKeysOptionalLogin: true,
+      });
+
+      passwordInputNotRendered();
+      expect(GleanMetrics.cachedLogin.view).toHaveBeenCalledWith({
+        event: { thirdPartyLinks: true },
+      });
+    });
+
+    it('requires password for service=relay when supportsKeysOptionalLogin is false', () => {
+      const integration = createMockSigninOAuthNativeIntegration({
+        service: OAuthNativeServices.Relay,
+        isSync: false,
+      });
+      render({
+        integration,
+        sessionToken: MOCK_SESSION_TOKEN,
+        supportsKeysOptionalLogin: false,
+      });
+
+      passwordInputRendered();
+      expect(GleanMetrics.login.view).toHaveBeenCalledWith({
+        event: { thirdPartyLinks: false },
+      });
+    });
+
+    it('sends webchannel message if cached signin for service=relay when supportsKeysOptionalLogin is true', async () => {
+      const fxaLoginSpy = jest.spyOn(firefox, 'fxaLogin');
+
+      const integration = createMockSigninOAuthNativeIntegration({
+        service: OAuthNativeServices.Relay,
+        isSync: false,
+      });
+      render({
+        integration,
+        sessionToken: MOCK_SESSION_TOKEN,
+        supportsKeysOptionalLogin: true,
+      });
+      await submit();
+      await waitFor(() => {
+        expect(fxaLoginSpy).toHaveBeenCalledWith({
+          email: MOCK_EMAIL,
+          sessionToken: MOCK_SESSION_TOKEN,
+          uid: MOCK_UID,
+          verified: true,
+          services: { relay: {} },
+        });
+      });
+    });
+
     it('emits an event on forgot password link click', async () => {
       renderWithLocalizationProvider(
         <Subject sessionToken={MOCK_SESSION_TOKEN} />

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

@@ -7,7 +7,7 @@ import { useNavigateWithQuery } from '../../lib/hooks/useNavigateWithQuery';
 import classNames from 'classnames';
 import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
 import { FtlMsg } from 'fxa-react/lib/utils';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import AppLayout from '../../components/AppLayout';
 import CardHeader from '../../components/CardHeader';
@@ -92,12 +92,14 @@ const Signin = ({
   const isServiceWithEmailVerification =
     !!clientId && config.servicesWithEmailVerification.includes(clientId);
 
-  // We must use a ref because we may update this value in a callback
-  let isPasswordNeededRef = useRef(
-    (!sessionToken && hasPassword) ||
+  const [hasCachedAccount, setHasCachedAccount] =
+    useState<boolean>(!!sessionToken);
+
+  const isPasswordNeeded =
+    ((!hasCachedAccount && hasPassword) ||
       integration.wantsKeys() ||
-      (isOAuth && integration.wantsLogin())
-  );
+      (isOAuth && integration.wantsLogin())) &&
+    !(hasCachedAccount && supportsKeysOptionalLogin);
 
   const localizedPasswordFormLabel = ftlMsgResolver.getMsg(
     'signin-password-button-label',
@@ -127,7 +129,7 @@ const Signin = ({
     : isOAuthNative && !supportsKeysOptionalLogin;
 
   useEffect(() => {
-    if (!isPasswordNeededRef.current) {
+    if (!isPasswordNeeded) {
       GleanMetrics.cachedLogin.view({
         event: { thirdPartyLinks: !hideThirdPartyAuth },
       });
@@ -136,7 +138,7 @@ const Signin = ({
         event: { thirdPartyLinks: !hideThirdPartyAuth },
       });
     }
-  }, [isPasswordNeededRef, hideThirdPartyAuth]);
+  }, [isPasswordNeeded, hideThirdPartyAuth]);
 
   const signInWithCachedAccount = useCallback(
     async (sessionToken: hexstring) => {
@@ -167,6 +169,8 @@ const Signin = ({
           queryParams: location.search,
           performNavigation: !integration.isFirefoxMobileClient(),
           isServiceWithEmailVerification,
+          handleFxaLogin: true,
+          handleFxaOAuthLogin: true,
         };
 
         const { error: navError } = await handleNavigation(navigationOptions);
@@ -181,7 +185,7 @@ const Signin = ({
           getLocalizedErrorMessage(ftlMsgResolver, error)
         );
         if (error.errno === AuthUiErrors.SESSION_EXPIRED.errno) {
-          isPasswordNeededRef.current = true;
+          setHasCachedAccount(false);
         }
         setSigninLoading(false);
       }
@@ -339,19 +343,19 @@ const Signin = ({
 
   const onSubmit = useCallback(
     async ({ password }: { password: string }) => {
-      if (isPasswordNeededRef.current && password === '') {
+      if (isPasswordNeeded && password === '') {
         setPasswordTooltipErrorText(localizedValidPasswordError);
         return;
       }
 
-      !isPasswordNeededRef.current && sessionToken
+      !isPasswordNeeded && sessionToken
         ? signInWithCachedAccount(sessionToken)
         : signInWithPassword(password);
     },
     [
       signInWithCachedAccount,
       signInWithPassword,
-      isPasswordNeededRef,
+      isPasswordNeeded,
       localizedValidPasswordError,
       sessionToken,
     ]
@@ -372,7 +376,7 @@ const Signin = ({
           }}
         />
       )}
-      {isPasswordNeededRef.current && hasPassword ? (
+      {isPasswordNeeded && hasPassword ? (
         <CardHeader
           headingText="Enter your password"
           headingAndSubheadingFtlId="signin-password-needed-header-2"
@@ -441,11 +445,12 @@ const Signin = ({
           </FtlMsg>
         )}
       </div>
-      {!hasLinkedAccountAndNoPassword && (
+      {(!hasLinkedAccountAndNoPassword ||
+        (hasCachedAccount && supportsKeysOptionalLogin)) && (
         <form onSubmit={handleSubmit(onSubmit)}>
           <input type="email" className="hidden" value={email} disabled />
 
-          {isPasswordNeededRef.current && (
+          {isPasswordNeeded && (
             <InputPassword
               name="password"
               anchorPosition="start"
@@ -538,7 +543,7 @@ const Signin = ({
               }`}
               className="text-sm link-blue mx-auto tablet:mx-0"
               onClick={() =>
-                !isPasswordNeededRef.current
+                !isPasswordNeeded
                   ? GleanMetrics.cachedLogin.forgotPassword()
                   : GleanMetrics.login.forgotPassword()
               }