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 type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import { auth } from "@/auth";
import { Header } from "@/components/Header"; import { Header } from "@/components/Header";
import { ThemeProvider } from "@/components/ThemeProvider"; import { ThemeProvider } from "@/components/ThemeProvider";
import { SessionProvider } from "@/components/SessionProvider"; import { SessionProvider } from "@/components/SessionProvider";
@@ -26,17 +27,18 @@ export const metadata: Metadata = {
manifest: "/manifest.json", manifest: "/manifest.json",
}; };
export default function RootLayout({ export default async function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const session = await auth();
return ( return (
<html lang="fr" suppressHydrationWarning> <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`}> <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> <SessionProvider>
<ThemeProvider> <ThemeProvider>
<Header /> <Header session={session} />
<main className="mx-auto max-w-7xl px-4 py-6">{children}</main> <main className="mx-auto max-w-7xl px-4 py-6">{children}</main>
</ThemeProvider> </ThemeProvider>
</SessionProvider> </SessionProvider>

26
src/components/Header.tsx
View File

@@ -1,12 +1,9 @@
"use client";
import Link from "next/link"; import Link from "next/link";
import { signOut, useSession } from "next-auth/react"; import type { Session } from "next-auth";
import { ThemeToggle } from "./ThemeToggle"; import { ThemeToggle } from "./ThemeToggle";
import { SignOutButton } from "./SignOutButton";
export function Header() { export function Header({ session }: { session: Session | null }) {
const { data: session, status } = useSession();
return ( 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"> <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"> <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 iag-eval
</Link> </Link>
<nav className="flex items-center gap-6 font-mono text-xs"> <nav className="flex items-center gap-6 font-mono text-xs">
{status === "authenticated" ? ( {session ? (
<> <>
<Link <Link
href="/dashboard" href="/dashboard"
@@ -31,7 +28,7 @@ export function Header() {
> >
/new /new
</Link> </Link>
{session?.user?.role === "admin" && ( {session.user.role === "admin" && (
<Link <Link
href="/admin" href="/admin"
className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors" 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 /paramètres
</Link> </Link>
<span className="text-zinc-400 dark:text-zinc-500"> <span className="text-zinc-400 dark:text-zinc-500">
{session?.user?.email} {session.user.email}
</span> </span>
<button <SignOutButton />
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>
</> </>
) : ( ) : (
<Link <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>
);
}