Make staging secure endpoint toggle on staging

[marcaaron]

Details

Staging versions of the apps are not able to connect with Plaid test credentials in the native apps because we always use the .env.production credentials there. This change is necessary so that we can ask QA (and internal testers) to test the VBA flow in TestFlight and Google Play store versions of the app.

Fixed Issues

$ #5075

Tests

Tested that the app continued to work normally on dev builds + web. The specific change here is not easy to test locally since the app needs to be a "beta" version. But we can force it by applying this diff:

diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js
index 2a659c3f2..93b36c317 100755
--- a/src/pages/settings/PreferencesPage.js
+++ b/src/pages/settings/PreferencesPage.js
@@ -101,26 +101,26 @@ const PreferencesPage = ({

                     {/* If we are in the staging environment then we have the option to switch from using the staging secure endpoint or the production secure endpoint. This enables QA */}
                     {/* and internal testers to take advantage of sandbox environments for 3rd party services like Plaid and Onfido */}
-                    {environment === CONST.ENVIRONMENT.STAGING && (
-                        <>
-                            <Text style={[styles.formLabel]} numberOfLines={1}>
-                                Test Preferences
-                            </Text>
-                            <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween]}>
-                                <View style={styles.flex4}>
-                                    <Text>
-                                        Use Secure Staging Server
-                                    </Text>
-                                </View>
-                                <View style={[styles.flex1, styles.alignItemsEnd]}>
-                                    <Switch
-                                        isOn={user.shouldUseSecureStaging || false}
-                                        onToggle={setShouldUseSecureStaging}
-                                    />
-                                </View>
+                    {/* {environment === CONST.ENVIRONMENT.STAGING && ( */}
+                    <>
+                        <Text style={[styles.formLabel]} numberOfLines={1}>
+                            Test Preferences
+                        </Text>
+                        <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween]}>
+                            <View style={styles.flex4}>
+                                <Text>
+                                    Use Secure Staging Server
+                                </Text>
+                            </View>
+                            <View style={[styles.flex1, styles.alignItemsEnd]}>
+                                <Switch
+                                    isOn={user.shouldUseSecureStaging || false}
+                                    onToggle={setShouldUseSecureStaging}
+                                />
                             </View>
-                        </>
-                    )}
+                        </View>
+                    </>
+                    {/* )} */}
                 </View>
             </View>
         </ScreenWrapper>

Keep in mind that if you do this then you will effectively be pointing the built app at the staging server and you won't be authenticated. So in order to test this you should also edit your .env to use the production credentials and then verify that the staging secure server is getting hit instead of production when following the rest of QA steps.

QA Steps

1. With the app installed on the device navigate to settings
2. Tap "Preferences"
3. Verify that a new section called "Test Preferences" appears
4. Tap the "Use Secure Staging Server" toggle and verify it changes
5. Navigate back to Settings and then back to preferences and verify the change sticks
6. Navigate to staging.new.expensify.com/bank-account
7. Select the option to log in to bank account
8. Enter the test credentials (bank: Chase user: user_good pass: pass_good)
9. Verify there are no errors and you are able to continue to the next screen with these credentials

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[marcaaron]

Oh hmm actually just realizing that as a side effect of this change anyone using the beta version of the app effectively won't be able to set up a bank account properly. I'm not sure who we allow to access the beta or if this matters.

[marcaaron]

Making this a draft for now so that we can get some feedback on this #5075 (comment)

[marcaaron]

Alright this one's ready now.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @ctkochan22 in version: 1.0.95-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.0.96-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅