♻️(frontend) Refactor Auth component for improved redirection logic

Move redirects from render
to a guarded useEffect
to avoid triggering multiple redirects
on every re-render.

Author: rvveber

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 
 ### Changed
 
+- ♻️(frontend) Refactor Auth component for improved redirection logic #1461
 - ♻️(frontend) replace Arial font-family with token font #1411
 - ♿(frontend) improve accessibility:
   - ♿(frontend) enable enter key to open documentss #1354

src/frontend/apps/impress/src/features/auth/components/Auth.tsx

@@ -1,6 +1,6 @@
 import { Loader } from '@openfun/cunningham-react';
 import { useRouter } from 'next/router';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 
 import { Box } from '@/components';
 import { useConfig } from '@/core';
@@ -15,51 +15,63 @@ export const Auth = ({ children }: PropsWithChildren) => {
   const { replace, pathname } = useRouter();
   const { data: config } = useConfig();
 
-  if (isLoading && !isFetchedAfterMount) {
-    return (
-      <Box $height="100vh" $width="100vw" $align="center" $justify="center">
-        <Loader />
-      </Box>
-    );
-  }
+  const [isRedirectingToLogin, setIsRedirectingToLogin] = useState(false);
 
   /**
-   * If the user is authenticated and wanted initially to access a document,
-   * we redirect to the document page.
+   * If the user is authenticated and initially wanted to access a specific page, redirect them to that page now.
    */
-  if (authenticated) {
+  useEffect(() => {
+    if (!authenticated) {
+      return;
+    }
+
     const authUrl = getAuthUrl();
     if (authUrl) {
       void replace(authUrl);
-      return (
-        <Box $height="100vh" $width="100vw" $align="center" $justify="center">
-          <Loader />
-        </Box>
-      );
+      return;
     }
-  }
+
+    if (pathname === HOME_URL) {
+      void replace('/');
+    }
+  }, [authenticated, pathname, replace]);
 
   /**
    * If the user is not authenticated and the path is not allowed, we redirect to the login page.
    */
-  if (!authenticated && !pathAllowed) {
-    if (config?.FRONTEND_HOMEPAGE_FEATURE_ENABLED) {
-      void replace(HOME_URL);
-    } else {
-      gotoLogin();
+  useEffect(() => {
+    if (isLoading || authenticated) {
+      return;
     }
-    return (
-      <Box $height="100vh" $width="100vw" $align="center" $justify="center">
-        <Loader />
-      </Box>
-    );
-  }
 
-  /**
-   * If the user is authenticated and the path is the home page, we redirect to the index.
-   */
-  if (pathname === HOME_URL && authenticated) {
-    void replace('/');
+    if (!authenticated && !pathAllowed) {
+      if (config?.FRONTEND_HOMEPAGE_FEATURE_ENABLED) {
+        if (pathname !== HOME_URL) {
+          void replace(HOME_URL);
+        }
+      } else {
+        if (!isRedirectingToLogin) {
+          setIsRedirectingToLogin(true);
+          gotoLogin();
+        }
+      }
+    }
+  }, [
+    authenticated,
+    pathAllowed,
+    config?.FRONTEND_HOMEPAGE_FEATURE_ENABLED,
+    replace,
+    isLoading,
+    isRedirectingToLogin,
+    pathname,
+  ]);
+
+  const shouldShowLoader =
+    (isLoading && !isFetchedAfterMount) ||
+    isRedirectingToLogin ||
+    (!authenticated && !pathAllowed);
+
+  if (shouldShowLoader) {
     return (
       <Box $height="100vh" $width="100vw" $align="center" $justify="center">
         <Loader />

src/frontend/apps/impress/src/features/auth/conf.ts

@@ -1,6 +1,6 @@
 import { baseApiUrl } from '@/api';
 
-export const HOME_URL = '/home';
+export const HOME_URL: string = '/home';
 export const LOGIN_URL = `${baseApiUrl()}authenticate/`;
 export const LOGOUT_URL = `${baseApiUrl()}logout/`;
 export const PATH_AUTH_LOCAL_STORAGE = 'docs-path-auth';