[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')
+
+ }, [props.credentials.login]);
+
+ 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);