chore: WIP uilisant d'un CSRF global à l'appli

Front-End/src/app/[locale]/users/login/page.js

@@ -1,7 +1,6 @@
 'use client'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import DjangoCSRFToken from '@/components/DjangoCSRFToken'
-
 import Logo from '@/components/Logo';
 import { useSearchParams, useRouter } from 'next/navigation'
 import InputTextIcon from '@/components/InputTextIcon';
@@ -9,13 +8,11 @@ import Loader from '@/components/Loader'; // Importez le composant Loader
 import Button from '@/components/Button'; // Importez le composant Button
 import { User, KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
 import {
-    FE_ADMIN_SUBSCRIPTIONS_EDIT_URL,
-    FE_ADMIN_SUBSCRIPTIONS_URL,
-    FE_PARENTS_HOME_URL,
-    FE_USERS_NEW_PASSWORD_URL } from '@/utils/Url';
+    FE_USERS_NEW_PASSWORD_URL,
+    BE_AUTH_INFO_SESSION } from '@/utils/Url';
 import useLocalStorage from '@/hooks/useLocalStorage';
-import useCsrfToken from '@/hooks/useCsrfToken';
-import { login } from '@/app/lib/authAction';
+import { signIn } from 'next-auth/react';
+import { useCsrfToken } from '@/context/CsrfContext'; // Importez le hook useCsrfToken
 
 const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
 
@@ -30,77 +27,38 @@ export default function Page() {
     const [userId, setUserId] = useLocalStorage("userId", '') ;
 
     const router = useRouter();
-    const csrfToken = useCsrfToken();
-
+    const csrfToken = useCsrfToken(); // Utilisez le hook useCsrfToken
 
     function isOK(data) {
         return data.errorMessage === ""
     }
 
     function handleFormLogin(formData) {
-        if (useFakeData) {
-            // Simuler une réponse réussie
-            const data = {
-                errorFields: {},
-                errorMessage: "",
-                profil: "fakeProfileId"
-            };
-            setUserFieldError("")
-            setPasswordFieldError("")
-            setErrorMessage("")
-            if(isOK(data)){
-                localStorage.setItem('userId', data.profil); // Stocker l'identifiant de l'utilisateur
-                router.push(`${FE_ADMIN_SUBSCRIPTIONS_EDIT_URL}?id=${data.profil}`);
-            } else {
-                if(data.errorFields){
-                    setUserFieldError(data.errorFields.email)
-                    setPasswordFieldError(data.errorFields.password);
-                }
-                if(data.errorMessage){
-                    setErrorMessage(data.errorMessage)
-                }
-            }
-        } else {
-            const data = {
-                email: formData.get('login'),
-                password: formData.get('password'),
-            }
-            login(data,csrfToken)
-            .then(data => {
-                console.log('Success:', data);
-                setUserFieldError("")
-                setPasswordFieldError("")
-                setErrorMessage("")
-                if(isOK(data)){
-                    localStorage.setItem('userId', data.profil); // Stocker l'identifiant de l'utilisateur
-                    if (data.droit == 0) {
-                        // Vue ECOLE
-                    } else if (data.droit == 1) {
-                        // Vue ADMIN
-                        router.push(`${FE_ADMIN_SUBSCRIPTIONS_URL}`);
-                    } else if (data.droit == 2) {
-                        // Vue PARENT
-                        router.push(`${FE_PARENTS_HOME_URL}`);
-                    } else {
-                        // Cas anormal
-                    }
+        setIsLoading(true);
+        console.log('Form Data', Object.fromEntries(formData.entries())); // Affichez les entrées du FormData
+        console.log('csrf passé ', csrfToken); // Affichez le token CSRF
 
-                } else {
-                    if(data.errorFields){
-                        setUserFieldError(data.errorFields.email)
-                        setPasswordFieldError(data.errorFields.password);
-                    }
-                    if(data.errorMessage){
-                        setErrorMessage(data.errorMessage)
-                    }
-                }
-            })
-            .catch(error => {
-                console.error('Error fetching data:', error);
-                error = error.message;
-                console.log(error);
-            });
-        }
+        signIn('credentials', {
+            redirect: false,
+            email: formData.get('login'),
+            password: formData.get('password'),
+            csrfToken: csrfToken // Utilisez le token CSRF récupéré par le hook
+        })
+        .then(result => {
+            console.log('Sign In Result', result);
+            setIsLoading(false);
+
+            if (result.error) {
+                setErrorMessage(result.error);
+            } else {
+                router.push(result.url);
+            }
+        })
+        .catch(error => {
+            console.error('Error during sign in:', error);
+            setIsLoading(false);
+            setErrorMessage('An error occurred during sign in.');
+        });
     }
 
     if (isLoading === true) {

Front-End/src/app/layout.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { NextIntlClientProvider } from 'next-intl';
+import { CsrfProvider } from '@/context/CsrfContext'; // Importez le CsrfProvider
 
-import {getMessages} from 'next-intl/server';
+import { getMessages } from 'next-intl/server';
 import "@/css/tailwind.css";
 
 export const metadata = {
@@ -27,9 +28,11 @@ export default async function RootLayout({ children, params: { locale } }) {
   return (
     <html lang={locale}>
       <body>
-        <NextIntlClientProvider messages={messages}>
-          {children}
-        </NextIntlClientProvider>
+        <CsrfProvider> {/* Enveloppez votre application avec le CsrfProvider */}
+          <NextIntlClientProvider messages={messages}>
+            {children}
+          </NextIntlClientProvider>
+        </CsrfProvider>
       </body>
     </html>
   );

Front-End/src/app/lib/authAction.js

@@ -25,8 +25,8 @@ const requestResponseHandler = async (response) => {
   throw error;
 }
 
-
 export const login = (data, csrfToken) => {
+  console.log('data', data);
   const request = new Request(
       `${BE_AUTH_LOGIN_URL}`,
       {