[SAML NewDot] Add SAML flow for web, mweb, desktop

src/CONFIG.ts

@@ -63,6 +63,7 @@ export default {
         CONCIERGE_URL_PATHNAME: 'concierge/',
         DEVPORTAL_URL_PATHNAME: '_devportal/',
         CONCIERGE_URL: `${expensifyURL}concierge/`,
+        SAML_URL: `${expensifyURL}authentication/saml/login`,
     },
     IS_IN_PRODUCTION: Platform.OS === 'web' ? process.env.NODE_ENV === 'production' : !__DEV__,
     IS_IN_STAGING: ENVIRONMENT === CONST.ENVIRONMENT.STAGING,

src/CONST.ts

@@ -240,6 +240,7 @@ const CONST = {
         CUSTOM_STATUS: 'customStatus',
         NEW_DOT_CATEGORIES: 'newDotCategories',
         NEW_DOT_TAGS: 'newDotTags',
+        NEW_DOT_SAML: 'newDotSAML'
     },
     BUTTON_STATES: {
         DEFAULT: 'default',

src/ROUTES.ts

@@ -37,6 +37,8 @@ export default {
     APPLE_SIGN_IN: 'sign-in-with-apple',
     GOOGLE_SIGN_IN: 'sign-in-with-google',
     DESKTOP_SIGN_IN_REDIRECT: 'desktop-signin-redirect',
+    SAML_SIGN_IN: 'sign-in-with-saml',
+
     // This is a special validation URL that will take the user to /workspace/new after validation. This is used
     // when linking users from e.com in order to share a session in this app.
     ENABLE_PAYMENTS: 'enable-payments',

src/SCREENS.ts

@@ -24,4 +24,5 @@ export default {
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
     DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect',
+    SAML_SIGN_IN: 'SAMLSignIN'
 } as const;

src/languages/en.ts

@@ -362,6 +362,14 @@ export default {
         termsOfService: 'Terms of Service',
         privacy: 'Privacy',
     },
+    samlSignIn: {
+        welcomeSAMLEnabled: 'Continue logging in with your company\'s Single Sign-On:',
+        orContinueWithMagicCode: 'Or optionally, your company allows signing in with a magic code',
+        useSingleSignOn: 'Use Single Sign-On',
+        useMagicCode: 'Use Magic Code',
+        launching: 'Launching...',
+        oneMoment:'One moment while we redirect you to your company\'s Single Sign-On portal.',
+    },
     reportActionCompose: {
         addAction: 'Actions',
         dropToUpload: 'Drop to upload',

src/languages/es.ts

@@ -353,6 +353,14 @@ export default {
         termsOfService: 'Términos de servicio',
         privacy: 'Privacidad',
     },
+    samlSignIn: {
+        welcomeSAMLEnabled: 'Continua iniciando sesión con el inicio de sesión único de su empresa:',
+        orContinueWithMagicCode: 'O, opcionalmente, tu empresa te permite iniciar sesión con un código mágico',
+        useSingleSignOn: 'Utilizar el inicio de sesión único',
+        useMagicCode: 'Usar código mágico',
+        launching: 'Cargando...',
+        oneMoment:'Un momento mientras te redirigimos al portal de inicio de sesión único de tu empresa.',
+    },
     reportActionCompose: {
         addAction: 'Acción',
         dropToUpload: 'Suelta el archivo aquí para compartirlo',

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -8,6 +8,7 @@ import defaultScreenOptions from './defaultScreenOptions';
 import UnlinkLoginPage from '../../../pages/UnlinkLoginPage';
 import AppleSignInDesktopPage from '../../../pages/signin/AppleSignInDesktopPage';
 import GoogleSignInDesktopPage from '../../../pages/signin/GoogleSignInDesktopPage';
+import SAMLSignInPage from '../../../pages/signin/SAMLSignInPage';
 
 const RootStack = createStackNavigator();
 
@@ -44,6 +45,11 @@ function PublicScreens() {
                 options={defaultScreenOptions}
                 component={GoogleSignInDesktopPage}
             />
+            <RootStack.Screen
+                name="SAMLSignIn"
+                options={defaultScreenOptions}
+                component={SAMLSignInPage}
+            />
         </RootStack.Navigator>
     );
 }

src/libs/Navigation/linkingConfig.js

@@ -15,6 +15,7 @@ export default {
             [SCREENS.CONCIERGE]: ROUTES.CONCIERGE,
             AppleSignInDesktop: ROUTES.APPLE_SIGN_IN,
             GoogleSignInDesktop: ROUTES.GOOGLE_SIGN_IN,
+            SAMLSignIn: ROUTES.SAML_SIGN_IN,
             [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: ROUTES.DESKTOP_SIGN_IN_REDIRECT,
             [SCREENS.REPORT_ATTACHMENTS]: ROUTES.REPORT_ATTACHMENTS.route,
 

src/libs/Permissions.ts

@@ -64,6 +64,10 @@ function canUseLinkPreviews(): boolean {
     return false;
 }
 
+function canUseSAML(betas: Beta[]): boolean {
+    return betas?.includes(CONST.BETAS.NEW_DOT_SAML) || canUseAllBetas(betas);
+}
+
 export default {
     canUseChronos,
     canUsePayWithExpensify,
@@ -77,4 +81,5 @@ export default {
     canUseCategories,
     canUseTags,
     canUseLinkPreviews,
+    canUseSAML,
 };

src/pages/signin/SAMLEnabledForm.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+import ONYXKEYS from '../../ONYXKEYS';
+import compose from '../../libs/compose';
+import Text from '../../components/Text';
+import Button from '../../components/Button';
+import {withNetwork} from '../../components/OnyxProvider';
+import networkPropTypes from '../../components/networkPropTypes';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
+import * as Session from '../../libs/actions/Session';
+import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink';
+import Terms from './Terms';
+import CONST from '../../CONST';
+import ROUTES from '../../ROUTES';
+import Navigation from '../../libs/Navigation/Navigation';
+
+const propTypes = {
+    /* Onyx Props */
+
+    /** The credentials of the logged in person */
+    credentials: PropTypes.shape({
+        /** The email/phone the user logged in with */
+        login: PropTypes.string,
+    }),
+
+    /** The details about the account that the user is signing in with */
+    account: PropTypes.shape({
+        /** Whether or not a sign on form is loading (being submitted) */
+        loading: PropTypes.bool,
+    }),
+
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
+
+    /** Function to change whether the user is using SAML or magic codes to log in */
+    setIsUsingSAMLLogin: PropTypes.func.isRequired,
+
+    ...withLocalizePropTypes,
+
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    credentials: {},
+    account: {},
+};
+
+function SAMLEnabledForm (props) {
+    return (
+        <>
+            <View>
+                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !props.isSmallScreenWidth ? styles.textAlignLeft : {}]}>
+                    {props.translate('samlSignIn.welcomeSAMLEnabled')}
+                </Text>
+                <Button
+                    isDisabled={props.network.isOffline}
+                    success
+                    style={[styles.mv3]}
+                    text={props.translate('samlSignIn.useSingleSignOn')}
+                    isLoading={props.account.isLoading}
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.SAML_SIGN_IN);
+                    }}
+                />
+
+                <View style={[styles.mt5]}>
+                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !props.isSmallScreenWidth ? styles.textAlignLeft : {}]}>
+                        {props.translate('samlSignIn.orContinueWithMagicCode')}
+                    </Text>
+                </View>
+
+                <Button
+                    isDisabled={props.network.isOffline}
+                    style={[styles.mv3]}
+                    text={props.translate('samlSignIn.useMagicCode')}
+                    isLoading={
+                        props.account.isLoading && props.account.loadingForm === (props.account.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM)
+                    }
+                    onPress={() => {
+                        Session.resendValidateCode(props.credentials.login);
+                        props.setIsUsingSAMLLogin(false);
+                    }}
+                />
+                <ChangeExpensifyLoginLink onPress={() => Session.clearSignInData()} />
+            </View>
+            <View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}>
+                <Terms />
+            </View>
+        </>
+    );
+}
+
+SAMLEnabledForm.propTypes = propTypes;
+SAMLEnabledForm.defaultProps = defaultProps;
+SAMLEnabledForm.displayName = 'SAMLEnabledForm';
+
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+    withNetwork(),
+    withOnyx({
+        credentials: {key: ONYXKEYS.CREDENTIALS},
+        account: {key: ONYXKEYS.ACCOUNT},
+    }),
+)(SAMLEnabledForm);

src/pages/signin/SAMLSignInPage/index.js

@@ -0,0 +1,69 @@
+import React, {useEffect} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import compose from '../../../libs/compose';
+import ONYXKEYS from '../../../ONYXKEYS';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import CONFIG from '../../../CONFIG';
+import Icon from '../../../components/Icon';
+import Text from '../../../components/Text';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import * as Illustrations from '../../../components/Icon/Illustrations';
+import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
+
+const propTypes = {
+    /** The credentials of the logged in person */
+    credentials: PropTypes.shape({
+        /** The email/phone the user logged in with */
+        login: PropTypes.string,
+    }),
+    ...withLocalizePropTypes,
+}
+const defaultProps = {
+    credentials: {},
+};
+
+function SAMLSignInPage(props) {
+    useEffect(() => {
+        window.open(`${CONFIG.EXPENSIFY.SAML_URL}?email=${props.credentials.login}&referer=${CONFIG.EXPENSIFY.EXPENSIFY_CASH_REFERER}`, '_self')
+
+    }, []);
+
+    return (
+        <View style={styles.deeplinkWrapperContainer}>
+            <View style={styles.deeplinkWrapperMessage}>
+                <View style={styles.mb2}>
+                    <Icon
+                        width={200}
+                        height={164}
+                        src={Illustrations.RocketBlue}
+                    />
+                </View>
+                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{props.translate('samlSignIn.launching')}</Text>
+                <View style={[styles.mt2, styles.mh2, styles.fontSizeNormal, styles.textAlignCenter]}>
+                    <Text style={[styles.textAlignCenter]}>{props.translate('samlSignIn.oneMoment')}</Text>
+                </View>
+            </View>
+            <View style={styles.deeplinkWrapperFooter}>
+                <Icon
+                    width={154}
+                    height={34}
+                    fill={themeColors.success}
+                    src={Expensicons.ExpensifyWordmark}
+                />
+            </View>
+        </View>
+    );
+}
+
+SAMLSignInPage.propTypes = propTypes;
+SAMLSignInPage.defaultProps = defaultProps;
+
+export default compose (
+    withLocalize,
+    withOnyx({
+        credentials: {key: ONYXKEYS.CREDENTIALS},
+    }),
+)(SAMLSignInPage);