feat: integrate NextAuth.js for authentication, update database service to use better-sqlite3 adapter, and enhance header component with user session management

src/components/layout/Header.tsx

@@ -1,10 +1,14 @@
 'use client';
 
 import Link from 'next/link';
+import { useSession, signOut } from 'next-auth/react';
 import { useTheme } from '@/contexts/ThemeContext';
+import { useState } from 'react';
 
 export function Header() {
   const { theme, toggleTheme } = useTheme();
+  const { data: session, status } = useSession();
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
     <header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-sm">
@@ -15,12 +19,14 @@ export function Header() {
         </Link>
 
         <nav className="flex items-center gap-4">
-          <Link
-            href="/sessions"
-            className="text-muted transition-colors hover:text-foreground"
-          >
-            Mes Sessions
-          </Link>
+          {status === 'authenticated' && session?.user && (
+            <Link
+              href="/sessions"
+              className="text-muted transition-colors hover:text-foreground"
+            >
+              Mes Sessions
+            </Link>
+          )}
 
           <button
             onClick={toggleTheme}
@@ -29,9 +35,66 @@ export function Header() {
           >
             {theme === 'light' ? '🌙' : '☀️'}
           </button>
+
+          {status === 'loading' ? (
+            <div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
+          ) : status === 'authenticated' && session?.user ? (
+            <div className="relative">
+              <button
+                onClick={() => setMenuOpen(!menuOpen)}
+                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card px-3 transition-colors hover:bg-card-hover"
+              >
+                <span className="text-sm font-medium text-foreground">
+                  {session.user.name || session.user.email?.split('@')[0]}
+                </span>
+                <svg
+                  className={`h-4 w-4 text-muted transition-transform ${menuOpen ? 'rotate-180' : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+
+              {menuOpen && (
+                <>
+                  <div
+                    className="fixed inset-0 z-10"
+                    onClick={() => setMenuOpen(false)}
+                  />
+                  <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
+                    <div className="border-b border-border px-4 py-2">
+                      <p className="text-xs text-muted">Connecté en tant que</p>
+                      <p className="truncate text-sm font-medium text-foreground">
+                        {session.user.email}
+                      </p>
+                    </div>
+                    <button
+                      onClick={() => signOut({ callbackUrl: '/' })}
+                      className="w-full px-4 py-2 text-left text-sm text-destructive hover:bg-card-hover"
+                    >
+                      Se déconnecter
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
+          ) : (
+            <Link
+              href="/login"
+              className="flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
+            >
+              Connexion
+            </Link>
+          )}
         </nav>
       </div>
     </header>
   );
 }
-