[HybridApp] Implement POC of NewDot SignIn on HybridApp

src/Expensify.tsx

@@ -96,6 +96,7 @@ function Expensify() {
     const [screenShareRequest] = useOnyx(ONYXKEYS.SCREEN_SHARE_REQUEST);
     const [focusModeNotification] = useOnyx(ONYXKEYS.FOCUS_MODE_NOTIFICATION, {initWithStoredValues: false});
     const [lastVisitedPath] = useOnyx(ONYXKEYS.LAST_VISITED_PATH);
+    const [useNewDotSignInPage] = useOnyx(ONYXKEYS.USE_NEWDOT_SIGN_IN_PAGE);
 
     useEffect(() => {
         if (!account?.needsTwoFactorAuthSetup || account.requiresTwoFactorAuth) {
@@ -119,7 +120,9 @@ function Expensify() {
     const shouldInit = isNavigationReady && hasAttemptedToOpenPublicRoom;
     const shouldHideSplash =
         shouldInit &&
-        (NativeModules.HybridAppModule ? splashScreenState === CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN && isAuthenticated : splashScreenState === CONST.BOOT_SPLASH_STATE.VISIBLE);
+        (NativeModules.HybridAppModule
+            ? splashScreenState === CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN && (isAuthenticated || useNewDotSignInPage)
+            : splashScreenState === CONST.BOOT_SPLASH_STATE.VISIBLE);
 
     const initializeClient = () => {
         if (!Visibility.isVisible()) {

src/ONYXKEYS.ts

@@ -448,6 +448,11 @@ const ONYXKEYS = {
     /** Company cards custom names */
     NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES: 'nvp_expensify_ccCustomNames',
 
+    /** Stores the information if HybridApp uses NewDot's sign in flow */
+    USE_NEWDOT_SIGN_IN_PAGE: 'useNewDotSignInPage',
+
+    HYBRID_APP: 'hybridApp',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -1012,6 +1017,8 @@ type OnyxValuesMapping = {
     [ONYXKEYS.IS_USING_IMPORTED_STATE]: boolean;
     [ONYXKEYS.SHOULD_SHOW_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
     [ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES]: Record<string, string>;
+    [ONYXKEYS.USE_NEWDOT_SIGN_IN_PAGE]: boolean;
+    [ONYXKEYS.HYBRID_APP]: OnyxTypes.HybridApp;
 };
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;
 

src/components/InitialURLContextProvider.tsx

@@ -31,9 +31,10 @@ function InitialURLContextProvider({children, url}: InitialURLContextProviderPro
 
     useEffect(() => {
         if (url) {
-            const route = signInAfterTransitionFromOldDot(url);
-            setInitialURL(route);
-            setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
+            signInAfterTransitionFromOldDot(url).then((route) => {
+                setInitialURL(route);
+                setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
+            });
             return;
         }
         Linking.getInitialURL().then((initURL) => {

src/libs/Navigation/AppNavigator/PublicScreens.tsx

@@ -1,9 +1,7 @@
 import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
-import {NativeModules} from 'react-native';
 import type {PublicScreensParamList} from '@navigation/types';
 import ConnectionCompletePage from '@pages/ConnectionCompletePage';
-import SessionExpiredPage from '@pages/ErrorPage/SessionExpiredPage';
 import LogInWithShortLivedAuthTokenPage from '@pages/LogInWithShortLivedAuthTokenPage';
 import AppleSignInDesktopPage from '@pages/signin/AppleSignInDesktopPage';
 import GoogleSignInDesktopPage from '@pages/signin/GoogleSignInDesktopPage';
@@ -24,7 +22,7 @@ function PublicScreens() {
             <RootStack.Screen
                 name={NAVIGATORS.BOTTOM_TAB_NAVIGATOR}
                 options={defaultScreenOptions}
-                component={NativeModules.HybridAppModule ? SessionExpiredPage : SignInPage}
+                component={SignInPage}
             />
             <RootStack.Screen
                 name={SCREENS.TRANSITION_BETWEEN_APPS}

src/libs/Navigation/AppNavigator/index.native.tsx

@@ -1,7 +1,9 @@
-import React, {memo, useContext, useEffect} from 'react';
+import React, {memo, useContext, useEffect, useMemo} from 'react';
 import {NativeModules} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import {InitialURLContext} from '@components/InitialURLContextProvider';
 import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
 
 type AppNavigatorProps = {
@@ -11,19 +13,28 @@ type AppNavigatorProps = {
 
 function AppNavigator({authenticated}: AppNavigatorProps) {
     const {initialURL, setInitialURL} = useContext(InitialURLContext);
+    const [useNewDotLoginPage] = useOnyx(ONYXKEYS.USE_NEWDOT_SIGN_IN_PAGE);
+
+    const shouldShowAuthScreens = useMemo(() => {
+        if (!NativeModules.HybridAppModule) {
+            return authenticated;
+        }
+
+        return useNewDotLoginPage === false && authenticated;
+    }, [authenticated, useNewDotLoginPage]);
 
     useEffect(() => {
-        if (!NativeModules.HybridAppModule || !initialURL) {
+        if (!NativeModules.HybridAppModule || !initialURL || !shouldShowAuthScreens) {
             return;
         }
 
         Navigation.isNavigationReady().then(() => {
             Navigation.navigate(Navigation.parseHybridAppUrl(initialURL));
             setInitialURL(undefined);
         });
-    }, [initialURL, setInitialURL]);
+    }, [initialURL, setInitialURL, shouldShowAuthScreens]);
 
-    if (authenticated) {
+    if (shouldShowAuthScreens) {
         const AuthScreens = require<ReactComponentModule>('./AuthScreens').default;
 
         // These are the protected screens and only accessible when an authToken is present

src/libs/actions/Session/index.ts

@@ -209,8 +209,7 @@ function signOutAndRedirectToSignIn(shouldResetToHome?: boolean, shouldStashSess
     if (!isAnonymousUser()) {
         // In the HybridApp, we want the Old Dot to handle the sign out process
         if (NativeModules.HybridAppModule && killHybridApp) {
-            NativeModules.HybridAppModule.closeReactNativeApp(true, false);
-            return;
+            NativeModules.HybridAppModule.signOutFromOldDot();
         }
         // We'll only call signOut if we're not stashing the session and this is not a supportal session,
         // otherwise we'll call the API to invalidate the autogenerated credentials used for infinite
@@ -482,29 +481,51 @@ function signUpUser() {
 
 function signInAfterTransitionFromOldDot(transitionURL: string) {
     const [route, queryParams] = transitionURL.split('?');
+    const queryParamsObject = queryParams
+        ? Object.fromEntries(
+              queryParams.split('&').map((param) => {
+                  const [key, value] = param.split('=');
+                  return [key, value];
+              }),
+          )
+        : {};
+
+    const {useNewDotSignInPage, isSingleNewDotEntry} = queryParamsObject;
+
+    const clearOnyxBeforeSignIn = () => {
+        if (useNewDotSignInPage !== 'true') {
+            return Promise.resolve();
+        }
 
-    const {email, authToken, encryptedAuthToken, accountID, autoGeneratedLogin, autoGeneratedPassword, clearOnyxOnStart, completedHybridAppOnboarding} = Object.fromEntries(
-        queryParams.split('&').map((param) => {
-            const [key, value] = param.split('=');
-            return [key, value];
-        }),
-    );
-
-    const setSessionDataAndOpenApp = () => {
-        Onyx.multiSet({
-            [ONYXKEYS.SESSION]: {email, authToken, encryptedAuthToken: decodeURIComponent(encryptedAuthToken), accountID: Number(accountID)},
-            [ONYXKEYS.CREDENTIALS]: {autoGeneratedLogin, autoGeneratedPassword},
-            [ONYXKEYS.NVP_TRYNEWDOT]: {classicRedirect: {completedHybridAppOnboarding: completedHybridAppOnboarding === 'true'}},
-        }).then(App.openApp);
+        return Onyx.clear();
     };
 
-    if (clearOnyxOnStart === 'true') {
-        Onyx.clear(KEYS_TO_PRESERVE).then(setSessionDataAndOpenApp);
-    } else {
-        setSessionDataAndOpenApp();
-    }
+    const initAppAfterTransition = () => {
+        if (useNewDotSignInPage === 'true') {
+            return Promise.resolve();
+        }
+
+        return App.openApp();
+    };
+
+    const setSessionDataAndOpenApp = new Promise<Route>((resolve) => {
+        clearOnyxBeforeSignIn()
+            .then(() =>
+                Onyx.multiSet({
+                    [ONYXKEYS.USE_NEWDOT_SIGN_IN_PAGE]: useNewDotSignInPage === 'true',
+                    [ONYXKEYS.NVP_TRYNEWDOT]: {classicRedirect: {dismissed: 'true'}}, // This data is mocked and should be returned by BeginSignUp/SignInUser API commands
+                }),
+            )
+            .then(initAppAfterTransition)
+            .catch((error) => {
+                Log.hmmm('[HybridApp] Initialization of HybridApp has failed. Forcing transition', {error});
+            })
+            .finally(() => {
+                resolve(`${route}?singleNewDotEntry=${isSingleNewDotEntry}` as Route);
+            });
+    });
 
-    return route as Route;
+    return setSessionDataAndOpenApp;
 }
 
 /**

src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -1,7 +1,7 @@
 import {useIsFocused} from '@react-navigation/native';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
-import {View} from 'react-native';
+import {NativeModules, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import SafariFormWrapper from '@components/Form/SafariFormWrapper';
@@ -30,6 +30,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import type ValidateCodeFormProps from './types';
 
 type BaseValidateCodeFormProps = WithToggleVisibilityViewProps &
@@ -61,6 +62,7 @@ function BaseValidateCodeForm({autoComplete, isUsingRecoveryCode, setIsUsingReco
     const [timeRemaining, setTimeRemaining] = useState(CONST.REQUEST_CODE_DELAY as number);
     const [recoveryCode, setRecoveryCode] = useState('');
     const [needToClearError, setNeedToClearError] = useState<boolean>(!!account?.errors);
+    const [tryNewDot, tryNewDotMetadata] = useOnyx(ONYXKEYS.NVP_TRYNEWDOT);
 
     const prevRequiresTwoFactorAuth = usePrevious(account?.requiresTwoFactorAuth);
     const prevValidateCode = usePrevious(credentials?.validateCode);
@@ -74,6 +76,30 @@ function BaseValidateCodeForm({autoComplete, isUsingRecoveryCode, setIsUsingReco
     const shouldDisableResendValidateCode = isOffline ?? account?.isLoading;
     const isValidateCodeFormSubmitting = AccountUtils.isValidateCodeFormSubmitting(account);
 
+    const isLoading = useMemo(() => {
+        if (!NativeModules.HybridAppModule || !session?.authToken) {
+            return isValidateCodeFormSubmitting;
+        }
+
+        if (isLoadingOnyxValue(tryNewDotMetadata)) {
+            return true;
+        }
+
+        return (tryNewDot?.classicRedirect.dismissed === true || tryNewDot?.classicRedirect.dismissed === 'true') && !!session.authToken;
+    }, [isValidateCodeFormSubmitting, session?.authToken, tryNewDot, tryNewDotMetadata]);
+
+    useEffect(() => {
+        if (!NativeModules.HybridAppModule || isValidateCodeFormSubmitting || !session?.authToken) {
+            return;
+        }
+
+        if (tryNewDot?.classicRedirect.dismissed === true || tryNewDot?.classicRedirect.dismissed === 'true') {
+            if (credentials?.autoGeneratedLogin && credentials?.autoGeneratedPassword) {
+                NativeModules.HybridAppModule.signInToOldDot(credentials?.autoGeneratedLogin, credentials?.autoGeneratedPassword);
+            }
+        }
+    }, [credentials?.autoGeneratedLogin, credentials?.autoGeneratedPassword, isValidateCodeFormSubmitting, session?.authToken, tryNewDot?.classicRedirect.dismissed]);
+
     useEffect(() => {
         if (!(inputValidateCodeRef.current && hasError && (session?.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED || account?.isLoading))) {
             return;
@@ -335,7 +361,7 @@ function BaseValidateCodeForm({autoComplete, isUsingRecoveryCode, setIsUsingReco
                         style={[styles.mt2]}
                         onPress={switchBetween2faAndRecoveryCode}
                         hoverDimmingValue={1}
-                        disabled={isValidateCodeFormSubmitting}
+                        disabled={isLoading}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={isUsingRecoveryCode ? translate('recoveryCodeForm.use2fa') : translate('recoveryCodeForm.useRecoveryCode')}
                     >
@@ -394,7 +420,7 @@ function BaseValidateCodeForm({autoComplete, isUsingRecoveryCode, setIsUsingReco
                     large
                     style={[styles.mv3]}
                     text={translate('common.signIn')}
-                    isLoading={isValidateCodeFormSubmitting}
+                    isLoading={isLoading}
                     onPress={validateAndSubmitForm}
                 />
                 <ChangeExpensifyLoginLink onPress={clearSignInData} />

src/types/modules/react-native.d.ts

@@ -8,6 +8,8 @@ import type StartupTimer from '@libs/StartupTimer/types';
 type HybridAppModule = {
     closeReactNativeApp: (shouldSignOut: boolean, shouldSetNVP: boolean) => void;
     completeOnboarding: (status: boolean) => void;
+    signInToOldDot: (autoGeneratedLogin: string, autoGeneratedPassword: string) => void;
+    signOutFromOldDot: () => void;
     exitApp: () => void;
 };
 

src/types/onyx/HybridApp.ts

@@ -0,0 +1,7 @@
+/**  */
+type HybridApp = {
+    /**  */
+    isSigningIn?: boolean;
+};
+
+export default HybridApp;

src/types/onyx/index.ts

@@ -24,6 +24,7 @@ import type ExpensifyCardSettings from './ExpensifyCardSettings';
 import type FrequentlyUsedEmoji from './FrequentlyUsedEmoji';
 import type {FundList} from './Fund';
 import type Fund from './Fund';
+import type HybridApp from './HybridApp';
 import type ImportedSpreadsheet from './ImportedSpreadsheet';
 import type IntroSelected from './IntroSelected';
 import type InvitedEmailsToAccountIDs from './InvitedEmailsToAccountIDs';
@@ -235,4 +236,5 @@ export type {
     RecentSearchItem,
     ImportedSpreadsheet,
     ValidateMagicCodeAction,
+    HybridApp,
 };