feat(useaccountmanager): add ability to input callback functions

src/ArcgisAccount/accountManagerUtils.js

@@ -18,7 +18,12 @@ export const beginLogin = async (
   type = 'OAuth2'
 ) => {
   if (type === 'OAuth2') {
-    loginOAuth2(managerName, options, setAccountManagerState);
+    const response = await loginOAuth2(
+      managerName,
+      options,
+      setAccountManagerState
+    );
+    return response;
   }
 };
 
@@ -32,7 +37,7 @@ export const loginOAuth2 = async (
   // https://github.com/Esri/arcgis-rest-js/blob/master/packages/arcgis-rest-auth/src/UserSession.ts#L303
   // https://github.com/Esri/arcgis-rest-js/blob/master/packages/arcgis-rest-request/src/utils/encode-query-string.ts#L28
 
-  const portal = portalUrl ? portalUrl : 'https://www.arcgis.com/sharing';
+  const portal = portalUrl ? portalUrl : 'https://www.arcgis.com/sharing/rest';
   const url = new URL(portal);
 
   if (!url.pathname) {
@@ -62,8 +67,17 @@ export const loginOAuth2 = async (
 
       const accountManager = getAccountManagerStorage(managerName);
       setAccountManagerState(accountManager);
+
+      return { account, success: true };
     } catch (e) {
-      console.error(`Error getting User Session (loginOAuth2). ${e}`);
+      //error.code === 'access_denied'
+      //error.name === 'ArcGISAuthError'
+      //error.message === 'access_denied: The user denied your request.&state=
+      console.warn({
+        note: 'Error getting User Session (loginOAuth2).',
+        error: e
+      });
+      return { error: e, success: false };
     }
   } else {
     try {
@@ -76,16 +90,20 @@ export const loginOAuth2 = async (
         params
       });
     } catch (e) {
-      console.error(`Error getting User Session (loginOAuth2). ${e}`);
+      console.warn({
+        note: 'Error getting User Session (loginOAuth2).',
+        error: e
+      });
     }
   }
+  return null;
 };
 
 /** Complete auth and return account with serialized portal and session  */
 export const completeLogin = async (options, type = 'OAuth2') => {
   if (type === 'OAuth2') {
-    const account = await completeOAuth2(options);
-    return account;
+    const response = await completeOAuth2(options);
+    return response;
   }
 };
 
@@ -97,7 +115,9 @@ export const completeOAuth2 = async ({
   popup
 }) => {
   try {
-    const portal = portalUrl ? portalUrl : 'https://www.arcgis.com/sharing';
+    const portal = portalUrl
+      ? portalUrl
+      : 'https://www.arcgis.com/sharing/rest';
     const dSession = UserSession.completeOAuth2({
       clientId,
       portal,
@@ -114,12 +134,14 @@ export const completeOAuth2 = async ({
     } else {
       window.location.hash = '';
     }
-    return account;
+    return { account, success: true };
   } catch (e) {
-    console.error(
-      `Error getting User Session (completeOAuth). Error reading property may result from app redirecting before operation can read token hash in url. ${e}`
-    );
-    return null;
+    console.warn({
+      note:
+        'Error getting User Session (completeOAuth). Error reading property may result from app redirecting before operation can read token hash in url.',
+      error: e
+    });
+    return { error: e, success: false };
   }
 };
 
@@ -315,7 +337,9 @@ const createAccountObject = async ({ dSession, portal, clientId }) => {
     };
   } catch (e) {
     throw new Error(
-      `Could not create account object. This could be due to UserSession.getUser(). ${e}`
+      `Could not create account object. This could be due to UserSession.getUser(). ${
+        e.message
+      }`
     );
   }
 };

src/ArcgisAccount/doc/ArcgisAccount.mdx

@@ -87,7 +87,7 @@ import ArcgisAccount, {
     const Example = () => {
 
       // register an app of your own to create a unique clientId
-      const clientId =  "dwecSqF6H1LcJ1n3"
+      const clientId =  "Vxch59wud2if1Dqk"
       const redirectUri = `${window.location.origin}/arcgis-account`
 
       const options = {

src/ArcgisAccount/useAccountManager.js

@@ -25,14 +25,27 @@ const useAccountManager = (
   options = {
     clientId: null,
     redirectUri: null,
-    portalUrl: 'https://www.arcgis.com/sharing',
+    portalUrl: 'https://www.arcgis.com/sharing/rest',
     popup: false,
     params: { force_login: false }
   },
-  name = 'arcgis-account-manager'
+  name = 'arcgis-account-manager',
+  onAccountAdded = () => {
+    console.log('onAccountAdded');
+  },
+  onAccountRemoved = () => {
+    console.log('onAccountRemoved');
+  },
+  onAccountsUpdated = () => {
+    console.log('onAccountsUpdated');
+  },
+  onAuthCancelled = () => {
+    console.log('onAuthCancelled');
+  }
 ) => {
   const [managerName] = useState(name);
   const [managerOptions] = useState(options);
+  const [popupOpen, setPopupOpen] = useState(false);
 
   const { accounts, status, active, order } = getAccountManagerStorage(
     managerName
@@ -49,33 +62,55 @@ const useAccountManager = (
     () => {
       const { loading, authProps } = status || {};
       if (loading) {
+        //occurs in popup
         const completeAddAccount = async () => {
-          const account = await completeLogin(authProps);
-          if (account && account.key) {
+          const { success, error, account } =
+            (await completeLogin(authProps)) || {};
+
+          if (success) {
             addAccountStorage(managerName, account);
           }
-          //Update localStorage/ state
+
+          //update localStorage/ state
           completeStatusStorage(managerName);
           const accountManager = getAccountManagerStorage(managerName);
           setAccountManagerState(accountManager);
-        };
 
+          //response.code === 'access_denied'
+          if (error && error.code === 'access_denied') {
+            onAuthCancelled();
+          }
+          if (success) {
+            onAccountAdded();
+          }
+        };
         completeAddAccount();
       }
     },
     [managerName, status]
   );
 
+  useEffect(
+    () => {
+      console.log(popupOpen);
+    },
+    [popupOpen]
+  );
+
   /** Add Account */
   const addAccount = useCallback(
-    (options = null, setActive = true, type = 'OAuth2') => {
+    async (options = null, setActive = true, type = 'OAuth2') => {
       // saving window.location.href (query params, etc) as originRoute
       const originRoute = window.location.href;
 
       const { clientId, redirectUri, portalUrl, popup, params } = options
         ? options || {}
         : managerOptions || {};
 
+      if (popup) {
+        setPopupOpen(true);
+      }
+
       //set localstorage status
       beginStatusStorage(
         managerName,
@@ -89,18 +124,28 @@ const useAccountManager = (
         setActive
       );
       //begin login
-      beginLogin(
-        managerName,
-        {
-          clientId,
-          redirectUri,
-          portalUrl,
-          popup,
-          params
-        },
-        setAccountManagerState,
-        type
-      );
+      const { success, account, error } =
+        (await beginLogin(
+          managerName,
+          {
+            clientId,
+            redirectUri,
+            portalUrl,
+            popup,
+            params
+          },
+          setAccountManagerState,
+          type
+        )) || {};
+
+      setPopupOpen(false);
+      if (error && error.code === 'access_denied') {
+        onAuthCancelled();
+      }
+      if (success && account) {
+        console.log('here');
+        onAccountAdded();
+      }
     },
     [managerOptions, managerName]
   );
@@ -165,7 +210,7 @@ const useAccountManager = (
     const { username } = user || {};
 
     if (appId && portalHostname) {
-      const portalUrl = `https://${portalHostname}/sharing`;
+      const portalUrl = `https://${portalHostname}/sharing/rest`;
       const clientId = appId;
       const { authProps } = accountManagerState.status || {};
       const { redirectUri, popup } = authProps || { popup: false };
@@ -221,7 +266,7 @@ const useAccountManager = (
         const { username } = user || {};
 
         if (appId && portalHostname) {
-          const portalUrl = `https://${portalHostname}/sharing`;
+          const portalUrl = `https://${portalHostname}/sharing/rest`;
           const clientId = appId;
           const { authProps } = accountManagerState.status || {};
           const { redirectUri, popup } = authProps || { popup: false };
@@ -360,6 +405,7 @@ const useAccountManager = (
 
   return {
     accountManagerState,
+    popupOpen,
     addAccount,
     logoutAccount,
     logoutAllAccounts,
@@ -390,7 +436,7 @@ useAccountManager.defaultProps = {
   options: {
     clientId: null,
     redirectUri: null,
-    portalUrl: 'https://www.arcgis.com/sharing',
+    portalUrl: 'https://www.arcgis.com/sharing/rest',
     popup: false,
     params: { force_login: false }
   }