julienfroidefond/iag-dev-evaluator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate authentication session into Header component
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 4m46s
Details

Browse Source 
- Updated RootLayout to fetch the authentication session and pass it to the Header component.
- Modified Header to accept session as a prop, enhancing user experience by displaying user-specific information and sign-out functionality.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Froidefond
2026-02-25 14:16:41 +01:00
parent 2d8d59322d
commit e4a4e5a869
3 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/layout.tsx
View File

@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { auth } from "@/auth";
import { Header } from "@/components/Header";
import { ThemeProvider } from "@/components/ThemeProvider";
import { SessionProvider } from "@/components/SessionProvider";
@@ -26,17 +27,18 @@ export const metadata: Metadata = {
manifest: "/manifest.json",
};
export default function RootLayout({
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const session = await auth();
return (
<html lang="fr" suppressHydrationWarning>
<body className={`${geistSans.variable} ${geistMono.variable} min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-50 antialiased`}>
<SessionProvider>
<ThemeProvider>
<Header />
<Header session={session} />
<main className="mx-auto max-w-7xl px-4 py-6">{children}</main>
</ThemeProvider>
</SessionProvider>

26
src/components/Header.tsx
View File

@@ -1,12 +1,9 @@
"use client";
import Link from "next/link";
import { signOut, useSession } from "next-auth/react";
import type { Session } from "next-auth";
import { ThemeToggle } from "./ThemeToggle";
import { SignOutButton } from "./SignOutButton";
export function Header() {
const { data: session, status } = useSession();
export function Header({ session }: { session: Session | null }) {
return (
<header className="sticky top-0 z-50 border-b border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm dark:shadow-none backdrop-blur-sm">
<div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-4">
@@ -17,7 +14,7 @@ export function Header() {
iag-eval
</Link>
<nav className="flex items-center gap-6 font-mono text-xs">
{status === "authenticated" ? (
{session ? (
<>
<Link
href="/dashboard"
@@ -31,7 +28,7 @@ export function Header() {
>
/new
</Link>
{session?.user?.role === "admin" && (
{session.user.role === "admin" && (
<Link
href="/admin"
className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
@@ -46,18 +43,9 @@ export function Header() {
/paramètres
</Link>
<span className="text-zinc-400 dark:text-zinc-500">
{session?.user?.email}
{session.user.email}
</span>
<button
type="button"
onClick={async () => {
await signOut({ redirect: false });
window.location.href = "/auth/login";
}}
className="text-zinc-500 hover:text-red-500 dark:text-zinc-400 dark:hover:text-red-400 transition-colors"
>
déconnexion
</button>
<SignOutButton />
</>
) : (
<Link

18
src/components/SignOutButton.tsx Normal file
View File

@@ -0,0 +1,18 @@
"use client";
import { signOut } from "next-auth/react";
export function SignOutButton() {
return (
<button
type="button"
onClick={async () => {
await signOut({ redirect: false });
window.location.href = "/auth/login";
}}
className="text-zinc-500 hover:text-red-500 dark:text-zinc-400 dark:hover:text-red-400 transition-colors"
>
déconnexion
</button>
);
}