agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/auth/AuthRoute.tsx

@@ -0,0 +1,94 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useEffect, useRef} from 'react';
+import {Route, Redirect} from '../components/Router';
+import Toast from '../../react-native-toast-message';
+import type {RouteProps} from 'react-router';
+import {useAuth} from './AuthProvider';
+import isSDK from '../utils/isSDK';
+import Loading from '../subComponents/Loading';
+import Login from '../pages/Login';
+import {isAndroid, isIOS} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  authAuthenticationFailedText,
+  loadingText,
+} from '../language/default-labels/commonLabels';
+
+interface PrivateRouteProps extends RouteProps {
+  children: React.ReactNode;
+}
+
+const AuthRoute: React.FC<PrivateRouteProps> = props => {
+  const didMountRef = useRef(false);
+  const {authenticated} = useAuth();
+  const loadingLabel = useString(loadingText)();
+  const failedtext = useString(authAuthenticationFailedText)();
+
+  useEffect(() => {
+    if (!didMountRef.current) return;
+    if (!authenticated) {
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: failedtext,
+        visibilityTime: 1000,
+      });
+    }
+    didMountRef.current = true;
+  }, [authenticated]);
+
+  //on SDK no fallback so even though authentication failed we will still show the routes
+  //when user try to perform any operation it will get failed and throw regular error message
+  if (isSDK()) {
+    return <Route {...props} />;
+  }
+
+  return authenticated ? (
+    <>
+      <Route {...props} />
+    </>
+  ) : (
+    //if user closes the inapp browser then we are showing the loginpopup
+    //: isAndroid() || isIOS() ? (
+    //if user closes inapp browser then show login/signup button
+    //  <Login />
+    //)
+    <Loading text={loadingLabel} />
+  );
+  // <Redirect
+  //   to={{
+  //     pathname: '/login',
+  //   }}
+  // />
+  // return (
+  //   <Route
+  //     {...props}
+  //     render={({location}) => {
+  //       return authenticated ? (
+  //         props.children
+  //       ) : (
+  //         <Redirect
+  //           to={{
+  //             pathname: '/login',
+  //             state: {
+  //               from: location,
+  //             },
+  //           }}
+  //         />
+  //       );
+  //     }}
+  //   />
+  // );
+};
+
+export default AuthRoute;

package/template/src/auth/IDPAuth.electron.tsx

@@ -0,0 +1,32 @@
+import React, {useEffect} from 'react';
+import {useAuth} from './AuthProvider';
+import {useHistory, useParams} from '../components/Router';
+import Loading from '../subComponents/Loading';
+import useTokenAuth from './useTokenAuth';
+import {useString} from '../utils/useString';
+import {authAuthorizingApplicationText} from '../language/default-labels/commonLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+
+export const IDPAuth = () => {
+  const {setIsAuthenticated} = useAuth();
+  const {enableTokenAuth} = useTokenAuth();
+  const history = useHistory();
+  const {token}: {token: string} = useParams();
+  const text = useString(authAuthorizingApplicationText)();
+
+  useEffect(() => {
+    if (token) {
+      enableTokenAuth(token)
+        .then(() => {
+          setIsAuthenticated(true);
+          history.push('/');
+        })
+        .catch(() => {
+          setIsAuthenticated(false);
+          logger.error(LogSource.Internals, 'AUTH', 'electron login failed');
+        });
+    }
+  }, []);
+
+  return <Loading text={text} />;
+};

package/template/src/auth/IDPAuth.tsx

@@ -0,0 +1,73 @@
+import React, {useEffect} from 'react';
+import {GET_USER, useAuth} from './AuthProvider';
+import {useHistory, useParams} from '../components/Router';
+import Loading from '../subComponents/Loading';
+import {useApolloClient} from '@apollo/client';
+import Toast from '../../react-native-toast-message';
+import {getParamFromURL} from '../utils/common';
+import useTokenAuth from './useTokenAuth';
+import {useString} from '../utils/useString';
+import {
+  authAuthorizingApplicationText,
+  authErrorOnLoginToastHeading,
+} from '../language/default-labels/commonLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+
+export const IDPAuth = () => {
+  const toastheading = useString(authErrorOnLoginToastHeading)();
+  const text = useString(authAuthorizingApplicationText)();
+  const {setIsAuthenticated, authLogin} = useAuth();
+  const history = useHistory();
+  const {token: returnTo}: {token: string} = useParams();
+  //token used as returnTo and webToken is sent on the token query param
+  const apolloClient = useApolloClient();
+  const {enableTokenAuth} = useTokenAuth();
+
+  async function getUserDetails() {
+    try {
+      await apolloClient.query({
+        query: GET_USER,
+        fetchPolicy: 'network-only',
+      });
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  useEffect(() => {
+    const token = getParamFromURL(history.location.search, 'token');
+    if (token) {
+      enableTokenAuth(token)
+        .then(() => {
+          setIsAuthenticated(true);
+          if (returnTo && returnTo.indexOf('authorize') === -1) {
+            history.push('/' + returnTo);
+          } else {
+            history.push('/');
+          }
+        })
+        .catch(error => {
+          setIsAuthenticated(false);
+          logger.error(
+            LogSource.Internals,
+            'AUTH',
+            'error on IDP token setting',
+            error,
+          );
+        });
+    } else {
+      setIsAuthenticated(false);
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: toastheading,
+        visibilityTime: 3000,
+      });
+      setTimeout(() => {
+        authLogin();
+      }, 3000);
+    }
+  }, []);
+
+  return <Loading text={text} />;
+};

package/template/src/auth/IDPLogoutComponent.tsx

@@ -0,0 +1,158 @@
+import React, {SetStateAction, useContext, useState} from 'react';
+import {StyleSheet, Text, View, ViewStyle} from 'react-native';
+import Spacer from '../atoms/Spacer';
+import Popup from '../atoms/Popup';
+import PrimaryButton from '../atoms/PrimaryButton';
+import ThemeConfig from '../theme';
+import {isMobileUA, useIsDesktop} from '../utils/common';
+import TertiaryButton from '../atoms/TertiaryButton';
+import isSDK from '../utils/isSDK';
+import {useAuth} from './AuthProvider';
+import {useString} from '../utils/useString';
+import {
+  authLogoutPopupHeading,
+  authLogoutPopupPrimaryBtnText,
+  authLogoutPopupSubHeading,
+  cancelText,
+  logoutText,
+} from '../language/default-labels/commonLabels';
+
+interface LogoutPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  logout: () => void;
+}
+const LogoutPopup = (props: LogoutPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const logoutLabelHeading = useString(authLogoutPopupHeading)();
+  const logoutLabelSubHeading = useString(authLogoutPopupSubHeading)();
+
+  const cancelBtnLabel = useString(cancelText)();
+  const confirmBtnLabel = useString(authLogoutPopupPrimaryBtnText)();
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{logoutLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{logoutLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: isDesktop ? 90 : '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => {
+              props.setModalVisible(false);
+            }}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 2}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={confirmBtnLabel}
+            onPress={props.logout}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+    minWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});
+
+interface IDPLogoutComponentProps {
+  containerStyle?: ViewStyle;
+}
+
+const IDPLogoutComponent = (props?: IDPLogoutComponentProps) => {
+  const logoutLabel = useString(logoutText)();
+  const {authenticated, authLogout} = useAuth();
+  const [modalVisible, setModalVisible] = useState(false);
+  return authenticated && $config.ENABLE_IDP_AUTH && !isSDK() ? (
+    <View
+      style={[
+        {
+          zIndex: 999,
+          maxWidth: 80,
+          marginTop: isMobileUA() ? 16 : 32,
+          marginRight: isMobileUA() ? 16 : 32,
+          alignSelf: 'flex-end',
+        },
+        props?.containerStyle,
+      ]}>
+      <LogoutPopup
+        logout={() => {
+          authLogout();
+        }}
+        modalVisible={modalVisible}
+        setModalVisible={setModalVisible}
+      />
+      <TertiaryButton
+        text={logoutLabel}
+        onPress={() => {
+          setModalVisible(true);
+        }}
+      />
+    </View>
+  ) : (
+    <></>
+  );
+};
+export default IDPLogoutComponent;

package/template/src/auth/UserCancelPopup.tsx

@@ -0,0 +1,115 @@
+import React, {SetStateAction} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../atoms/Spacer';
+import Popup from '../atoms/Popup';
+import PrimaryButton from '../atoms/PrimaryButton';
+import ThemeConfig from '../theme';
+import {useIsDesktop} from '../utils/common';
+import TertiaryButton from '../atoms/TertiaryButton';
+import {useString} from '../utils/useString';
+import {
+  authLogInRequiredPopupHeading,
+  authLogInRequiredPopupPrimaryBtnText,
+  authLogInRequiredPopupSecondaryBtnText,
+  authLogInRequiredPopupSubHeading,
+} from '../language/default-labels/commonLabels';
+
+interface UserCancelPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  login: () => void;
+  exitApp: () => void;
+}
+const UserCancelPopup = (props: UserCancelPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const logoutLabelHeading = useString(authLogInRequiredPopupHeading)();
+  const logoutLabelSubHeading = useString(authLogInRequiredPopupSubHeading)();
+
+  const loginBtnLabel = useString(authLogInRequiredPopupPrimaryBtnText)();
+  const closeAppBtnLabel = useString(authLogInRequiredPopupSecondaryBtnText)();
+  return (
+    <Popup
+      cancelable={false}
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{logoutLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{logoutLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: isDesktop ? 90 : '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={closeAppBtnLabel}
+            onPress={props.exitApp}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 2}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={loginBtnLabel}
+            onPress={props.login}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+export default UserCancelPopup;
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+    minWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});

package/template/src/auth/config.ts

@@ -0,0 +1,53 @@
+import {
+  isWebInternal,
+  isAndroid,
+  isIOS,
+  isWeb,
+  isDesktop,
+} from '../utils/common';
+import isSDK from '../utils/isSDK';
+
+export const AUTH_ENDPOINT_URL = `${$config.BACKEND_ENDPOINT}/v1/idp/login`;
+
+export const ENABLE_AUTH = $config.ENABLE_IDP_AUTH || $config.ENABLE_TOKEN_AUTH;
+
+export const getPlatformId = (): string => {
+  let platformID = 'turnkey_web';
+  // Turnkey
+  isWeb() && (platformID = 'turnkey_web');
+  isDesktop() && (platformID = 'turnkey_desktop');
+  (isAndroid() || isIOS()) && (platformID = 'turnkey_native');
+  // SDKs
+  isSDK() && isWebInternal() && (platformID = 'sdk_web');
+  isSDK() && isAndroid() && (platformID = 'sdk_android');
+  isSDK() && isIOS() && (platformID = 'sdk_ios');
+  return platformID;
+};
+
+export const getRequestHeaders = () => {
+  return {
+    'X-Project-ID': $config.PROJECT_ID,
+    'X-Platform-ID': getPlatformId(),
+  };
+};
+export const getIDPAuthRedirectURL = () => {
+  return isWeb()
+    ? `${window.location.origin}/authorize`
+    : `${$config.FRONTEND_ENDPOINT}/authorize`;
+};
+
+export const getUnauthLoginRedirectURL = () => {
+  return isWebInternal()
+    ? `${window.location.origin}/create`
+    : `${$config.FRONTEND_ENDPOINT}/create`;
+};
+
+export const getOriginURL = () => {
+  return isWeb() ? `${window.location.origin}` : `${$config.FRONTEND_ENDPOINT}`;
+};
+
+export const GET_UNAUTH_FLOW_API_ENDPOINT = () => {
+  return `${$config.BACKEND_ENDPOINT}/v1/login?project_id=${
+    $config.PROJECT_ID
+  }&platform_id=${getPlatformId()}`;
+};

package/template/src/auth/openIDPURL.electron.tsx

@@ -0,0 +1,39 @@
+import {getOriginURL, getPlatformId, AUTH_ENDPOINT_URL} from './config';
+import Toast from '../../react-native-toast-message';
+
+export const getIDPAuthLoginURL = () => {
+  //redirect URL not require for electron
+  return `${AUTH_ENDPOINT_URL}?project_id=${
+    $config.PROJECT_ID
+  }&origin_url=${getOriginURL()}&platform_id=${getPlatformId()}`;
+};
+
+export const addEventListenerForToken = (history, heading) => {
+  window.addEventListener(
+    'message',
+    ({data, origin}: {data: {token: string; msg: string}; origin: string}) => {
+      if (data?.token) {
+        history.push(`/authorize/${data.token}`);
+      } else if (data?.msg && data?.msg === 'login_link_expired') {
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'error',
+          text1: heading ? heading : 'Your session has timed out, Retrying...',
+          visibilityTime: 3000,
+        });
+        setTimeout(() => {
+          //open auth login again
+          window.open(getIDPAuthLoginURL(), 'modal');
+        }, 3000);
+      }
+    },
+    false,
+  );
+};
+
+export const enableIDPAuth = async (history, heading) => {
+  addEventListenerForToken(history, heading);
+  //open the auth login in the popup
+  window.open(getIDPAuthLoginURL(), 'modal');
+};
+export const exitApp = () => {};

package/template/src/auth/openIDPURL.native.tsx

@@ -0,0 +1,62 @@
+import {Linking, Platform} from 'react-native';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
+import {getOriginURL, getPlatformId, AUTH_ENDPOINT_URL} from './config';
+import RNExitApp from 'react-native-exit-app';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+
+export const getDeepLinkURI = (path = '') => {
+  const scheme = $config.PRODUCT_ID?.toLowerCase();
+  const prefix =
+    Platform.OS === 'android' ? `${scheme}://my-host/` : `${scheme}://`;
+  return prefix + path;
+};
+
+export const getIDPAuthLoginURL = () => {
+  return `${AUTH_ENDPOINT_URL}?project_id=${
+    $config.PROJECT_ID
+  }&redirect_url=${encodeURIComponent(
+    getDeepLinkURI('authorize'),
+  )}&origin_url=${encodeURIComponent(
+    getDeepLinkURI(),
+  )}&platform_id=${getPlatformId()}`;
+};
+
+export const enableIDPAuth = async openDeepLink => {
+  try {
+    const URL = getIDPAuthLoginURL();
+    if (await InAppBrowser.isAvailable()) {
+      await InAppBrowser.close();
+      const result = await InAppBrowser.openAuth(
+        URL,
+        encodeURIComponent(getDeepLinkURI()),
+      );
+      if (result && result?.type === 'success') {
+        openDeepLink && openDeepLink(result?.url);
+      } else if (result && result?.type === 'cancel') {
+        return {showNativePopup: true};
+      }
+    } else {
+      Linking.openURL(URL);
+    }
+  } catch (error) {
+    logger.error(
+      LogSource.Internals,
+      'AUTH',
+      'failed to open IDP URL native',
+      error,
+    );
+  }
+};
+
+export const exitApp = () => {
+  try {
+    RNExitApp.exitApp();
+  } catch (error) {
+    logger.error(
+      LogSource.Internals,
+      'AUTH',
+      'Error on closing the app',
+      error,
+    );
+  }
+};

package/template/src/auth/openIDPURL.tsx

@@ -0,0 +1,20 @@
+import {Linking} from 'react-native';
+import {
+  getIDPAuthRedirectURL,
+  getOriginURL,
+  getPlatformId,
+  AUTH_ENDPOINT_URL,
+} from './config';
+
+export const getIDPAuthLoginURL = (returnTo?: any) => {
+  const finalRedirectURL = getIDPAuthRedirectURL() + returnTo;
+  return `${AUTH_ENDPOINT_URL}?project_id=${
+    $config.PROJECT_ID
+  }&redirect_url=${finalRedirectURL}&origin_url=${getOriginURL()}&platform_id=${getPlatformId()}`;
+};
+
+export const enableIDPAuth = async (returnTo?: any, heading?: string) => {
+  Linking.openURL(getIDPAuthLoginURL(returnTo));
+};
+
+export const exitApp = () => {};