From 6de7009bc3f2b7593fe350e30436785a51e5b4d1 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 18 Aug 2020 17:44:34 -0700 Subject: [PATCH 1/6] Check authToken and always redirect somewhere on init --- src/Expensify.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/Expensify.js b/src/Expensify.js index 650abb2a9abf7..2a1c00a845847 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -23,6 +23,8 @@ class Expensify extends Component { super(props); this.recordCurrentRoute = this.recordCurrentRoute.bind(this); + + this.state = {}; } /** @@ -35,13 +37,14 @@ class Expensify extends Component { } render() { + const redirectTo = this.state.redirectTo || (!this.state.authToken && '/signin') || '/'; return ( // TODO: Mobile does not support Beforeunload // {/* If there is ever a property for redirecting, we do the redirect here */} - {this.state && this.state.redirectTo && } + {redirectTo && } @@ -66,4 +69,9 @@ export default WithIon({ ActiveClientManager.init(); }, }, + authToken: { + key: IONKEYS.SESSION, + path: 'authToken', + prefillWithKey: IONKEYS.SESSION, + }, })(Expensify); From d37971742e1c9d61e1131b84dec222f9e28f72a7 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 18 Aug 2020 19:29:17 -0700 Subject: [PATCH 2/6] add comment --- src/Expensify.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Expensify.js b/src/Expensify.js index 2a1c00a845847..b84c11d71470c 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -37,6 +37,11 @@ class Expensify extends Component { } render() { + // Always enforce that re-renders of this component use the react-router Redirect component and at least have a redirectTo value + // that goes somewhere. this.state.redirectTo will only ever be set from elsewhere in the code by Ion and can only happen after the initial render. + // If we have no redirectTo value we'll next look at the authToken since the lack of once indicates that we need to sign in. If we have no redirectTo and we do + // have an authToken then we should just redirect to the root. If we don't do this then an unauthenticated user will fall through to the site root by + // default and they will see things they aren't supposed to see. const redirectTo = this.state.redirectTo || (!this.state.authToken && '/signin') || '/'; return ( From 7541f7e2396e93f71734f5cd2742eb47f936d625 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 18 Aug 2020 20:16:06 -0700 Subject: [PATCH 3/6] add a generic loader to provide time to load the authToken --- src/Expensify.js | 41 +++++++++++++++++++++++++++++------------ src/lib/Router/index.js | 2 +- src/style/StyleSheet.js | 4 ++++ 3 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/Expensify.js b/src/Expensify.js index b84c11d71470c..370266fe262b4 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -1,4 +1,6 @@ import React, {Component} from 'react'; +import {View} from 'react-native'; +import get from 'lodash.get'; // import {Beforeunload} from 'react-beforeunload'; import SignInPage from './page/SignInPage'; @@ -8,6 +10,8 @@ import * as ActiveClientManager from './lib/ActiveClientManager'; import {verifyAuthToken} from './lib/actions/ActionsSession'; import IONKEYS from './IONKEYS'; import WithIon from './components/WithIon'; +import styles from './style/StyleSheet'; + import { Route, Router, @@ -24,7 +28,21 @@ class Expensify extends Component { this.recordCurrentRoute = this.recordCurrentRoute.bind(this); - this.state = {}; + this.state = { + loading: true, + authenticated: false, + }; + } + + componentDidMount() { + // We need to delay initializing the main app so we can check for an authToken and + // redirect to the signin page if we do not have one. Otherwise when the app inits + // we will fall through to the homepage and the user will see a brief flash of the main + // app experience. + Ion.get(IONKEYS.SESSION) + .then((response) => { + this.setState({loading: false, authenticated: Boolean(get(response, 'authToken', false))}); + }); } /** @@ -37,12 +55,16 @@ class Expensify extends Component { } render() { - // Always enforce that re-renders of this component use the react-router Redirect component and at least have a redirectTo value - // that goes somewhere. this.state.redirectTo will only ever be set from elsewhere in the code by Ion and can only happen after the initial render. - // If we have no redirectTo value we'll next look at the authToken since the lack of once indicates that we need to sign in. If we have no redirectTo and we do - // have an authToken then we should just redirect to the root. If we don't do this then an unauthenticated user will fall through to the site root by - // default and they will see things they aren't supposed to see. - const redirectTo = this.state.redirectTo || (!this.state.authToken && '/signin') || '/'; + if (this.state.loading) { + return ( + + ); + } + + // We can only have a redirectTo if this is not the initial render so if we have one we'll + // always navigate to it. If we are not authenticated by this point then we'll force navigate to sign in. + const redirectTo = this.state.redirectTo || (!this.state.authenticated && '/signin'); + return ( // TODO: Mobile does not support Beforeunload @@ -74,9 +96,4 @@ export default WithIon({ ActiveClientManager.init(); }, }, - authToken: { - key: IONKEYS.SESSION, - path: 'authToken', - prefillWithKey: IONKEYS.SESSION, - }, })(Expensify); diff --git a/src/lib/Router/index.js b/src/lib/Router/index.js index 4f2ececdd156e..e1718a11b787a 100644 --- a/src/lib/Router/index.js +++ b/src/lib/Router/index.js @@ -8,7 +8,7 @@ import { Route, Redirect, Switch, - withRouter, + withRouter } from 'react-router-dom'; export { diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index ac4a434fcf835..e8f69dda85360 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -176,6 +176,10 @@ const styles = { padding: 20, }, + genericView: { + backgroundColor: colors.heading, + }, + signInPageInner: { marginLeft: 'auto', marginRight: 'auto', From f4017c9618a7af57b73a1f50944eeb076006708c Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 18 Aug 2020 20:17:13 -0700 Subject: [PATCH 4/6] woops --- src/lib/Router/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/Router/index.native.js b/src/lib/Router/index.native.js index 97a5cde2452ab..d214d4f9ef349 100644 --- a/src/lib/Router/index.native.js +++ b/src/lib/Router/index.native.js @@ -17,5 +17,5 @@ export { Redirect, Router, Switch, - withRouter + withRouter, }; From a770a7517f60bb5e8acd7ef48d6f8d8379b4b104 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 18 Aug 2020 20:32:48 -0700 Subject: [PATCH 5/6] undo these weird changes --- src/lib/Router/index.js | 2 +- src/lib/Router/index.native.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/Router/index.js b/src/lib/Router/index.js index e1718a11b787a..4f2ececdd156e 100644 --- a/src/lib/Router/index.js +++ b/src/lib/Router/index.js @@ -8,7 +8,7 @@ import { Route, Redirect, Switch, - withRouter + withRouter, } from 'react-router-dom'; export { diff --git a/src/lib/Router/index.native.js b/src/lib/Router/index.native.js index d214d4f9ef349..97a5cde2452ab 100644 --- a/src/lib/Router/index.native.js +++ b/src/lib/Router/index.native.js @@ -17,5 +17,5 @@ export { Redirect, Router, Switch, - withRouter, + withRouter }; From 9da16d5580c62c82ccd798930117bc32d16158f5 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 18 Aug 2020 21:05:46 -0700 Subject: [PATCH 6/6] fix exitTo --- src/lib/Network.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/Network.js b/src/lib/Network.js index 4d19ed78d17a4..233b4b61c70e9 100644 --- a/src/lib/Network.js +++ b/src/lib/Network.js @@ -172,7 +172,7 @@ function request(command, data, type = 'post') { }) .then(redirectToSignIn); } - return setSuccessfulSignInData(response, command.exitTo); + return setSuccessfulSignInData(response, data.exitTo); }) .then((response) => { // If Expensify login, it's the users first time signing in and we need to