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.

This commit is contained in:
Kevin 2025-02-20 18:29:51 +01:00
parent e1b2fd5394
commit 5a70cc2ad7
3 changed files with 48 additions and 20 deletions

View File

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

View File

@ -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)} />
</>

View File

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