Implement next-auth v5

components/header.tsx

@@ -5,25 +5,26 @@ import { buttonVariants } from '@/components/ui/button'
 import { Sidebar } from '@/components/sidebar'
 import { SidebarList } from '@/components/sidebar-list'
 import { IconGitHub, IconSeparator, IconVercel } from '@/components/ui/icons'
-import { UserButton, currentUser } from '@clerk/nextjs'
+
 import { SidebarFooter } from '@/components/sidebar-footer'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { ClearHistory } from '@/components/clear-history'
 import { clearChats } from '@/app/actions'
 import Link from 'next/link'
+import { auth } from '@/auth'
+import { UserMenu } from './ui/user-menu'
+import { LoginButton } from './login-button'
 
 export async function Header() {
-  const user = await currentUser()
-
+  const session = await auth()
   return (
-    <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b from-background/10 via-background/50 to-background/80 px-4 backdrop-blur-xl">
+    <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
       <div className="flex items-center">
-        {/* @ts-ignore */}
-        {user?.id ? (
+        {session?.user ? (
           <Sidebar>
             <Suspense fallback={<div className="flex-1 overflow-auto" />}>
               {/* @ts-ignore */}
-              <SidebarList userId={user?.id} />
+              <SidebarList userId={session?.user?.id} />
             </Suspense>
             <SidebarFooter>
               <ThemeToggle />
@@ -32,41 +33,12 @@ export async function Header() {
           </Sidebar>
         ) : (
           <Link href="https://vercel.com" target="_blank" rel="nofollow">
-            <IconVercel className="mr-2 h-6 w-6" />
+            <IconVercel className="w-6 h-6 mr-2" />
           </Link>
         )}
         <div className="flex items-center">
-          <IconSeparator className="h-6 w-6 text-muted-foreground/50" />
-          {user?.id ? (
-            <UserButton
-              showName
-              appearance={{
-                elements: {
-                  afterSignOutUrl: '/',
-                  avatarBox: 'w-6 h-6 rounded-full overflow-hidden',
-                  userButtonBox: 'flex-row-reverse',
-                  userButtonOuterIdentifier: 'text-primary',
-                  userButtonPopoverCard:
-                    'shadow-lg rounded-lg p-0 border border-border w-[200px] dark:bg-zinc-950 dark:text-zinc-50',
-                  userButtonPopoverFooter:
-                    'p-4 border-t border-border [&>*]:dark:text-zinc-600',
-                  userPreview: 'p-4 border-b border-border m-0',
-                  userButtonPopoverActionButton: 'px-1 gap-1',
-                  userButtonPopoverActionButtonText:
-                    'text-sm tracking-normal dark:text-zinc-400',
-                  userButtonPopoverActionButtonIcon:
-                    'h-4 w-4 text-muted-foreground'
-                }
-              }}
-            />
-          ) : (
-            <Link
-              href="/sign-in"
-              className={cn(buttonVariants({ variant: 'ghost' }))}
-            >
-              Sign in
-            </Link>
-          )}
+          <IconSeparator className="w-6 h-6 text-muted-foreground/50" />
+          {session?.user ? <UserMenu session={session} /> : <LoginButton />}
         </div>
       </div>
       <div className="flex items-center justify-end space-x-2">
@@ -77,7 +49,7 @@ export async function Header() {
           className={cn(buttonVariants({ variant: 'outline' }))}
         >
           <IconGitHub />
-          <span className="ml-2 hidden md:flex">GitHub</span>
+          <span className="hidden ml-2 md:flex">GitHub</span>
         </a>
         <a
           href="https://github.com/vercel/nextjs-ai-chatbot/"