From 3cf3b5ed161c7d0aa85fc986e5bad0a35e6bbc25 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Wed, 13 Mar 2024 14:56:18 +0000 Subject: [PATCH 1/2] update SSO documentation for dev env --- contributingGuides/APPLE_GOOGLE_SIGNIN.md | 32 ++++++++++++++++------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/contributingGuides/APPLE_GOOGLE_SIGNIN.md b/contributingGuides/APPLE_GOOGLE_SIGNIN.md index 4bb86e31b486..36e8fec2a2b6 100644 --- a/contributingGuides/APPLE_GOOGLE_SIGNIN.md +++ b/contributingGuides/APPLE_GOOGLE_SIGNIN.md @@ -104,20 +104,32 @@ The iOS and Android implementations do not require extra steps to test, aside fr ### Web and desktop -#### Render the web Sign In with Apple button in development +#### Render the web Sign In with Apple / Google SSO buttos in development -The Google Sign In button renders differently in development mode. To prevent confusion +The Apple/Google Sign In button renders differently in development mode. To prevent confusion for developers about a possible regression, we decided to not render third party buttons in development mode. -To show the Apple Sign In button in development mode, you can comment out the following code in the -LoginForm.js file: - -```js -if (CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) { - return; -} -``` +Here's how you can re-enable the SSO buttons in development mode: + +- Remove the condition so that we always render the SSO button components + `CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV && (` + delete this condition ^ + ``` + ( + ``` +- On [this line](https://github.com/Expensify/App/blob/1d6bb1d14cff3dd029868a0a7c8ee14ae78c527b/config/webpack/webpack.dev.js#L49) in `index.webpack.js`, replace `https` with `http` + ``` + server: { + type: 'http', + options: { + ``` +- On [this line](https://github.com/Expensify/App/blob/ed9707a3f0df9e812b50f8345be0a33ea2495ff8/config/webpack/webpack.dev.js#L47) in `index.webpack.js`, replace `host: dev.new.expensify.com` with `localhost` + ``` + port, + host: 'localhost', + server: { + ``` #### Port requirements From 30b9c4967789eab514794c1a20f18c5beae13ac0 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Wed, 13 Mar 2024 15:15:50 +0000 Subject: [PATCH 2/2] merge the two SSO instructions together --- contributingGuides/APPLE_GOOGLE_SIGNIN.md | 113 ++++++++-------------- 1 file changed, 38 insertions(+), 75 deletions(-) diff --git a/contributingGuides/APPLE_GOOGLE_SIGNIN.md b/contributingGuides/APPLE_GOOGLE_SIGNIN.md index 36e8fec2a2b6..5c95dfb60950 100644 --- a/contributingGuides/APPLE_GOOGLE_SIGNIN.md +++ b/contributingGuides/APPLE_GOOGLE_SIGNIN.md @@ -98,39 +98,6 @@ Due to some technical constraints, Apple and Google sign-in may require addition ## Apple -### iOS/Android - -The iOS and Android implementations do not require extra steps to test, aside from signing into an Apple account on the iOS device before being able to use Sign in with Apple. - -### Web and desktop - -#### Render the web Sign In with Apple / Google SSO buttos in development - -The Apple/Google Sign In button renders differently in development mode. To prevent confusion -for developers about a possible regression, we decided to not render third party buttons in -development mode. - -Here's how you can re-enable the SSO buttons in development mode: - -- Remove the condition so that we always render the SSO button components - `CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV && (` - delete this condition ^ - ``` - ( - ``` -- On [this line](https://github.com/Expensify/App/blob/1d6bb1d14cff3dd029868a0a7c8ee14ae78c527b/config/webpack/webpack.dev.js#L49) in `index.webpack.js`, replace `https` with `http` - ``` - server: { - type: 'http', - options: { - ``` -- On [this line](https://github.com/Expensify/App/blob/ed9707a3f0df9e812b50f8345be0a33ea2495ff8/config/webpack/webpack.dev.js#L47) in `index.webpack.js`, replace `host: dev.new.expensify.com` with `localhost` - ``` - port, - host: 'localhost', - server: { - ``` - #### Port requirements The Sign in with Apple process will break after the user signs in if the pop-up process is not started from a page at an HTTPS domain registered with Apple. To fix this, you could make a new configuration with your own HTTPS domain, but then the Apple configuration won't match that of Expensify's backend. @@ -252,53 +219,49 @@ open desktop-build 2. Even with this build, the deep link may not be handled by the correct app, as the development Electron config seems to intercept it sometimes. To manage this, install [SwiftDefaultApps](https://github.com/Lord-Kamina/SwiftDefaultApps), which adds a preference pane that can be used to configure which app should handle deep links. -## Google - -### Web - -#### Render the web Sign In with Google button in Development +### Test the Apple / Google SSO buttons in development environment -The Google Sign In button renders differently in development mode. To prevent confusion +The Apple/Google Sign In button renders differently in development mode. To prevent confusion for developers about a possible regression, we decided to not render third party buttons in development mode. -To show the Google Sign In button in development mode, you can comment out the following code in the -LoginForm.js file: - -```js -if (CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) { - return; -} -``` - -#### Host/Port requirements - -Google allows the web app to be hosted at localhost, but according to the -current Google console configuration for the Expensify client ID, it must be -hosted on port 8082. - -Also note that you'll need to update the webpack.dev.js config to change `host` from `dev.new.expensify.com` to `localhost` and server type from `https` to `http`. The reason for this is that Google Sign In allows localhost, but `dev.new.expensify.com` is not a registered Google Sign In domain. - -```diff -diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js -index e28383eff5..b14f6f34aa 100644 ---- a/config/webpack/webpack.dev.js -+++ b/config/webpack/webpack.dev.js -@@ -44,9 +44,9 @@ module.exports = (env = {}) => - ...proxySettings, - historyApiFallback: true, - port, -- host: 'dev.new.expensify.com', -+ host: 'localhost', - server: { -- type: 'https', -+ type: 'http', - options: { - key: path.join(__dirname, 'key.pem'), - cert: path.join(__dirname, 'certificate.pem'), -``` +Here's how you can re-enable the SSO buttons in development mode: -### Desktop +- Remove this [condition](https://github.com/Expensify/App/blob/c2a718c9100e704c89ad9564301348bc53a49777/src/pages/signin/LoginForm/BaseLoginForm.tsx#L300) so that we always render the SSO button components + ```diff + diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx + index 4286a26033..850f8944ca 100644 + --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx + +++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx + @@ -288,7 +288,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false + // for developers about possible regressions, we won't render buttons in development mode. + // For more information about these differences and how to test in development mode, + // see`Expensify/App/contributingGuides/APPLE_GOOGLE_SIGNIN.md` + - CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV && ( + + ( + + + ...proxySettings, + historyApiFallback: true, + port, + - host: 'dev.new.expensify.com', + + host: 'localhost', + server: { + - type: 'https', + + type: 'http', + options: { + key: path.join(__dirname, 'key.pem'), + cert: path.join(__dirname, 'certificate.pem'), + ``` #### Set Environment to something other than "Development"