agora-appbuilder-core 4.0.0-ms.3 → 4.0.0-ms.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-ms.3",
+  "version": "4.0.0-ms.4",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/src/AppRoutes.tsx

@@ -23,16 +23,16 @@ import {Text} from 'react-native';
 function AppRoutes() {
   return (
     <Switch>
-      <Route exact path={'/login'}>
+      {/* <Route exact path={'/login'}>
         <Login />
-      </Route>
+      </Route> */}
       <Route exact path={'/'}>
         <Redirect to={'/create'} />
       </Route>
       {/* <Route exact path={'/authorize/:token'}>
         <StoreToken />
       </Route> */}
-      <Route exact path={'/authorize'}>
+      <Route exact path={'/authorize/:token?'}>
         <IDPAuth />
       </Route>
       <AuthRoute exact path={'/join'}>

package/template/src/auth/AuthProvider.tsx

@@ -4,7 +4,7 @@ import React, {
   useEffect,
   Dispatch,
   SetStateAction,
-  useRef,
+  useContext,
 } from 'react';
 import {useHistory, useLocation} from '../components/Router';
 import {gql, useApolloClient} from '@apollo/client';
@@ -12,12 +12,19 @@ import {useIDPAuth} from './useIDPAuth';
 import Loading from '../subComponents/Loading';
 import useTokenAuth from './useTokenAuth';
 import Toast from '../../react-native-toast-message';
-import {getRequestHeaders, GET_UNAUTH_FLOW_API_ENDPOINT} from './config';
+import {ENABLE_AUTH, GET_UNAUTH_FLOW_API_ENDPOINT} from './config';
 import isSDK from '../utils/isSDK';
 import {Linking} from 'react-native';
-import {isAndroid, isIOS} from '../utils/common';
+import {
+  isAndroid,
+  isIOS,
+  isWeb,
+  isDesktop,
+  processDeepLinkURI,
+  getParamFromURL,
+} from '../utils/common';
 import SDKMethodEventsManager from '../utils/SdkMethodEvents';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import StorageContext from '../components/StorageContext';
 
 const GET_USER = gql`
   query getUser {
@@ -38,14 +45,17 @@ interface AuthContextInterface {
   setIsAuthenticated: Dispatch<SetStateAction<boolean>>;
   authLogin: () => void;
   authLogout: () => void;
+  returnTo: string;
 }
 
 const AuthContext = createContext<AuthContextInterface | null>(null);
 
 const AuthProvider = (props: AuthProviderProps) => {
+  const {setStore, store} = useContext(StorageContext);
   const [authenticated, setIsAuthenticated] = useState(false);
   const [authError, setAuthError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [returnTo, setReturnTo] = useState('');
   // auth hooks
   const {enableIDPAuth, idpLogout} = useIDPAuth();
   const {enableTokenAuth, tokenLogout} = useTokenAuth();
@@ -55,26 +65,106 @@ const AuthProvider = (props: AuthProviderProps) => {
   // client
   const apolloClient = useApolloClient();
 
-  const enableAuth = $config.ENABLE_IDP_AUTH || $config.ENABLE_TOKEN_AUTH;
-
   useEffect(() => {
-    SDKMethodEventsManager.on('login', async (res, rej, token) => {
-      try {
-        await AsyncStorage.setItem('SDK_TOKEN', token);
-        await enableTokenAuth();
-        res();
-      } catch (error) {
-        rej('SDK Login failed' + JSON.stringify(error));
+    if (!ENABLE_AUTH && !authenticated && store.token) {
+      setIsAuthenticated(true);
+      if (isAndroid() || isIOS()) {
+        if (returnTo) {
+          history.push(returnTo);
+        }
       }
-    });
-    SDKMethodEventsManager.on('logout', async (res, rej) => {
-      try {
-        await tokenLogout();
-        res();
-      } catch (error) {
-        rej('SDK Logout failed' + JSON.stringify(error));
+    }
+  }, [store?.token]);
+
+  const deepLinkUrl = (link: string | null) => {
+    console.log('debugging Deep-linking url: ', link);
+
+    if (link !== null) {
+      //deeplinking handling with authentication enabled
+      if ($config.ENABLE_IDP_AUTH) {
+        const url = processDeepLinkURI(link);
+        console.log('debugging Deep-linking processed url', url);
+        try {
+          if (url?.indexOf('authorize') !== -1) {
+            const token = getParamFromURL(url, 'token');
+            if (token) {
+              console.log('debugging deep-linking got token');
+              enableTokenAuth(token)
+                .then(() => {
+                  setIsAuthenticated(true);
+                  if (returnTo) {
+                    history.push(returnTo);
+                  } else {
+                    history.push('/');
+                  }
+                })
+                .catch(() => {
+                  setIsAuthenticated(false);
+                  console.log('debugging error on IDP token setting');
+                });
+            } else {
+              console.log('debugging deep-linking token is empty');
+              history.push('/');
+            }
+          } else if (url?.indexOf('authorize') === -1) {
+            console.log('debugging deep-linking setting return to');
+            setReturnTo(url);
+          } else {
+            history.push(url);
+          }
+        } catch (error) {
+          console.log('debugging deep-linking error catch');
+          history.push('/');
+        }
+      } else {
+        //deeplinking handling with authentication enabled
+        console.log('debugging path', processDeepLinkURI(link));
+        const url = processDeepLinkURI(link);
+        setReturnTo(url);
       }
-    });
+    }
+  };
+
+  useEffect(() => {
+    //handling the deeplink for native
+    if (isIOS() || isAndroid()) {
+      const deepLink = async () => {
+        const initialUrl = await Linking.getInitialURL();
+        console.log('debugging getting initialUrl', initialUrl);
+        Linking.addEventListener('url', (e) => {
+          console.log('debugging url from listener', e.url);
+          deepLinkUrl(e.url);
+        });
+        deepLinkUrl(initialUrl);
+      };
+      deepLink();
+    }
+  }, [history]);
+
+  useEffect(() => {
+    if (isSDK()) {
+      SDKMethodEventsManager.on('login', async (res, rej, token) => {
+        try {
+          setStore((prevState) => {
+            return {...prevState, token};
+          });
+          setTimeout(async () => {
+            await enableTokenAuth(token);
+            res();
+          });
+        } catch (error) {
+          rej('SDK Login failed' + JSON.stringify(error));
+        }
+      });
+      SDKMethodEventsManager.on('logout', async (res, rej) => {
+        try {
+          await tokenLogout();
+          res();
+        } catch (error) {
+          rej('SDK Logout failed' + JSON.stringify(error));
+        }
+      });
+    }
   }, []);
 
   useEffect(() => {
@@ -105,27 +195,35 @@ const AuthProvider = (props: AuthProviderProps) => {
     getUserDetails()
       .then((_) => {
         setIsAuthenticated(true);
-        //sdk redirect todo check in other platfrom
-        history.push(location.pathname);
+        if (isSDK()) {
+          history.push(location.pathname);
+        }
       })
-      .catch((err) => {
+      .catch(() => {
         setIsAuthenticated(false);
         authLogin();
-        if (!isSDK() && enableAuth) {
-          //show session expired notification
-          //only on auth enabled and non sdk
-          setAuthError('Your session has expird. Kindly login again');
-          //todo SDK handle session expire
-        }
       });
   }, []);
 
   const authLogin = () => {
-    if (enableAuth) {
-      // Authenticated login flow
+    // Authenticated login flow
+    if (ENABLE_AUTH) {
+      //AUTH -> IDP -> NATIVE and WEB and DESKTOP
       if ($config.ENABLE_IDP_AUTH && !isSDK()) {
-        enableIDPAuth();
-      } else if ($config.ENABLE_TOKEN_AUTH && isSDK()) {
+        //it will open external web link and post authentication it will redirect to application
+        //@ts-ignore
+        enableIDPAuth(
+          isWeb()
+            ? location.pathname
+            : isDesktop()
+            ? history
+            : isIOS() || isAndroid()
+            ? deepLinkUrl
+            : '',
+        );
+      }
+      //AUTH -> IDP -> SDK ONLY
+      else if ($config.ENABLE_TOKEN_AUTH && isSDK()) {
         enableTokenAuth()
           .then((res) => {
             setIsAuthenticated(true);
@@ -147,50 +245,37 @@ const AuthProvider = (props: AuthProviderProps) => {
             history.push('/create');
           });
       }
-    } else {
-      // Unauthenticated login flow
+    }
+    // Unauthenticated login flow
+    else {
       fetch(GET_UNAUTH_FLOW_API_ENDPOINT(), {
         credentials: 'include',
       })
         .then((response) => response.json())
         .then((response) => {
-          //rsdk,websdk,android,ios
-          if (isSDK() || isAndroid() || isIOS()) {
-            if (!response.token) {
-              throw new Error('Token not received');
-            } else {
-              enableTokenAuth(response.token)
-                .then((res) => {
-                  setIsAuthenticated(true);
-                  history.push('/create');
-                })
-                .catch((error) => {
-                  //don't show token expire/not found toast in the sdk
-                  //we have event emitter to inform the customer application
-                  //they have to listen for those events
-                  if (!isSDK()) {
-                    if (error instanceof Error) {
-                      setAuthError(error.message);
-                    } else {
-                      setAuthError(error);
-                    }
+          // unauthenticated flow all platform we will have to handle the token manually
+          // we need to store token manually
+          if (!response.token) {
+            throw new Error('Token not received');
+          } else {
+            enableTokenAuth(response.token)
+              .then(() => {
+                console.log('debugging token auth enabled');
+                //set auth enabled on useEffect
+              })
+              .catch((error) => {
+                //we don't need to show token expire/not found toast in the sdk
+                //we have event emitter to inform the customer application
+                //they have to listen for those events
+                if (!isSDK()) {
+                  if (error instanceof Error) {
+                    setAuthError(error.message);
+                  } else {
+                    setAuthError(error);
                   }
-                  setIsAuthenticated(false);
-                  //TODO fallback
-                  history.push('/login');
-                });
-            }
-          }
-          //web/mweb/desktop
-          else {
-            if (response && response.Code == 0) {
-              setIsAuthenticated(true);
-              history.push(location.pathname);
-            } else {
-              setIsAuthenticated(false);
-              //TODO fallback
-              history.push('/login');
-            }
+                }
+                setIsAuthenticated(false);
+              });
           }
         })
         .catch((error) => {
@@ -200,28 +285,26 @@ const AuthProvider = (props: AuthProviderProps) => {
             setAuthError(error);
           }
           setIsAuthenticated(false);
-          history.push('/login');
         });
     }
   };
 
   const authLogout = () => {
-    if (enableAuth && $config.ENABLE_IDP_AUTH && !isSDK()) {
+    if (ENABLE_AUTH && $config.ENABLE_IDP_AUTH && !isSDK()) {
       idpLogout()
         .then((res) => {
           console.log('user successfully logged out');
+          setIsAuthenticated(false);
         })
         .catch(() => {
           console.error('user logout failed');
           setAuthError('user logout failed');
-        })
-        .finally(() => {
-          setIsAuthenticated(false);
-          history.push('/login');
         });
     } else {
-      if (!enableAuth || isSDK()) {
+      if (!ENABLE_AUTH || isSDK()) {
         //no need to logout because we need token to see the create screen
+        //unauth flow no logout
+        //sdk with auth flow will use sdk api for logout
         history.push('/create');
       } else {
         tokenLogout()
@@ -234,7 +317,6 @@ const AuthProvider = (props: AuthProviderProps) => {
           })
           .finally(() => {
             setIsAuthenticated(false);
-            history.push('/login');
           });
       }
     }
@@ -247,9 +329,10 @@ const AuthProvider = (props: AuthProviderProps) => {
         authenticated,
         authLogin,
         authLogout,
+        returnTo,
       }}>
-      {loading || (!authenticated && !enableAuth) ? (
-        <Loading text={'Loading..'} />
+      {(!authenticated && !ENABLE_AUTH) || (ENABLE_AUTH && loading) ? (
+        <Loading text={'Loading...'} />
       ) : (
         props.children
       )}

package/template/src/auth/AuthRoute.tsx

@@ -12,10 +12,12 @@
 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';
 
 interface PrivateRouteProps extends RouteProps {
   children: React.ReactNode;
@@ -44,14 +46,20 @@ const AuthRoute: React.FC<PrivateRouteProps> = (props) => {
   }
 
   return authenticated ? (
-    <Route {...props} />
+    <>
+      <Route {...props} />
+    </>
+  ) : isAndroid() || isIOS() ? (
+    //if user closes inapp browser then show login/signup button
+    <Login />
   ) : (
-    <Redirect
-      to={{
-        pathname: '/login',
-      }}
-    />
+    <Loading text={'Loading...'} />
   );
+  // <Redirect
+  //   to={{
+  //     pathname: '/login',
+  //   }}
+  // />
   // return (
   //   <Route
   //     {...props}

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

@@ -0,0 +1,30 @@
+import React, {useEffect} from 'react';
+import {useAuth} from './AuthProvider';
+import {useHistory, useParams} from '../components/Router';
+import Loading from '../subComponents/Loading';
+import useTokenAuth from './useTokenAuth';
+
+export const IDPAuth = () => {
+  const {setIsAuthenticated} = useAuth();
+  const {enableTokenAuth} = useTokenAuth();
+  const history = useHistory();
+  const {token}: {token: string} = useParams();
+
+  useEffect(() => {
+    console.log('debugging electron token', token);
+    if (token) {
+      enableTokenAuth(token)
+        .then(() => {
+          setIsAuthenticated(true);
+          console.log('debugging electron login success');
+          history.push('/');
+        })
+        .catch(() => {
+          setIsAuthenticated(false);
+          console.log('debugging electron login failed');
+        });
+    }
+  }, []);
+
+  return <Loading text={'Authorizing app...'} />;
+};

package/template/src/auth/IDPAuth.tsx

@@ -1,15 +1,33 @@
 import React, {useEffect} from 'react';
 import {useAuth} from './AuthProvider';
-import {useHistory} from '../components/Router';
+import {useHistory, useParams} from '../components/Router';
 import Loading from '../subComponents/Loading';
 
 export const IDPAuth = () => {
   const {setIsAuthenticated} = useAuth();
   const history = useHistory();
+  const {token}: {token: string} = useParams();
+  //web token set in the cookies, using this route redirect user to origin url
+  //token used as path
+
+  // const getSearchParamFromURL = (url, param) => {
+  //   const include = url.includes(param);
+
+  //   if (!include) return null;
+
+  //   const params = url.split(/([&,?,=])/);
+  //   const index = params.indexOf(param);
+  //   const value = params[index + 2];
+  //   return value;
+  // };
 
   useEffect(() => {
     setIsAuthenticated(true);
-    history.push('/');
+    if (token) {
+      history.push('/' + token);
+    } else {
+      history.push('/');
+    }
   }, []);
 
   return <Loading text={'Authorizing app...'} />;

package/template/src/auth/IDPLogoutComponent.tsx

@@ -0,0 +1,149 @@
+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';
+
+interface LogoutPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  logout: () => void;
+}
+const LogoutPopup = (props: LogoutPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const logoutLabelHeading = 'Logout?';
+  const logoutLabelSubHeading = 'Are you sure you wanna log out?';
+
+  const cancelBtnLabel = 'CANCEL';
+  const confirmBtnLabel = 'CONFIRM';
+  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 {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="Logout"
+        onPress={() => {
+          setModalVisible(true);
+        }}
+      />
+    </View>
+  ) : (
+    <></>
+  );
+};
+export default IDPLogoutComponent;

package/template/src/auth/config.ts

@@ -1,10 +1,21 @@
-import {isWebInternal, isAndroid, isIOS} from '../utils/common';
+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
-  isWebInternal() && (platformID = 'turnkey_web');
+  isWeb() && (platformID = 'turnkey_web');
+  isDesktop() && (platformID = 'turnkey_desktop');
   (isAndroid() || isIOS()) && (platformID = 'turnkey_native');
   // SDKs
   isSDK() && isWebInternal() && (platformID = 'sdk_web');
@@ -19,24 +30,20 @@ export const getRequestHeaders = () => {
     'X-Platform-ID': getPlatformId(),
   };
 };
-
 export const getIDPAuthRedirectURL = () => {
-  return isWebInternal()
+  return isWeb()
     ? `${window.location.origin}/authorize`
     : `${$config.FRONTEND_ENDPOINT}/authorize`;
 };
 
 export const getUnauthLoginRedirectURL = () => {
-  // return 'https://conferencing.agora.io';
   return isWebInternal()
     ? `${window.location.origin}/create`
     : `${$config.FRONTEND_ENDPOINT}/create`;
 };
 
 export const getOriginURL = () => {
-  return isWebInternal()
-    ? `${window.location.origin}`
-    : `${$config.FRONTEND_ENDPOINT}`;
+  return isWeb() ? `${window.location.origin}` : `${$config.FRONTEND_ENDPOINT}`;
 };
 
 export const GET_UNAUTH_FLOW_API_ENDPOINT = () =>