clean up the deep link code

src/ONYXKEYS.js

@@ -194,7 +194,4 @@ export default {
 
     // Is app in beta version
     IS_BETA: 'isBeta',
-
-    // Whether the auth token is valid
-    IS_TOKEN_VALID: 'isTokenValid',
 };

src/components/DeeplinkWrapper/index.website.js

@@ -7,7 +7,7 @@ import CONST from '../../CONST';
 import CONFIG from '../../CONFIG';
 import * as Browser from '../../libs/Browser';
 import ONYXKEYS from '../../ONYXKEYS';
-import * as Authentication from '../../libs/Authentication';
+import * as Session from '../../libs/actions/Session';
 
 const propTypes = {
     /** Children to render. */
@@ -21,13 +21,17 @@ const propTypes = {
 
         /** Currently logged-in user authToken */
         authToken: PropTypes.string,
+
+        /** The short-lived auth token for navigating to desktop app */
+        shortLivedAuthToken: PropTypes.string,
     }),
 };
 
 const defaultProps = {
     session: {
         email: '',
         authToken: '',
+        shortLivedAuthToken: '',
     },
 };
 
@@ -36,53 +40,48 @@ class DeeplinkWrapper extends PureComponent {
         super(props);
 
         this.state = {
-            appInstallationCheckStatus: (this.isMacOSWeb() && CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV)
-                ? CONST.DESKTOP_DEEPLINK_APP_STATE.CHECKING : CONST.DESKTOP_DEEPLINK_APP_STATE.NOT_INSTALLED,
+            isShortLivedAuthTokenLoading: this.isMacOSWeb() && CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV,
         };
-        this.focused = true;
     }
 
     componentDidMount() {
         if (!this.isMacOSWeb() || CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
             return;
         }
 
-        window.addEventListener('blur', () => {
-            this.focused = false;
-        });
+        // We need to clear the old short-lived auth token if it exists.
+        Session.removeShortLivedAuthToken();
 
-        const expensifyUrl = new URL(CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL);
-        const params = new URLSearchParams();
-        params.set('exitTo', `${window.location.pathname}${window.location.search}${window.location.hash}`);
         if (!this.props.session.authToken) {
-            const expensifyDeeplinkUrl = `${CONST.DEEPLINK_BASE_URL}${expensifyUrl.host}/transition?${params.toString()}`;
-            this.openRouteInDesktopApp(expensifyDeeplinkUrl);
+            this.openRouteInDesktopApp();
             return;
         }
-        Authentication.getShortLivedAuthToken().then((shortLivedAuthToken) => {
-            params.set('email', this.props.session.email);
-            params.set('shortLivedAuthToken', `${shortLivedAuthToken}`);
-            const expensifyDeeplinkUrl = `${CONST.DEEPLINK_BASE_URL}${expensifyUrl.host}/transition?${params.toString()}`;
-            this.openRouteInDesktopApp(expensifyDeeplinkUrl);
-        }).catch(() => {
-            // If the request is successful, we call the updateAppInstallationCheckStatus before the prompt pops up.
-            // If not, we only need to make sure that the state will be updated.
-            this.updateAppInstallationCheckStatus();
-        });
+        Session.getShortLivedAuthToken();
     }
 
-    updateAppInstallationCheckStatus() {
-        setTimeout(() => {
-            if (!this.focused) {
-                this.setState({appInstallationCheckStatus: CONST.DESKTOP_DEEPLINK_APP_STATE.INSTALLED});
-            } else {
-                this.setState({appInstallationCheckStatus: CONST.DESKTOP_DEEPLINK_APP_STATE.NOT_INSTALLED});
-            }
-        }, 500);
+    componentDidUpdate(prevProps) {
+        if (prevProps.session.shortLivedAuthToken || !this.props.session.shortLivedAuthToken) {
+            return;
+        }
+
+        // Now that there is a shortLivedAuthToken, the route to the desktop app can be opened.
+        this.openRouteInDesktopApp();
     }
 
-    openRouteInDesktopApp(expensifyDeeplinkUrl) {
-        this.updateAppInstallationCheckStatus();
+    openRouteInDesktopApp() {
+        this.setState({
+            isShortLivedAuthTokenLoading: false,
+        });
+
+        const params = new URLSearchParams();
+        params.set('exitTo', `${window.location.pathname}${window.location.search}${window.location.hash}`);
+        const session = this.props.session;
+        if (session.email && session.shortLivedAuthToken) {
+            params.set('email', session.email);
+            params.set('shortLivedAuthToken', session.shortLivedAuthToken);
+        }
+        const expensifyUrl = new URL(CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL);
+        const expensifyDeeplinkUrl = `${CONST.DEEPLINK_BASE_URL}${expensifyUrl.host}/transition?${params.toString()}`;
 
         // This check is necessary for Safari, otherwise, if the user
         // does NOT have the Expensify desktop app installed, it's gonna
@@ -101,9 +100,8 @@ class DeeplinkWrapper extends PureComponent {
                 if (!iframe.parentNode) {
                     return;
                 }
-
                 iframe.parentNode.removeChild(iframe);
-            }, 100);
+            }, 0);
         } else {
             window.location.href = expensifyDeeplinkUrl;
         }
@@ -119,10 +117,9 @@ class DeeplinkWrapper extends PureComponent {
     }
 
     render() {
-        if (this.state.appInstallationCheckStatus === CONST.DESKTOP_DEEPLINK_APP_STATE.CHECKING) {
+        if (this.state.isShortLivedAuthTokenLoading) {
             return <FullScreenLoadingIndicator style={styles.flex1} />;
         }
-
         return this.props.children;
     }
 }

src/libs/Authentication.js

@@ -105,17 +105,7 @@ function reauthenticate(command = '') {
         });
 }
 
-function getShortLivedAuthToken() {
-    return Network.post('OpenOldDotLink', {shouldRetry: false}).then((response) => {
-        if (response && response.shortLivedAuthToken) {
-            return Promise.resolve(response.shortLivedAuthToken);
-        }
-        return Promise.reject();
-    });
-}
-
 export {
     reauthenticate,
     Authenticate,
-    getShortLivedAuthToken,
 };

src/libs/actions/Session/index.js

@@ -241,11 +241,6 @@ function signInWithShortLivedAuthToken(email, authToken) {
                 isLoading: true,
             },
         },
-        {
-            onyxMethod: CONST.ONYX.METHOD.MERGE,
-            key: ONYXKEYS.IS_TOKEN_VALID,
-            value: true,
-        },
     ];
 
     const successData = [
@@ -266,29 +261,13 @@ function signInWithShortLivedAuthToken(email, authToken) {
                 isLoading: false,
             },
         },
-        {
-            onyxMethod: CONST.ONYX.METHOD.MERGE,
-            key: ONYXKEYS.IS_TOKEN_VALID,
-            value: false,
-        },
     ];
 
     // If the user is signing in with a different account from the current app, should not pass the auto-generated login as it may be tied to the old account.
     // scene 1: the user is transitioning to newDot from a different account on oldDot.
     // scene 2: the user is transitioning to desktop app from a different account on web app.
     const oldPartnerUserID = credentials.login === email ? credentials.autoGeneratedLogin : '';
-    // eslint-disable-next-line rulesdir/no-api-side-effects-method
-    API.makeRequestWithSideEffects(
-        'SignInWithShortLivedAuthToken',
-        {authToken, oldPartnerUserID},
-        {optimisticData, successData, failureData},
-        null,
-    ).then((response) => {
-        if (response) {
-            return;
-        }
-        Navigation.navigate();
-    });
+    API.read('SignInWithShortLivedAuthToken', {authToken, oldPartnerUserID, shouldRetry: false}, {optimisticData, successData, failureData});
 }
 
 /**
@@ -642,6 +621,23 @@ function authenticatePusher(socketID, channelName, callback) {
     });
 }
 
+function getShortLivedAuthToken() {
+    // TODO: If we have any way to read the shortLivedAuthToken and save it, we can also no longer call makeRequestWithSideEffects.
+    // eslint-disable-next-line rulesdir/no-api-side-effects-method
+    API.makeRequestWithSideEffects(
+        'OpenOldDotLink', {shouldRetry: false}, {},
+    ).then((response) => {
+        const {shortLivedAuthToken} = response;
+        Onyx.merge(ONYXKEYS.SESSION, {shortLivedAuthToken});
+    });
+}
+
+function removeShortLivedAuthToken() {
+    Onyx.merge(ONYXKEYS.SESSION, {
+        shortLivedAuthToken: '',
+    });
+}
+
 export {
     beginSignIn,
     updatePasswordAndSignin,
@@ -664,4 +660,6 @@ export {
     reauthenticatePusher,
     invalidateCredentials,
     invalidateAuthToken,
+    getShortLivedAuthToken,
+    removeShortLivedAuthToken,
 };

src/pages/LogInWithShortLivedAuthTokenPage.js

@@ -16,6 +16,7 @@ import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 import TextLink from '../components/TextLink';
 import ONYXKEYS from '../ONYXKEYS';
+import networkPropTypes from '../components/networkPropTypes';
 
 const propTypes = {
     /** The parameters needed to authenticate with a short lived token are in the URL */
@@ -35,12 +36,23 @@ const propTypes = {
 
     ...withLocalizePropTypes,
 
-    /** Whether the short lived auth token is valid */
-    isTokenValid: PropTypes.bool,
+    /** The details about the account that the user is signing in with */
+    account: PropTypes.shape({
+        /** Whether a sign is loading */
+        isLoading: PropTypes.bool,
+    }),
+
+    /** Props to detect online status */
+    network: networkPropTypes,
 };
 
 const defaultProps = {
-    isTokenValid: true,
+    account: {
+        isLoading: false,
+    },
+    network: {
+        isOffline: false,
+    },
 };
 
 class LogInWithShortLivedAuthTokenPage extends Component {
@@ -62,7 +74,12 @@ class LogInWithShortLivedAuthTokenPage extends Component {
     }
 
     render() {
-        if (this.props.isTokenValid) {
+        // redirect the user to the login page if there is a sudden disconnection
+        if (this.props.network.isOffline) {
+            Navigation.navigate();
+            return;
+        }
+        if (this.props.account.isLoading) {
             return <FullScreenLoadingIndicator />;
         }
         return (
@@ -107,6 +124,7 @@ LogInWithShortLivedAuthTokenPage.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withOnyx({
-        isTokenValid: {key: ONYXKEYS.IS_TOKEN_VALID},
+        account: {key: ONYXKEYS.ACCOUNT},
+        network: {key: ONYXKEYS.NETWORK},
     }),
 )(LogInWithShortLivedAuthTokenPage);