Create separate transition pages to sign the user in / out

src/ROUTES.js

@@ -81,7 +81,7 @@ export default {
     getReportDetailsRoute: reportID => `r/${reportID}/details`,
     REPORT_SETTINGS: 'r/:reportID/settings',
     getReportSettingsRoute: reportID => `r/${reportID}/settings`,
-    LOGIN_WITH_SHORT_LIVED_TOKEN: 'transition',
+    TRANSITION: 'transition',
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',
     GET_ASSISTANCE: 'get-assistance/:taskID',
     getGetAssistanceRoute: taskID => `get-assistance/${taskID}`,

src/SCREENS.js

@@ -6,5 +6,5 @@ export default {
     HOME: 'Home',
     LOADING: 'Loading',
     REPORT: 'Report',
-    LOG_IN_WITH_SHORT_LIVED_TOKEN: 'LogInWithShortLivedToken',
+    TRANSITION: 'Transition',
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -30,6 +30,7 @@ import * as Policy from '../../actions/Policy';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
 import createCustomModalStackNavigator from './createCustomModalStackNavigator';
 import * as BankAccounts from '../../actions/BankAccounts';
+import Log from '../../Log';
 
 // Main drawer navigator
 import MainDrawerNavigator from './MainDrawerNavigator';
@@ -38,11 +39,11 @@ import MainDrawerNavigator from './MainDrawerNavigator';
 import * as ModalStackNavigators from './ModalStackNavigators';
 import SCREENS from '../../../SCREENS';
 import Timers from '../../Timers';
-import LogInWithShortLivedTokenPage from '../../../pages/LogInWithShortLivedTokenPage';
 import ValidateLoginPage from '../../../pages/ValidateLoginPage';
 import defaultScreenOptions from './defaultScreenOptions';
 import * as App from '../../actions/App';
 import * as Session from '../../actions/Session';
+import LogOutOldUserPage from '../../../pages/LogOutOldUserPage';
 
 Onyx.connect({
     key: ONYXKEYS.MY_PERSONAL_DETAILS,
@@ -131,12 +132,25 @@ class AuthScreens extends React.Component {
         // Load policies, maybe creating a new policy first.
         Linking.getInitialURL()
             .then((url) => {
-                if (this.shouldCreateFreePolicy(url)) {
+                if (!url) {
+                    return;
+                }
+                const path = new URL(url).pathname;
+                const params = new URLSearchParams(url);
+                const exitTo = params.get('exitTo');
+                const email = params.get('email');
+                const isLoggingInAsNewUser = this.props.session && this.props.session.email !== email;
+                const shouldCreateFreePolicy = !isLoggingInAsNewUser
+                    && Str.startsWith(path, Str.normalizeUrl(ROUTES.TRANSITION))
+                    && exitTo === ROUTES.WORKSPACE_NEW;
+                if (shouldCreateFreePolicy) {
                     Policy.createAndGetPolicyList();
                     return;
                 }
-
                 Policy.getPolicyList();
+                if (!isLoggingInAsNewUser && exitTo) {
+                    this.navigateToExitRoute(exitTo);
+                }
             });
 
         // Refresh the personal details, timezone and betas every 30 minutes
@@ -184,22 +198,17 @@ class AuthScreens extends React.Component {
     }
 
     /**
-     * @param {String} [url]
-     * @returns {Boolean}
+     * Navigate to the transition exit route
+     *
+     * @param {String} exitTo
      */
-    shouldCreateFreePolicy(url = '') {
-        if (!url) {
-            return false;
-        }
-
-        const path = new URL(url).pathname;
-        const params = new URLSearchParams(url);
-        const exitTo = params.get('exitTo');
-        const email = params.get('email');
-        const isLoggingInAsNewUser = !_.isNull(this.props.session.email) && (email !== this.props.session.email);
-        return !isLoggingInAsNewUser
-            && Str.startsWith(path, Str.normalizeUrl(ROUTES.LOGIN_WITH_SHORT_LIVED_TOKEN))
-            && exitTo === ROUTES.WORKSPACE_NEW;
+    navigateToExitRoute(exitTo) {
+        // In order to navigate to a modal, we first have to dismiss the current modal. Without dismissing the current modal, if the user cancels out of the workspace modal,
+        // then they will be routed back to /transition/<accountID>/<email>/<authToken>/workspace/<policyID>/card and we don't want that. We want them to go back to `/`
+        // and by calling dismissModal(), the /transition/... route is removed from history so the user will get taken to `/` if they cancel out of the new workspace modal.
+        Log.info('[AuthScreens] Dismissing LogOutOldUserPage and navigating to the transition exit route');
+        Navigation.dismissModal();
+        Navigation.navigate(exitTo);
     }
 
     render() {
@@ -257,9 +266,9 @@ class AuthScreens extends React.Component {
                     component={ValidateLoginPage}
                 />
                 <RootStack.Screen
-                    name={SCREENS.LOG_IN_WITH_SHORT_LIVED_TOKEN}
+                    name={SCREENS.TRANSITION}
                     options={defaultScreenOptions}
-                    component={LogInWithShortLivedTokenPage}
+                    component={LogOutOldUserPage}
                 />
 
                 {/* These are the various modal routes */}

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -17,7 +17,7 @@ const PublicScreens = () => (
             component={SignInPage}
         />
         <RootStack.Screen
-            name={SCREENS.LOG_IN_WITH_SHORT_LIVED_TOKEN}
+            name={SCREENS.TRANSITION}
             options={defaultScreenOptions}
             component={LogInWithShortLivedTokenPage}
         />

src/libs/Navigation/linkingConfig.js

@@ -27,7 +27,7 @@ export default {
             // Main Routes
             SetPassword: ROUTES.SET_PASSWORD_WITH_VALIDATE_CODE,
             ValidateLogin: ROUTES.VALIDATE_LOGIN,
-            [SCREENS.LOG_IN_WITH_SHORT_LIVED_TOKEN]: ROUTES.LOGIN_WITH_SHORT_LIVED_TOKEN,
+            [SCREENS.TRANSITION]: ROUTES.TRANSITION,
 
             // Modal Screens
             Settings: {

src/libs/actions/Session/index.js

@@ -255,19 +255,14 @@ function signIn(password, twoFactorAuthCode) {
 /**
  * Uses a short lived authToken to continue a user's session from OldDot
  *
- * @param {String} accountID
  * @param {String} email
  * @param {String} shortLivedToken
  * @param {String} exitTo
  */
-function signInWithShortLivedToken(accountID, email, shortLivedToken) {
+function signInWithShortLivedToken(email, shortLivedToken) {
     Onyx.merge(ONYXKEYS.ACCOUNT, {...CONST.DEFAULT_ACCOUNT_DATA, loading: true});
 
     createTemporaryLogin(shortLivedToken, email).then((response) => {
-        Onyx.merge(ONYXKEYS.SESSION, {
-            accountID,
-            email,
-        });
         if (response.jsonCode === 200) {
             User.getUserDetails();
             Onyx.merge(ONYXKEYS.ACCOUNT, {success: true});

src/pages/LogInWithShortLivedTokenPage.js

@@ -1,12 +1,8 @@
 import React, {Component} from 'react';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
-import ROUTES from '../ROUTES';
-import ONYXKEYS from '../ONYXKEYS';
 import * as Session from '../libs/actions/Session';
 import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
-import Navigation from '../libs/Navigation/Navigation';
 import Log from '../libs/Log';
 
 const propTypes = {
@@ -30,76 +26,20 @@ const propTypes = {
             exitTo: PropTypes.string,
         }),
     }),
-
-    /** The data about the current session which will be set once the user is authenticated and we return to this component as an AuthScreen */
-    session: PropTypes.shape({
-        /** The authToken for the current session */
-        authToken: PropTypes.string,
-
-        /** The authToken for the current session */
-        email: PropTypes.string,
-    }),
 };
 
 const defaultProps = {
     route: {
         params: {},
     },
-    session: {},
 };
 
 class LogInWithShortLivedTokenPage extends Component {
     componentDidMount() {
-        const accountID = lodashGet(this.props.route.params, 'accountID', '');
         const email = lodashGet(this.props.route.params, 'email', '');
         const shortLivedToken = lodashGet(this.props.route.params, 'shortLivedToken', '');
-
-        const isUserSignedIn = this.props.session && this.props.session.authToken;
-        if (!isUserSignedIn) {
-            Log.info('[LoginWithShortLivedTokenPage] User not signed in - signing in with short lived token');
-            Session.signInWithShortLivedToken(accountID, email, shortLivedToken);
-            return;
-        }
-
-        if (this.signOutIfNeeded(email)) {
-            return;
-        }
-
-        Log.info('[LoginWithShortLivedTokenPage] User is signed in');
-
-        // exitTo is URI encoded because it could contain a variable number of slashes (i.e. "workspace/new" vs "workspace/<ID>/card")
-        const exitTo = decodeURIComponent(lodashGet(this.props.route.params, 'exitTo', ''));
-        if (exitTo === ROUTES.WORKSPACE_NEW) {
-            // New workspace creation is handled in AuthScreens, not in its own screen
-            Log.info('[LoginWithShortLivedTokenPage] exitTo is workspace/new - handling new workspace creation in AuthScreens');
-            return;
-        }
-
-        // In order to navigate to a modal, we first have to dismiss the current modal. Without dismissing the current modal, if the user cancels out of the workspace modal,
-        // then they will be routed back to /transition/<accountID>/<email>/<authToken>/workspace/<policyID>/card and we don't want that. We want them to go back to `/`
-        // and by calling dismissModal(), the /transition/... route is removed from history so the user will get taken to `/` if they cancel out of the new workspace modal.
-        Log.info('[LoginWithShortLivedTokenPage] Dismissing LoginWithShortLivedTokenPage and navigating to exitTo');
-        Navigation.dismissModal();
-        Navigation.navigate(exitTo);
-    }
-
-    /**
-     * If the user is trying to transition with a different account than the one
-     * they are currently signed in as we will sign them out, clear Onyx,
-     * and cancel all network requests. This component will mount again from
-     * PublicScreens and since they are no longer signed in, a request will be
-     * made to sign them in with their new account.
-     * @param {String} email The user's email passed as a route param.
-     * @returns {Boolean}
-     */
-    signOutIfNeeded(email) {
-        if (this.props.session && this.props.session.email === email) {
-            return false;
-        }
-
-        Log.info('[LoginWithShortLivedTokenPage] Different user signed in - signing out');
-        Session.signOutAndRedirectToSignIn();
-        return true;
+        Log.info('[LoginWithShortLivedTokenPage] signing in the transitioning user');
+        Session.signInWithShortLivedToken(email, shortLivedToken);
     }
 
     render() {
@@ -110,8 +50,4 @@ class LogInWithShortLivedTokenPage extends Component {
 LogInWithShortLivedTokenPage.propTypes = propTypes;
 LogInWithShortLivedTokenPage.defaultProps = defaultProps;
 
-export default withOnyx({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(LogInWithShortLivedTokenPage);
+export default LogInWithShortLivedTokenPage;

src/pages/LogOutOldUserPage.js

@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
+import * as Session from '../libs/actions/Session';
+import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
+import Log from '../libs/Log';
+
+const propTypes = {
+    /** The parameters needed to authenticate with a short lived token are in the URL */
+    route: PropTypes.shape({
+        /** The name of the route */
+        name: PropTypes.string,
+
+        /** Unique key associated with the route */
+        key: PropTypes.string,
+
+        /** Each parameter passed via the URL */
+        params: PropTypes.shape({
+            /** AccountID associated with the validation link */
+            accountID: PropTypes.string,
+
+            /** Short lived token */
+            shortLivedToken: PropTypes.string,
+
+            /** URL to exit to */
+            exitTo: PropTypes.string,
+        }),
+    }),
+
+    /** The data about the current session which will be set once the user is authenticated and we return to this component as an AuthScreen */
+    session: PropTypes.shape({
+        /** The authToken for the current session */
+        authToken: PropTypes.string,
+
+        /** The authToken for the current session */
+        email: PropTypes.string,
+    }),
+};
+
+const defaultProps = {
+    route: {
+        params: {},
+    },
+    session: {},
+};
+
+class LogOutOldUserPage extends Component {
+    componentDidMount() {
+        const email = lodashGet(this.props.route.params, 'email', '');
+        if (this.props.session && this.props.session.email !== email) {
+            Log.info('[LogOutOldUserPage] Different user signed in - signing out');
+            Session.signOutAndRedirectToSignIn();
+        }
+    }
+
+    render() {
+        return <FullScreenLoadingIndicator />;
+    }
+}
+
+LogOutOldUserPage.propTypes = propTypes;
+LogOutOldUserPage.defaultProps = defaultProps;
+
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(LogOutOldUserPage);

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -5,12 +5,10 @@ import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Log from '../../libs/Log';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
 import ReimbursementAccountLoadingIndicator from '../../components/ReimbursementAccountLoadingIndicator';
-import Permissions from '../../libs/Permissions';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -33,9 +31,6 @@ import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
 import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal';
 
 const propTypes = {
-    /** List of betas */
-    betas: PropTypes.arrayOf(PropTypes.string).isRequired,
-
     /** ACH data for the withdrawal account actively being set up */
     reimbursementAccount: reimbursementAccountPropTypes,
 
@@ -145,12 +140,6 @@ class ReimbursementAccountPage extends React.Component {
     }
 
     render() {
-        if (!Permissions.canUseFreePlan(this.props.betas)) {
-            Log.info('Not showing new bank account page because user is not on free plan beta');
-            Navigation.dismissModal();
-            return null;
-        }
-
         // The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
         // user left off. This view will refer to the achData as the single source of truth to determine which route to
         // display. We can also specify a specific route to navigate to via route params when the component first
@@ -250,9 +239,6 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         plaidLinkToken: {
             key: ONYXKEYS.PLAID_LINK_TOKEN,
         },