agora-appbuilder-core 4.0.0-ms.7 → 4.0.0-ms.8

package/package.json

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

package/template/src/AppRoutes.tsx

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

package/template/src/auth/AuthProvider.tsx

@@ -93,7 +93,7 @@ const AuthProvider = (props: AuthProviderProps) => {
             //adding time delay to open in app browser
             Toast.show({
               type: 'error',
-              text1: 'Login session expired, Please login again.',
+              text1: 'Your session has timed out, Retrying.',
               visibilityTime: 3000,
             });
             setTimeout(() => {
@@ -227,13 +227,9 @@ const AuthProvider = (props: AuthProviderProps) => {
         });
     } else {
       if (location?.search?.indexOf('msg') !== -1) {
-        //old : manage backend login failed. show error message and redirect to login again
-        //new : IDP login already success, so don't need to show the error message
-        //we will redirect use to IDP login
-        //old code
         Toast.show({
           type: 'error',
-          text1: 'Login session expired, Please login again.',
+          text1: 'Your session has timed out, Retrying.',
           visibilityTime: 3000,
         });
         setTimeout(() => {

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

@@ -1,4 +1,5 @@
 import {getOriginURL, getPlatformId, AUTH_ENDPOINT_URL} from './config';
+import Toast from '../../react-native-toast-message';
 
 export const getIDPAuthLoginURL = () => {
   //redirect URL not require for electron
@@ -10,9 +11,19 @@ export const getIDPAuthLoginURL = () => {
 export const addEventListenerForToken = (history) => {
   window.addEventListener(
     'message',
-    ({data, origin}: {data: {token: string}; origin: string}) => {
+    ({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({
+          type: 'error',
+          text1: 'Your session has timed out, Retrying.',
+          visibilityTime: 3000,
+        });
+        setTimeout(() => {
+          //open auth login again
+          window.open(getIDPAuthLoginURL(), 'modal');
+        }, 3000);
       }
     },
     false,

package/template/src/auth/useTokenAuth.tsx

@@ -1,5 +1,4 @@
-import React, {useEffect, useContext} from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, {useEffect, useContext, useRef} from 'react';
 import jwt_decode from 'jwt-decode';
 import StorageContext from '../components/StorageContext';
 import SdkEvents from '../utils/SdkEvents';
@@ -7,9 +6,10 @@ import isSDK from '../utils/isSDK';
 const REFRESH_TOKEN_DURATION_IN_SEC = 59;
 
 const useTokenAuth = () => {
+  const tokenRef = useRef(null);
   const {setStore, store} = useContext(StorageContext);
   const [tokenExpiresAt, setTokenExpiresAt] = React.useState(0);
-
+  const timerRef = useRef(null);
   const updateToken = (token: string) => {
     setStore && setStore((store) => ({...store, token}));
   };
@@ -34,25 +34,32 @@ const useTokenAuth = () => {
   };
 
   const getRefreshToken = async () => {
-    await fetch(`${$config.BACKEND_ENDPOINT}/v1/token/refresh`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        authorization: store?.token ? `Bearer ${store.token}` : '',
-      },
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        if (data?.token) {
-          updateToken(data.token);
-        }
-      });
+    if (store?.token) {
+      await fetch(`${$config.BACKEND_ENDPOINT}/v1/token/refresh`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store?.token ? `Bearer ${store.token}` : '',
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          if (data?.token) {
+            updateToken(data.token);
+            if (isSDK()) {
+              SdkEvents.emit('token-refreshed');
+            }
+          }
+        });
+    } else {
+      console.log('debugging no token to refresh');
+    }
   };
 
   useEffect(() => {
     if (!tokenExpiresAt) return;
 
-    const timer = setInterval(() => {
+    timerRef.current = setInterval(() => {
       const diffInSeconds = Math.floor(
         Math.abs(tokenExpiresAt - Date.now()) / 1000,
       );
@@ -65,35 +72,43 @@ const useTokenAuth = () => {
             SdkEvents.emit('will-token-expire');
           }
           getRefreshToken();
-          clearInterval(timer);
+          clearInterval(timerRef.current);
         } catch (error) {
-          clearInterval(timer);
+          clearInterval(timerRef.current);
         }
       }
       if (diffInSeconds < 0) {
-        clearInterval(timer);
+        clearInterval(timerRef.current);
       }
     }, 1000);
 
     return () => {
-      clearInterval(timer);
+      clearInterval(timerRef.current);
     };
   }, [tokenExpiresAt]);
 
   useEffect(() => {
     const syncToken = async () => {
-      if (!store?.token) return;
-      const decoded = jwt_decode(store.token);
-      const expiresAt = decoded?.exp * 1000;
-      if (Date.now() >= expiresAt) {
-        if (isSDK()) {
-          SdkEvents.emit('did-token-expire');
+      if (!store?.token) {
+        try {
+          timerRef.current && clearInterval(timerRef.current);
+        } catch (error) {
+          console.log('debugging error on clearing interval');
         }
-        throw 'Token expired. Pass a new token';
       } else {
-        setTokenExpiresAt(expiresAt);
+        const decoded = jwt_decode(store.token);
+        const expiresAt = decoded?.exp * 1000;
+        if (Date.now() >= expiresAt) {
+          if (isSDK()) {
+            SdkEvents.emit('did-token-expire');
+          }
+          console.log('token expired');
+        } else {
+          setTokenExpiresAt(expiresAt);
+        }
       }
     };
+    tokenRef.current = store.token;
     syncToken();
   }, [store?.token]);
 
@@ -109,24 +124,27 @@ const useTokenAuth = () => {
           token = store?.token;
         }
         if (token) {
-          if (validateToken(token)) {
-            if (updateTokenInStore) {
-              updateToken(token);
-            }
-            setTimeout(() => {
-              resolve(true);
-            });
-          } else {
-            if (isSDK()) {
-              SdkEvents.emit('did-token-expire');
+          try {
+            if (validateToken(token)) {
+              if (updateTokenInStore) {
+                updateToken(token);
+              }
+              setTimeout(() => {
+                resolve(true);
+              });
+            } else {
+              if (isSDK()) {
+                SdkEvents.emit('did-token-expire');
+              }
             }
-            throw new Error('Token expired');
+          } catch (e) {
+            reject('Token expired');
           }
         } else {
           if (isSDK()) {
             SdkEvents.emit('token-not-found');
           }
-          throw new Error('Token not found');
+          reject('Token not found');
         }
       } catch (error) {
         reject(error);
@@ -143,7 +161,9 @@ const useTokenAuth = () => {
             ? {credentials: 'include'}
             : {
                 headers: {
-                  authorization: store?.token ? `Bearer ${store.token}` : '',
+                  authorization: tokenRef.current
+                    ? `Bearer ${tokenRef.current}`
+                    : '',
                 },
               },
         )

package/template/src/components/popups/InvitePopup.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {
   SHARE_LINK_CONTENT_TYPE,
@@ -25,15 +25,19 @@ import {isMobileUA, useIsDesktop} from '../../utils/common';
 import {useVideoCall} from '../useVideoCall';
 import {useParams} from '../Router';
 import useGetMeetingPhrase from '../../utils/useGetMeetingPhrase';
+import {ErrorContext} from '../common';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
   const isDesktop = useIsDesktop();
   const {copyShareLinkToClipboard} = useShareLink();
   const {phrase} = useParams<{phrase: string}>();
+  const {setGlobalErrorMessage} = useContext(ErrorContext);
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
-    getMeeting(phrase);
+    getMeeting(phrase).catch((error) => {
+      setGlobalErrorMessage(error);
+    });
   }, [phrase]);
   return (
     <Popup

package/template/src/components/useShareLink.tsx

@@ -212,7 +212,8 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
 
   const getPstn = () => {
     let stringToCopy = '';
-    if (pstn && pstn?.number && pstn?.pin) {
+    //sometimes backend pin value is zero and so removed the check
+    if (pstn && pstn?.number) {
       stringToCopy += `${PSTNNumberText}: ${pstn.number} ${PSTNPinText}: ${pstn.pin}`;
     }
 
@@ -233,6 +234,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
       case SHARE_LINK_CONTENT_TYPE.PSTN:
         stringToCopy = getPstn();
+        break;
       default:
         break;
     }
@@ -256,6 +258,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
       case SHARE_LINK_CONTENT_TYPE.PSTN:
         stringToCopy = getPstn();
+        break;
       default:
         break;
     }

package/template/src/components/useUserPreference.tsx

@@ -62,6 +62,8 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           variables: {
             name,
           },
+        }).catch((error) => {
+          console.log('ERROR, could not save the name', error);
         });
       } catch (error) {
         console.log('ERROR, could not save the name', error);

package/template/src/utils/SdkEvents.ts

@@ -37,6 +37,7 @@ export interface userEventsMapInterface {
   'token-not-found': () => void;
   'will-token-expire': () => void;
   'did-token-expire': () => void;
+  'token-refreshed': () => void;
 }
 
 const SDKEvents = createNanoEvents<userEventsMapInterface>();

package/template/src/components/OAuth.electron.tsx

@@ -1,41 +0,0 @@
-/*
-********************************************
- 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 from 'react';
-import {useHistory} from './Router';
-import SelectOAuth from '../subComponents/SelectOAuth';
-import {url, oAuthSystemType} from './OAuthConfig';
-
-const Oauth = () => {
-  const history = useHistory();
-  const onSelectOAuthSystem = ({
-    oAuthSystem,
-  }: {
-    oAuthSystem: oAuthSystemType;
-  }) => {
-    console.log('electron OAuth');
-    const oAuthUrl = url({platform: 'desktop'})[`${oAuthSystem}Url`];
-    // @ts-ignore
-    window.addEventListener(
-      'message',
-      ({data, origin}: {data: {token: string}; origin: string}) => {
-        if (data.token) {
-          console.log(data, origin);
-          history.push(`/auth-token/${data.token}`);
-        }
-      },
-      false,
-    );
-    window.open(oAuthUrl, 'modal');
-  };
-  return <SelectOAuth onSelectOAuth={onSelectOAuthSystem} />;
-};
-export default Oauth;

package/template/src/components/OAuth.native.tsx

@@ -1,55 +0,0 @@
-/*
-********************************************
- 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 from 'react';
-import {Linking} from 'react-native';
-import InAppBrowser from 'react-native-inappbrowser-reborn';
-import {useHistory} from './Router';
-import SelectOAuth from '../subComponents/SelectOAuth';
-
-import {url, oAuthSystemType} from './OAuthConfig';
-
-const processUrl = (url: string): string => {
-  return url
-    .replace(`${$config.PRODUCT_ID.toLowerCase()}://my-host`, '')
-    .replace($config.FRONTEND_ENDPOINT, '');
-};
-
-const Oauth = () => {
-  let history = useHistory();
-
-  const onSelectOAuthSystem = async ({
-    oAuthSystem,
-  }: {
-    oAuthSystem: oAuthSystemType;
-  }) => {
-    try {
-      // const url = `https://deep-link-tester.netlify.app`;
-      const oAuthUrl = url({platform: 'mobile'})[`${oAuthSystem}Url`];
-      if (await InAppBrowser.isAvailable()) {
-        const result = await InAppBrowser.openAuth(oAuthUrl, oAuthUrl);
-        console.log(JSON.stringify(result));
-        if (result.type === 'success') {
-          console.log('success', Linking.canOpenURL(result.url));
-          history.push(processUrl(result.url));
-        }
-      } else {
-        Linking.openURL(oAuthUrl);
-      }
-    } catch (error) {
-      console.log(error.message);
-    }
-  };
-
-  return <SelectOAuth onSelectOAuth={onSelectOAuthSystem} />;
-};
-
-export default Oauth;

package/template/src/components/OAuth.tsx

@@ -1,30 +0,0 @@
-/*
-********************************************
- 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 from 'react';
-import {Linking} from 'react-native';
-import SelectOAuth from '../subComponents/SelectOAuth';
-import {url, oAuthSystemType} from './OAuthConfig';
-
-const Oauth = () => {
-  const onSelectOAuthSystem = ({
-    oAuthSystem,
-  }: {
-    oAuthSystem: oAuthSystemType;
-  }) => {
-    const oAuthUrl = url({platform: 'web'})[`${oAuthSystem}Url`];
-    console.log(oAuthUrl);
-    Linking.openURL(oAuthUrl);
-  };
-  return <SelectOAuth onSelectOAuth={onSelectOAuthSystem} />;
-};
-
-export default Oauth;

package/template/src/components/OAuthConfig.ts

@@ -1,87 +0,0 @@
-/*
-********************************************
- 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. 
-*********************************************
-*/
-export type oAuthSystemType = 'google' | 'microsoft' | 'slack' | 'apple';
-type platformType = 'web' | 'mobile' | 'desktop';
-type oAuthUrlType = {
-  googleUrl: string;
-  microsoftUrl: string;
-  slackUrl: string;
-  appleUrl: string;
-};
-
-const getRedirectFrontEndUrl = ({platform}: {platform: platformType}) =>
-  platform === 'web'
-    ? `${window.location.origin}`
-    : `${$config.BACKEND_ENDPOINT}`;
-
-export const oAuthGoogle = ({platform}: {platform: platformType}) => ({
-  client_id: $config.GOOGLE_CLIENT_ID,
-  auth_uri: 'https://accounts.google.com/o/oauth2/auth',
-  redirect_uri: `${$config.BACKEND_ENDPOINT}/v1/oauth`,
-  scope: encodeURIComponent(
-    'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email',
-  ),
-  state: encodeURIComponent(
-    `site=google&platform=${platform}&backend=${
-      $config.BACKEND_ENDPOINT
-    }&redirect=${getRedirectFrontEndUrl({platform})}/auth-token/`,
-  ),
-});
-
-export const oAuthMicrosoft = ({platform}: {platform: platformType}) => ({
-  client_id: $config.MICROSOFT_CLIENT_ID,
-  auth_uri: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
-  redirect_uri: `${$config.BACKEND_ENDPOINT}/v1/oauth`,
-  scope: 'openid',
-  state: encodeURIComponent(
-    `site=microsoft&platform=${platform}&redirect=${getRedirectFrontEndUrl({
-      platform,
-    })}/auth-token/&backend=${$config.BACKEND_ENDPOINT}`,
-  ),
-});
-
-export const oAuthSlack = ({platform}: {platform: platformType}) => ({
-  client_id: $config.SLACK_CLIENT_ID,
-  auth_uri: 'https://slack.com/oauth/authorize',
-  redirect_uri: `${$config.BACKEND_ENDPOINT}/v1/oauth`,
-  scope: 'users.profile:read',
-  state: encodeURIComponent(
-    `site=slack&platform=${platform}&redirect=${getRedirectFrontEndUrl({
-      platform,
-    })}/auth-token/&backend=${$config.BACKEND_ENDPOINT}`,
-  ),
-});
-
-export const oAuthApple = ({platform}: {platform: platformType}) => ({
-  client_id: $config.APPLE_CLIENT_ID,
-  auth_uri: 'https://appleid.apple.com/auth/authorize',
-  redirect_uri: `${$config.BACKEND_ENDPOINT}/v1/oauth`,
-  scope: 'name email',
-  state: encodeURIComponent(
-    `site=apple&platform=${platform}&redirect=${getRedirectFrontEndUrl({
-      platform,
-    })}/auth-token/&backend=${$config.BACKEND_ENDPOINT}`,
-  ),
-});
-
-export const url = ({platform}: {platform: platformType}): oAuthUrlType => {
-  const configGoogle = oAuthGoogle({platform});
-  const configMicrosoft = oAuthMicrosoft({platform});
-  const configSlack = oAuthSlack({platform});
-  const configApple = oAuthApple({platform});
-  return {
-    googleUrl: `${configGoogle.auth_uri}?response_type=code&scope=${configGoogle.scope}&include_granted_scopes=true&state=${configGoogle.state}&client_id=${configGoogle.client_id}&redirect_uri=${configGoogle.redirect_uri}`,
-    microsoftUrl: `${configMicrosoft.auth_uri}?response_type=code&scope=${configMicrosoft.scope}&include_granted_scopes=true&state=${configMicrosoft.state}&client_id=${configMicrosoft.client_id}&redirect_uri=${configMicrosoft.redirect_uri}`,
-    slackUrl: `${configSlack.auth_uri}?response_type=code&scope=${configSlack.scope}&include_granted_scopes=true&state=${configSlack.state}&client_id=${configSlack.client_id}&redirect_uri=${configSlack.redirect_uri}`,
-    appleUrl: `${configApple.auth_uri}?response_type=code&scope=${configApple.scope}&include_granted_scopes=true&state=${configApple.state}&response_mode=form_post&client_id=${configApple.client_id}&redirect_uri=${configApple.redirect_uri}`,
-  };
-};

package/template/src/components/StoreToken.tsx

@@ -1,43 +0,0 @@
-/*
-********************************************
- 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, {useContext, useState} from 'react';
-import {Redirect, useParams} from './Router';
-import StorageContext from './StorageContext';
-import {Text} from 'react-native';
-import useMount from './useMount';
-import {useString} from '../utils/useString';
-import {useAuth} from '../auth/AuthProvider';
-
-const Authenticated = () => {
-  //commented for v1 release
-  //const authenticationSuccessLabel = useString('authenticationSuccessLabel')();
-  const authenticationSuccessLabel = 'Authenticated Successfully!';
-  return <Text> {authenticationSuccessLabel} </Text>;
-};
-
-const StoreToken = () => {
-  const [ready, setReady] = useState(false);
-  const {token}: {token: string} = useParams();
-  const {setIsAuthenticated} = useAuth();
-  const {setStore} = useContext(StorageContext);
-  console.log('store token api', token);
-
-  useMount(() => {
-    setStore && setStore((store) => ({...store, token}));
-    setIsAuthenticated(true);
-    setReady(true);
-  });
-
-  return ready ? <Redirect to={'/create'} /> : <Authenticated />;
-};
-
-export default StoreToken;