🐛(frontend) fix redirection after login

The redirection after login was not working properly.
The user was redirected to the home page
instead of the page he was trying to access.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -1,18 +1,14 @@
 import { Page, expect } from '@playwright/test';
 
 export const keyCloakSignIn = async (page: Page, browserName: string) => {
-  const title = await page.locator('h1').first().textContent({
-    timeout: 5000,
-  });
-
   const login = `user-e2e-${browserName}`;
   const password = `password-e2e-${browserName}`;
 
   if (await page.getByLabel('Restart login').isVisible()) {
     await page.getByRole('textbox', { name: 'password' }).fill(password);
 
     await page.click('input[type="submit"]', { force: true });
-  } else if (title?.includes('Sign in to your account')) {
+  } else {
     await page.getByRole('textbox', { name: 'username' }).fill(login);
 
     await page.getByRole('textbox', { name: 'password' }).fill(password);

src/frontend/apps/e2e/__tests__/app-impress/doc-routing.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { keyCloakSignIn } from './common';
+import { keyCloakSignIn, mockedDocument } from './common';
 
 test.describe('Doc Routing', () => {
   test.beforeEach(async ({ page }) => {
@@ -43,9 +43,12 @@ test.describe('Doc Routing: Not loggued', () => {
     page,
     browserName,
   }) => {
+    await mockedDocument(page, { link_reach: 'public' });
     await page.goto('/docs/mocked-document-id/');
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+    await page.getByRole('button', { name: 'Login' }).click();
     await keyCloakSignIn(page, browserName);
-    await expect(page).toHaveURL(/\/docs\/mocked-document-id\/$/);
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
   });
 
   test('The homepage redirects to login.', async ({ page }) => {

src/frontend/apps/impress/src/core/auth/Auth.tsx

@@ -17,8 +17,9 @@ import { useAuthStore } from './useAuthStore';
 const regexpUrlsAuth = [/\/docs\/$/g, /^\/$/g];
 
 export const Auth = ({ children }: PropsWithChildren) => {
-  const { initAuth, initiated, authenticated, login } = useAuthStore();
-  const { asPath } = useRouter();
+  const { initAuth, initiated, authenticated, login, getAuthUrl } =
+    useAuthStore();
+  const { asPath, replace } = useRouter();
 
   const [pathAllowed, setPathAllowed] = useState<boolean>(
     !regexpUrlsAuth.some((regexp) => !!asPath.match(regexp)),
@@ -41,6 +42,18 @@ export const Auth = ({ children }: PropsWithChildren) => {
     login();
   }, [authenticated, pathAllowed, login, initiated]);
 
+  // Redirect to the path before login
+  useEffect(() => {
+    if (!authenticated) {
+      return;
+    }
+
+    const authUrl = getAuthUrl();
+    if (authUrl) {
+      void replace(authUrl);
+    }
+  }, [authenticated, getAuthUrl, replace]);
+
   if ((!initiated && pathAllowed) || (!authenticated && !pathAllowed)) {
     return (
       <Box $height="100vh" $width="100vw" $align="center" $justify="center">

src/frontend/apps/impress/src/core/auth/useAuthStore.tsx

@@ -11,6 +11,8 @@ interface AuthStore {
   initAuth: () => void;
   logout: () => void;
   login: () => void;
+  setAuthUrl: (url: string) => void;
+  getAuthUrl: () => string | undefined;
   userData?: User;
 }
 
@@ -20,22 +22,13 @@ const initialState = {
   userData: undefined,
 };
 
-export const useAuthStore = create<AuthStore>((set) => ({
+export const useAuthStore = create<AuthStore>((set, get) => ({
   initiated: initialState.initiated,
   authenticated: initialState.authenticated,
   userData: initialState.userData,
-
   initAuth: () => {
     getMe()
       .then((data: User) => {
-        // If a path is stored in the local storage, we redirect to it
-        const path_auth = localStorage.getItem(PATH_AUTH_LOCAL_STORAGE);
-        if (path_auth) {
-          localStorage.removeItem(PATH_AUTH_LOCAL_STORAGE);
-          window.location.replace(path_auth);
-          return;
-        }
-
         set({ authenticated: true, userData: data });
       })
       .catch(() => {})
@@ -44,15 +37,26 @@ export const useAuthStore = create<AuthStore>((set) => ({
       });
   },
   login: () => {
-    // If we try to access a specific page and we are not authenticated
-    // we store the path in the local storage to redirect to it after login
-    if (window.location.pathname !== '/') {
-      localStorage.setItem(PATH_AUTH_LOCAL_STORAGE, window.location.pathname);
-    }
+    get().setAuthUrl(window.location.pathname);
 
     window.location.replace(`${baseApiUrl()}authenticate/`);
   },
   logout: () => {
     window.location.replace(`${baseApiUrl()}logout/`);
   },
+  // If we try to access a specific page and we are not authenticated
+  // we store the path in the local storage to redirect to it after login
+  setAuthUrl() {
+    if (window.location.pathname !== '/') {
+      localStorage.setItem(PATH_AUTH_LOCAL_STORAGE, window.location.pathname);
+    }
+  },
+  // If a path is stored in the local storage, we return it then remove it
+  getAuthUrl() {
+    const path_auth = localStorage.getItem(PATH_AUTH_LOCAL_STORAGE);
+    if (path_auth) {
+      localStorage.removeItem(PATH_AUTH_LOCAL_STORAGE);
+      return path_auth;
+    }
+  },
 }));