From 5a70cc2ad783fa59984d6760a10cbbf59f6d66ad Mon Sep 17 00:00:00 2001
From: Kevin <k.besson@clm.foundation>
Date: Thu, 20 Feb 2025 18:29:51 +0100
Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20la=20gestion=20des?=
 =?UTF-8?q?=20utilisateurs=20dans=20NextAuth=20:=20ajout=20des=20champs=20?=
 =?UTF-8?q?pr=C3=A9nom,=20nom,=20nom=20d'utilisateur=20et=20mise=20=C3=A0?=
 =?UTF-8?q?=20jour=20des=20r=C3=B4les=20dans=20le=20profil=20utilisateur.?=
 =?UTF-8?q?=20Am=C3=A9lioration=20de=20l'affichage=20des=20informations=20?=
 =?UTF-8?q?utilisateur=20dans=20le=20composant=20MainNav.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/app/api/auth/[...nextauth]/route.ts | 26 ++++++++++++---------
 front/components/main-nav.tsx             | 28 +++++++++++++++++------
 front/types/next-auth.d.ts                | 14 ++++++++++--
 3 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/front/app/api/auth/[...nextauth]/route.ts b/front/app/api/auth/[...nextauth]/route.ts
index 575431e..e17af22 100644
--- a/front/app/api/auth/[...nextauth]/route.ts
+++ b/front/app/api/auth/[...nextauth]/route.ts
@@ -11,33 +11,37 @@ export const authOptions: NextAuthOptions = {
       profile(profileData) {
         return {
           id: profileData.sub,
-          name: profileData.name || profileData.preferred_username,
+          first_name: profileData.given_name,
+          last_name: profileData.family_name,
+          username: profileData.preferred_username,
           email: profileData.email,
-          image: null,
-          // Extraction du rôle ou groupe de l'utilisateur depuis Keycloak
-          role: Array.isArray(profileData.realm_access?.roles)
-            ? profileData.realm_access.roles
-            : [],
+          role: profileData.realm_roles,
         };
       },
     }),
   ],
   callbacks: {
     async jwt({ token, account, profile }) {
+      console.log("Token", token);
+      console.log("Account", account);
+      console.log("Profile", profile);
       // Au moment de la première connexion, sauvegarde de l'access token et du rôle dans le JWT
       if (account && profile) {
         token.accessToken = account.access_token;
-        token.role = profile.role;
+        token.first_name = profile.given_name;
+        token.last_name = profile.family_name;
+        token.username = profile.preferred_username;
+        token.role = profile.realm_roles;
       }
       return token;
     },
     async session({ session, token }) {
       // On injecte l'access token et le rôle dans la session accessible côté client
       session.accessToken = token.accessToken as string;
-      session.user.role =
-        typeof token.role == "string" || Array.isArray(token.role)
-          ? token.role
-          : [];
+      session.user.first_name = token.first_name as string;
+      session.user.last_name = token.last_name as string;
+      session.user.username = token.username as string;
+      session.user.role = token.role as string[];
       return session;
     },
   },
diff --git a/front/components/main-nav.tsx b/front/components/main-nav.tsx
index fe89ddc..4172030 100644
--- a/front/components/main-nav.tsx
+++ b/front/components/main-nav.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Calendar,
   MessageSquare,
@@ -17,6 +17,8 @@ export function MainNav() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const { data: session } = useSession();
 
+  console.log(session);
+
   return (
     <>
       <div className='flex items-center justify-between p-4 bg-black'>
@@ -70,13 +72,25 @@ export function MainNav() {
             <Bell className='w-6 h-6' />
           </Link>
         </div>
-        <div className='cursor-pointer text-white/80 hover:text-white'>
-          {session ? (
-            <span>{session.user.name}</span>
-          ) : (
+        {session ? (
+          <div className='flex items-center space-x-4'>
+            <div className='cursor-pointer text-white/80 hover:text-white'>
+              <span>
+                {session.user.first_name} {session.user.last_name} -{" "}
+                {session.user.role.includes("admin") ? "Admin" : ""}
+                {session.user.role.includes("TEACHERS") ? "Teacher" : ""}
+                {session.user.role.includes("STUDENTS") ? "Student" : ""}
+              </span>
+            </div>
+            <div className='cursor-pointer text-white/80 hover:text-white'>
+              <Link href='/api/auth/signout'>Logout</Link>
+            </div>
+          </div>
+        ) : (
+          <div className='cursor-pointer text-white/80 hover:text-white'>
             <Link href='/api/auth/signin'>Login</Link>
-          )}
-        </div>
+          </div>
+        )}
       </div>
       <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
     </>
diff --git a/front/types/next-auth.d.ts b/front/types/next-auth.d.ts
index ceb6b50..66950b2 100644
--- a/front/types/next-auth.d.ts
+++ b/front/types/next-auth.d.ts
@@ -3,13 +3,20 @@ import NextAuth, { DefaultSession, DefaultUser } from "next-auth";
 declare module "next-auth" {
   interface Session {
     user: {
-      role?: string[] | string | null;
+      first_name: string;
+      last_name: string;
+      email: string;
+      username: string;
+      role: string[];
     } & DefaultSession["user"];
     accessToken?: string;
   }
 
   interface JWT {
     accessToken?: string;
+    first_name?: string;
+    last_name?: string;
+    username?: string;
     role?: string[] | string | null;
   }
 
@@ -18,6 +25,9 @@ declare module "next-auth" {
   }
 
   interface Profile {
-    role?: string[] | string | null;
+    given_name: string;
+    family_name: string;
+    preferred_username: string;
+    realm_roles: string[];
   }
 }