Merge pull request #49042 from bernhardoj/fix/47883-magic-code-expire…

…d-briefly Fix magic code expired is shown briefly
Expensify · Oct 4, 2024 · 0ed41d7 · 0ed41d7
2 parents a5e5392 + a1138a7
commit 0ed41d7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 44 deletions.
diff --git a/src/pages/ValidateLoginPage/index.tsx b/src/pages/ValidateLoginPage/index.tsx
@@ -1,18 +1,19 @@
 import React, {useEffect} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageProps} from './types';
+import type ValidateLoginPageProps from './types';
 
 function ValidateLoginPage({
     route: {
         params: {accountID, validateCode, exitTo},
     },
-    session,
-}: ValidateLoginPageProps<ValidateLoginPageOnyxNativeProps>) {
+}: ValidateLoginPageProps) {
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+
     useEffect(() => {
         // Wait till navigation becomes available
         Navigation.isNavigationReady().then(() => {
@@ -46,6 +47,4 @@ function ValidateLoginPage({
 
 ValidateLoginPage.displayName = 'ValidateLoginPage';
 
-export default withOnyx<ValidateLoginPageProps<ValidateLoginPageOnyxNativeProps>, ValidateLoginPageOnyxNativeProps>({
-    session: {key: ONYXKEYS.SESSION},
-})(ValidateLoginPage);
+export default ValidateLoginPage;
diff --git a/src/pages/ValidateLoginPage/index.website.tsx b/src/pages/ValidateLoginPage/index.website.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import ExpiredValidateCodeModal from '@components/ValidateCode/ExpiredValidateCodeModal';
 import JustSignedInModal from '@components/ValidateCode/JustSignedInModal';
@@ -9,22 +9,26 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ValidateLoginPageOnyxProps, ValidateLoginPageProps} from './types';
+import type ValidateLoginPageProps from './types';
 
 function ValidateLoginPage({
-    account,
-    credentials,
     route: {
         params: {accountID, validateCode, exitTo},
     },
-    session,
-}: ValidateLoginPageProps<ValidateLoginPageOnyxProps>) {
+}: ValidateLoginPageProps) {
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+
     const login = credentials?.login;
-    const autoAuthState = session?.autoAuthState ?? CONST.AUTO_AUTH_STATE.NOT_STARTED;
     const isSignedIn = !!session?.authToken && session?.authTokenType !== CONST.AUTH_TOKEN_TYPES.ANONYMOUS;
+    // To ensure that the previous autoAuthState does not impact the rendering of the current magic link page, the autoAuthState prop sets initWithStoredValues to false.
+    // This is done unless the user is signed in, in which case the page will be remounted upon successful sign-in, as explained in Session.initAutoAuthState.
+    const [autoAuthState] = useOnyx(ONYXKEYS.SESSION, {initWithStoredValues: isSignedIn, selector: (sessionValue) => sessionValue?.autoAuthState});
+    const autoAuthStateWithDefault = autoAuthState ?? CONST.AUTO_AUTH_STATE.NOT_STARTED;
     const is2FARequired = !!account?.requiresTwoFactorAuth;
     const cachedAccountID = credentials?.accountID;
-    const isUserClickedSignIn = !login && isSignedIn && (autoAuthState === CONST.AUTO_AUTH_STATE.SIGNING_IN || autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN);
+    const isUserClickedSignIn = !login && isSignedIn && (autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.SIGNING_IN || autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN);
     const shouldStartSignInWithValidateCode = !isUserClickedSignIn && !isSignedIn && (!!login || !!exitTo);
 
     useEffect(() => {
@@ -35,7 +39,7 @@ function ValidateLoginPage({
             });
             return;
         }
-        Session.initAutoAuthState(autoAuthState);
+        Session.initAutoAuthState(autoAuthStateWithDefault);
 
         if (!shouldStartSignInWithValidateCode) {
             if (exitTo) {
@@ -50,7 +54,7 @@ function ValidateLoginPage({
         // Since on Desktop we don't have multi-tab functionality to handle the login flow,
         // we need to `popToTop` the stack after `signInWithValidateCode` in order to
         // perform login for both 2FA and non-2FA accounts.
-        desktopLoginRedirect(autoAuthState, isSignedIn);
+        desktopLoginRedirect(autoAuthStateWithDefault, isSignedIn);
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
@@ -70,25 +74,21 @@ function ValidateLoginPage({
 
     return (
         <>
-            {autoAuthState === CONST.AUTO_AUTH_STATE.FAILED && <ExpiredValidateCodeModal />}
-            {autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && login && <JustSignedInModal is2FARequired />}
-            {autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && !exitTo && login && <JustSignedInModal is2FARequired={false} />}
+            {autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.FAILED && <ExpiredValidateCodeModal />}
+            {autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && login && <JustSignedInModal is2FARequired />}
+            {autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && !exitTo && login && <JustSignedInModal is2FARequired={false} />}
             {/* If session.autoAuthState isn't available yet, we use shouldStartSignInWithValidateCode to conditionally render the component instead of local autoAuthState which contains a default value of NOT_STARTED */}
-            {(!session?.autoAuthState ? !shouldStartSignInWithValidateCode : autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED) && !exitTo && (
+            {(!autoAuthState ? !shouldStartSignInWithValidateCode : autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.NOT_STARTED) && !exitTo && (
                 <ValidateCodeModal
                     accountID={Number(accountID)}
                     code={validateCode}
                 />
             )}
-            {(!session?.autoAuthState ? shouldStartSignInWithValidateCode : autoAuthState === CONST.AUTO_AUTH_STATE.SIGNING_IN) && <FullScreenLoadingIndicator />}
+            {(!autoAuthState ? shouldStartSignInWithValidateCode : autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.SIGNING_IN) && <FullScreenLoadingIndicator />}
         </>
     );
 }
 
 ValidateLoginPage.displayName = 'ValidateLoginPage';
 
-export default withOnyx<ValidateLoginPageProps<ValidateLoginPageOnyxProps>, ValidateLoginPageOnyxProps>({
-    account: {key: ONYXKEYS.ACCOUNT},
-    credentials: {key: ONYXKEYS.CREDENTIALS},
-    session: {key: ONYXKEYS.SESSION},
-})(ValidateLoginPage);
+export default ValidateLoginPage;
diff --git a/src/pages/ValidateLoginPage/types.ts b/src/pages/ValidateLoginPage/types.ts
@@ -1,22 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {PublicScreensParamList} from '@libs/Navigation/types';
 import type SCREENS from '@src/SCREENS';
-import type {Account, Credentials, Session} from '@src/types/onyx';
 
-type ValidateLoginPageOnyxNativeProps = {
-    /** Session of currently logged in user */
-    session: OnyxEntry<Session>;
-};
+type ValidateLoginPageProps = StackScreenProps<PublicScreensParamList, typeof SCREENS.VALIDATE_LOGIN>;
 
-type ValidateLoginPageOnyxProps = ValidateLoginPageOnyxNativeProps & {
-    /** The details about the account that the user is signing in with */
-    account: OnyxEntry<Account>;
-
-    /** The credentials of the person logging in */
-    credentials: OnyxEntry<Credentials>;
-};
-
-type ValidateLoginPageProps<OnyxProps> = OnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.VALIDATE_LOGIN>;
-
-export type {ValidateLoginPageOnyxNativeProps, ValidateLoginPageOnyxProps, ValidateLoginPageProps};
+export default ValidateLoginPageProps;