agora-appbuilder-core 4.0.0 → 4.0.2

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,52 @@
+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 = () =>
+  `${$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,51 @@
+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';
+
+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) {
+    console.log(error.message);
+  }
+};
+
+export const exitApp = () => {
+  try {
+    RNExitApp.exitApp();
+  } catch (error) {
+    console.log('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 = () => {};

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

@@ -0,0 +1,65 @@
+import {useContext} from 'react';
+import {
+  enableIDPAuth,
+  getIDPAuthLoginURL,
+  addEventListenerForToken,
+} from './openIDPURL.electron';
+import StorageContext from '../components/StorageContext';
+import useTokenAuth from './useTokenAuth';
+import {useHistory} from '../components/Router';
+import {useString} from '../utils/useString';
+import {authSessionTimeoutToastHeading} from '../language/default-labels/commonLabels';
+
+export const useIDPAuth = () => {
+  const {store, setStore} = useContext(StorageContext);
+  const {tokenLogout} = useTokenAuth();
+  const headingText = useString(authSessionTimeoutToastHeading)();
+  const history = useHistory();
+  const idpLogout = () => {
+    return new Promise((resolve, reject) => {
+      try {
+        //v1/idp/logout -> will generate and return URL for IDP logout(frontend need to call this)
+        fetch(`${$config.BACKEND_ENDPOINT}/v1/idp/logout`, {
+          headers: {
+            authorization: store?.token ? `Bearer ${store?.token}` : '',
+          },
+        })
+          .then(response => response.json())
+          .then((res: any) => {
+            if (res && res?.url) {
+              //Storing the URL in the local variable
+              const IDPAuthLogoutURL =
+                res?.url +
+                `&returnTo=${encodeURIComponent(getIDPAuthLoginURL())}`;
+              //manage backend logout
+              //it will invalid the user session from the manage backend
+              tokenLogout()
+                .then(() => {
+                  //call IDP logout url
+                  addEventListenerForToken(history, headingText);
+                  setTimeout(() => {
+                    window.open(IDPAuthLogoutURL, 'modal');
+                  });
+                  resolve(true);
+                })
+                .catch(() => {
+                  reject(false);
+                });
+            } else {
+              reject(false);
+            }
+          })
+          .catch(_ => {
+            reject(false);
+          });
+      } catch (error) {
+        reject(false);
+      }
+    });
+  };
+
+  return {
+    enableIDPAuth,
+    idpLogout,
+  };
+};

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

@@ -0,0 +1,70 @@
+import {useContext} from 'react';
+import {Linking} from 'react-native';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
+import {
+  enableIDPAuth,
+  getDeepLinkURI,
+  getIDPAuthLoginURL,
+} from './openIDPURL.native';
+import StorageContext from '../components/StorageContext';
+import useTokenAuth from './useTokenAuth';
+
+export const useIDPAuth = () => {
+  const {store, setStore} = useContext(StorageContext);
+  const {tokenLogout} = useTokenAuth();
+  const idpLogout = (setShowNativePopup: (val: boolean) => void) => {
+    return new Promise((resolve, reject) => {
+      try {
+        //v1/idp/logout -> will generate and return URL for IDP logout(frontend need to call this)
+        fetch(`${$config.BACKEND_ENDPOINT}/v1/idp/logout`, {
+          headers: {
+            authorization: store?.token ? `Bearer ${store?.token}` : '',
+          },
+        })
+          .then((response) => response.json())
+          .then((res: any) => {
+            if (res && res?.url) {
+              //Storing the URL in the local variable
+              const IDPAuthLogoutURL =
+                res?.url +
+                `&returnTo=${encodeURIComponent(getIDPAuthLoginURL())}`;
+              //manage backend logout
+              //it will invalid the user session from the manage backend
+              tokenLogout()
+                .then(() => {
+                  //call IDP logout url
+                  if (InAppBrowser.isAvailable()) {
+                    InAppBrowser.openAuth(
+                      IDPAuthLogoutURL,
+                      encodeURIComponent(getIDPAuthLoginURL()),
+                    ).then((res) => {
+                      if (res && res?.type === 'cancel') {
+                        setShowNativePopup && setShowNativePopup(true);
+                      }
+                    });
+                  } else {
+                    Linking.openURL(IDPAuthLogoutURL);
+                  }
+                  resolve(true);
+                })
+                .catch(() => {
+                  reject(false);
+                });
+            } else {
+              reject(false);
+            }
+          })
+          .catch((_) => {
+            reject(false);
+          });
+      } catch (error) {
+        reject(false);
+      }
+    });
+  };
+
+  return {
+    enableIDPAuth,
+    idpLogout,
+  };
+};

package/template/src/auth/useIDPAuth.tsx

@@ -0,0 +1,63 @@
+import {Linking} from 'react-native';
+import {useLocation} from '../components/Router';
+import {enableIDPAuth, getIDPAuthLoginURL} from './openIDPURL';
+import useTokenAuth from './useTokenAuth';
+import StorageContext from '../components/StorageContext';
+import {useContext} from 'react';
+
+export const useIDPAuth = () => {
+  const location = useLocation();
+  const {store, setStore} = useContext(StorageContext);
+  const {tokenLogout} = useTokenAuth();
+  const idpLogout = (dummy: any) => {
+    return new Promise((resolve, reject) => {
+      try {
+        //v1/idp/logout -> will generate and return URL for IDP logout(frontend need to call this)
+        fetch(`${$config.BACKEND_ENDPOINT}/v1/idp/logout`, {
+          credentials: 'include',
+          headers: {
+            authorization: store?.token ? `Bearer ${store?.token}` : '',
+          },
+        })
+          .then((response) => response.json())
+          .then((res: any) => {
+            if (res && res?.url) {
+              //Storing the URL in the local variable
+              // const IDPAuthLogoutURL =
+              //   res?.url + `&returnTo=${window.location.origin}`;
+              const IDPAuthLogoutURL =
+                res?.url +
+                `&returnTo=${encodeURIComponent(
+                  getIDPAuthLoginURL(location.pathname),
+                )}`;
+              //manage backend logout
+              //it will invalid the user session from the manage backend
+              //cookie logout -> true
+              //regular logout -> false
+              tokenLogout(false)
+                .then(() => {
+                  //open idp logout url
+                  Linking.openURL(IDPAuthLogoutURL);
+                  resolve(true);
+                })
+                .catch(() => {
+                  reject(false);
+                });
+            } else {
+              reject(false);
+            }
+          })
+          .catch((_) => {
+            reject(false);
+          });
+      } catch (error) {
+        reject(false);
+      }
+    });
+  };
+
+  return {
+    enableIDPAuth,
+    idpLogout,
+  };
+};