🚧(frontend) implement Mozilla Django OIDC returnTo for login flow

Use returnTo capability to pass target URL during authentication, eliminating
redundant renders when returning to app. Work around Next.js router limitations
(can't pass data when replacing URL) by adding temporary target parameter.

Discovered issue: 401 responses on document fetch trigger retry loop instead
of redirecting to login. Will address in subsequent commits.

Author: lebaudantoine

src/backend/impress/settings.py

@@ -551,6 +551,9 @@ class Base(Configuration):
         environ_name="OIDC_STORE_REFRESH_TOKEN_KEY",
         environ_prefix=None,
     )
+    OIDC_REDIRECT_FIELD_NAME = values.Value(
+        "returnTo", environ_name="OIDC_REDIRECT_FIELD_NAME", environ_prefix=None
+    )
 
     # WARNING: Enabling this setting allows multiple user accounts to share the same email
     # address. This may cause security issues and is not recommended for production use when

src/frontend/apps/impress/src/core/AppProvider.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
 import { useCunninghamTheme } from '@/cunningham';
-import { Auth, KEY_AUTH, setAuthUrl } from '@/features/auth';
+import { Auth, KEY_AUTH } from '@/features/auth';
 import { useResponsiveStore } from '@/stores/';
 
 import { ConfigProvider } from './config/';
@@ -51,8 +51,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
             void queryClient.resetQueries({
               queryKey: [KEY_AUTH],
             });
-            setAuthUrl();
-            void replace(`/401`);
+            void replace(
+              `/401?returnTo=${encodeURIComponent(window.location.pathname)}`,
+            );
           }
         },
       },

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

@@ -7,7 +7,7 @@ import { useConfig } from '@/core';
 
 import { HOME_URL } from '../conf';
 import { useAuth } from '../hooks';
-import { getAuthUrl, gotoLogin } from '../utils';
+import { gotoLogin } from '../utils';
 
 export const Auth = ({ children }: PropsWithChildren) => {
   const { isLoading, pathAllowed, isFetchedAfterMount, authenticated } =
@@ -23,21 +23,22 @@ export const Auth = ({ children }: PropsWithChildren) => {
     );
   }
 
+  // todo - clarify this trick.
   /**
-   * If the user is authenticated and wanted initially to access a document,
-   * we redirect to the document page.
-   */
-  if (authenticated) {
-    const authUrl = getAuthUrl();
-    if (authUrl) {
-      void replace(authUrl);
-      return (
-        <Box $height="100vh" $width="100vw" $align="center" $justify="center">
-          <Loader />
-        </Box>
-      );
-    }
-  }
+  //  * If the user is authenticated and wanted initially to access a document,
+  //  * we redirect to the document page.
+  //  */
+  // if (authenticated) {
+  //   const authUrl = getAuthUrl();
+  //   if (authUrl) {
+  //     void replace(authUrl);
+  //     return (
+  //       <Box $height="100vh" $width="100vw" $align="center" $justify="center">
+  //         <Loader />
+  //       </Box>
+  //     );
+  //   }
+  // }
 
   /**
    * If the user is not authenticated and the path is not allowed, we redirect to the login page.

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

@@ -1,27 +1,12 @@
 import { terminateCrispSession } from '@/services/Crisp';
 
-import { LOGIN_URL, LOGOUT_URL, PATH_AUTH_LOCAL_STORAGE } from './conf';
+import { LOGIN_URL, LOGOUT_URL } from './conf';
+import { backendUrl } from "@/api";
 
-export const getAuthUrl = () => {
-  const path_auth = localStorage.getItem(PATH_AUTH_LOCAL_STORAGE);
-  if (path_auth) {
-    localStorage.removeItem(PATH_AUTH_LOCAL_STORAGE);
-    return path_auth;
-  }
-};
-
-export const setAuthUrl = () => {
-  if (window.location.pathname !== '/') {
-    localStorage.setItem(PATH_AUTH_LOCAL_STORAGE, window.location.pathname);
-  }
-};
-
-export const gotoLogin = (withRedirect = true) => {
-  if (withRedirect) {
-    setAuthUrl();
-  }
 
-  window.location.replace(LOGIN_URL);
+export const gotoLogin = (returnTo = '/') => {
+  const authenticateUrl = LOGIN_URL + `?returnTo=${backendUrl() + returnTo}`
+  window.location.replace(authenticateUrl);
 };
 
 export const gotoLogout = () => {

src/frontend/apps/impress/src/pages/401.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@openfun/cunningham-react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { ReactElement, useEffect } from 'react';
+import {ReactElement, useEffect, useState} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import img401 from '@/assets/icons/icon-401.png';
@@ -13,7 +13,19 @@ import { NextPageWithLayout } from '@/types/next';
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
   const { authenticated } = useAuth();
-  const { replace } = useRouter();
+  const router = useRouter();
+  const { replace } = router;
+
+  const [returnTo, setReturnTo] = useState<string | undefined>(undefined)
+  const { returnTo: returnToParams } = router.query;
+
+
+  useEffect(() => {
+    if (returnToParams) {
+      setReturnTo(returnToParams as string)
+      void replace('/401')
+    }
+  }, [returnToParams]);
 
   useEffect(() => {
     if (authenticated) {
@@ -42,7 +54,7 @@ const Page: NextPageWithLayout = () => {
           {t('Log in to access the document.')}
         </Text>
 
-        <Button onClick={() => gotoLogin(false)} aria-label={t('Login')}>
+        <Button onClick={() => gotoLogin(returnTo)} aria-label={t('Login')}>
           {t('Login')}
         </Button>
       </Box>

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -14,7 +14,7 @@ import {
   useDoc,
   useDocStore,
 } from '@/docs/doc-management/';
-import { KEY_AUTH, setAuthUrl } from '@/features/auth';
+import { KEY_AUTH } from '@/features/auth';
 import { MainLayout } from '@/layouts';
 import { useBroadcastStore } from '@/stores';
 import { NextPageWithLayout } from '@/types/next';
@@ -115,8 +115,9 @@ const DocPage = ({ id }: DocProps) => {
       void queryClient.resetQueries({
         queryKey: [KEY_AUTH],
       });
-      setAuthUrl();
-      void replace(`/401`);
+      void replace(
+        `/401?returnTo=${encodeURIComponent(window.location.pathname)}`,
+      );
       return null;
     }