Mise à jour de la gestion des utilisateurs dans NextAuth : ajout des champs prénom, nom, nom d'utilisateur et mise à jour des rôles dans le profil utilisateur. Amélioration de l'affichage des informations utilisateur dans le composant MainNav.

.gitignore

@@ -1,11 +1,16 @@
-# NextJS
+# Dépendances
 node_modules
+
+# NextJS
 .next
 
-# Cursor
-.cursordirectory
-
-# Dev
-copy.sh
+# Environnement
 .env.development
+
+# IDE et éditeurs
+.cursordirectory
+.vscode
+
+# Scripts de développement
+copy.sh
 start.sh

ansible/playbooks/1_docker.yml

@@ -9,6 +9,8 @@
     git_dest: "/opt/Neah-Enkun"
     git_branch: "master"
     traefik_service_name: "traefik"
+    packages:
+      - jq
     docker_packages:
       - apt-transport-https
       - ca-certificates
@@ -33,6 +35,15 @@
       delay: 5
 
   tasks:
+    - name: Installation de packages supplémentaires
+      apt:
+        name: "{{ packages }}"
+        state: present
+      register: pkg_status
+      until: pkg_status is success
+      retries: 3
+      delay: 5
+
     - name: Installer les dépendances pour Docker
       apt:
         name: "{{ docker_packages }}"

ansible/playbooks/3_keycloak.yml

@@ -33,6 +33,16 @@
       - account/view-profile
     student_permissions:
       - master-realm/view-users
+    keycloak_client:
+      client_id: "front"
+      client_secret: "Klsbm7hzyXscypXU0wUPPVBrttFPt6Pn"
+      root_url: "http://neah.local/"
+      redirect_uris:
+        - "http://neah.local/*"
+        - "http://localhost:3000/*"
+      web_origins:
+        - "http://neah.local"
+        - "http://localhost:3000"
 
   tasks:
     - name: Lancer le service Keycloak
@@ -130,6 +140,69 @@
           debug:
             msg: "Erreur lors de l'attribution des permissions aux rôles"
 
+    - name: Configurer le client front
+      block:
+        - name: Créer le client
+          shell: >
+            docker exec {{ keycloak_container }} {{ keycloak_bin }} create clients -r {{ keycloak_realm }}
+            -s clientId={{ keycloak_client.client_id }}
+            -s secret={{ keycloak_client.client_secret }}
+            -s protocol=openid-connect
+            -s publicClient=false
+            -s authorizationServicesEnabled=true
+            -s serviceAccountsEnabled=true
+            -s standardFlowEnabled=true
+            -s implicitFlowEnabled=true
+            -s directAccessGrantsEnabled=true
+            -s rootUrl={{ keycloak_client.root_url }}
+            -s baseUrl={{ keycloak_client.root_url }}
+            -s 'redirectUris=["{{ keycloak_client.redirect_uris | join('","') }}"]'
+            -s 'webOrigins=["{{ keycloak_client.web_origins | join('","') }}"]'
+          register: create_client
+          until: create_client is success
+          retries: 3
+          delay: 5
+      when: check_config.rc != 0
+      rescue:
+        - name: Gérer les erreurs de création du client
+          debug:
+            msg: "Erreur lors de la création du client front"
+
+    - name: Configurer le Client Scope Profile
+      block:
+        - name: Récupérer l'ID du scope profile
+          shell: |
+            ID=$(docker exec {{ keycloak_container }} {{ keycloak_bin }} get client-scopes -r {{ keycloak_realm }} --fields id,name --format json | jq -r '.[] | select(.name=="profile") | .id')
+            echo $ID
+          register: profile_scope_id
+          until: profile_scope_id.stdout != ""
+          retries: 3
+          delay: 5
+
+        - name: Ajouter le Mapper realm roles au scope profile
+          shell: >
+            docker exec {{ keycloak_container }} {{ keycloak_bin }} create client-scopes/{{ profile_scope_id.stdout | trim }}/protocol-mappers/models
+            -r {{ keycloak_realm }}
+            -s name="realm roles"
+            -s protocol="openid-connect"
+            -s protocolMapper="oidc-usermodel-realm-role-mapper"
+            -s 'config."id.token.claim"=true'
+            -s 'config."access.token.claim"=true'
+            -s 'config."userinfo.token.claim"=true'
+            -s 'config."claim.name"="realm_roles"'
+            -s 'config."introspection.token.claim"=true'
+            -s 'config."multivalued"=true'
+          register: create_mapper
+          until: create_mapper is success
+          retries: 3
+          delay: 5
+          when: profile_scope_id.stdout != ""
+      when: check_config.rc != 0
+      rescue:
+        - name: Gérer les erreurs de configuration du mapper
+          debug:
+            msg: "Erreur lors de la configuration du mapper realm roles"
+
     - name: Supprimer l'administrateur temporaire
       block:
         - name: Récupérer les informations

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;
     },
   },

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>
-          ) : (
-            <Link href='/api/auth/signin'>Login</Link>
-          )}
+          <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>
       <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
     </>

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[];
   }
 }