feat: add proper dependency arrays to Authentication effect functions

Orfium · Nov 13, 2023 · 5db14c3 · 5db14c3
1 parent 7793872
commit 5db14c3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 39 deletions.
diff --git a/src/providers/Authentication.tsx b/src/providers/Authentication.tsx
@@ -27,6 +27,40 @@ export function Authentication({ children }: AuthenticationProps) {
 
   const invitation = params.get('invitation');
 
+  const loginWithRedirect = useCallback(
+    async (o: RedirectLoginOptions) => {
+      try {
+        const client = await getAuth0Client();
+        await client.loginWithRedirect(o);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    [handleError]
+  );
+
+  const getAccessTokenSilently = useCallback(
+    async (opts?: GetTokenSilentlyOptions) => {
+      try {
+        const result = await getTokenSilently(opts);
+
+        return result;
+      } catch (error: any) {
+        if (error?.error === 'login_required' || error?.error === 'consent_required') {
+          return loginWithRedirect({
+            authorizationParams: {
+              organization: organization || undefined,
+              invitation: invitation || undefined,
+            },
+          });
+        }
+
+        handleError(error);
+      }
+    },
+    [handleError, invitation, loginWithRedirect, organization]
+  );
+
   useEffect(() => {
     (async () => {
       try {
@@ -68,45 +102,11 @@ export function Authentication({ children }: AuthenticationProps) {
         handleError(error);
       }
     })();
-  }, []);
-
-  const loginWithRedirect = useCallback(
-    async (o: RedirectLoginOptions) => {
-      try {
-        const client = await getAuth0Client();
-        await client.loginWithRedirect(o);
-      } catch (error) {
-        return handleError(error);
-      }
-    },
-    [handleError]
-  );
-
-  const getAccessTokenSilently = useCallback(
-    async (opts?: GetTokenSilentlyOptions) => {
-      try {
-        const result = await getTokenSilently(opts);
-
-        return result;
-      } catch (error: any) {
-        if (error?.error === 'login_required' || error?.error === 'consent_required') {
-          return loginWithRedirect({
-            authorizationParams: {
-              organization: organization || undefined,
-              invitation: invitation || undefined,
-            },
-          });
-        }
-
-        handleError(error);
-      }
-    },
-    [handleError, invitation, loginWithRedirect, organization]
-  );
+  }, [handleError, invitation, loginWithRedirect, organization]);
 
   useEffect(() => {
-    const searchParams = new URL(window.location.href).searchParams;
-    if (!isLoading && !isAuthenticated && isAuthenticated !== undefined) {
+    if (!isLoading && !isAuthenticated) {
+      const searchParams = new URL(window.location.href).searchParams;
       const error = searchParams.get('error');
 
       if (error === 'access_denied') {
@@ -123,7 +123,15 @@ export function Authentication({ children }: AuthenticationProps) {
         });
       }
     }
-  }, [auth0Client, isLoading, isAuthenticated]);
+  }, [
+    _switchOrganization,
+    invitation,
+    isAuthenticated,
+    isLoading,
+    loginWithRedirect,
+    organization,
+    organizations,
+  ]);
 
   return (
     <AuthenticationContext.Provider
@@ -132,7 +140,7 @@ export function Authentication({ children }: AuthenticationProps) {
         isLoading,
         loginWithRedirect,
         logout: logoutAuth,
-        getAccessTokenSilently,
+        getAccessTokenSilently: (opts?: GetTokenSilentlyOptions) => getAccessTokenSilently(opts),
         user,
       }}
     >

diff --git a/src/providers/Toolbox/Toolbox.tsx b/src/providers/Toolbox/Toolbox.tsx
@@ -59,9 +59,11 @@ function AuthenticationWrapper({ children }: { children: ReactNode }) {
    * - in case of no organization id pass the first fetched organization from the above list and re-fetch a token
    */
   useEffect(() => {
+    // console.log(1);
     if (!systemLoading && !isLoading) {
       setSystemLoading(true);
       (async () => {
+        // console.log(2);
         // moving this will affect the app. If this is moved below when clearing the storage the app constantly refresh
         const response = await getAccessTokenSilently();
         // @TODO in the future we must define the org_id