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/"

components/login-button.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 import { Button, type ButtonProps } from '@/components/ui/button'
 import { IconGitHub, IconSpinner } from '@/components/ui/icons'
-import { useClerk } from '@clerk/nextjs'
+import { signIn } from 'next-auth/react'
 
 interface LoginButtonProps extends ButtonProps {
   text?: string
@@ -17,14 +17,13 @@ export function LoginButton({
   ...props
 }: LoginButtonProps) {
   const [isLoading, setIsLoading] = React.useState(false)
-  const clerk = useClerk()
 
   return (
     <Button
       variant="outline"
       onClick={() => {
         setIsLoading(true)
-        clerk.openSignIn({})
+        signIn('github')
       }}
       disabled={isLoading}
       className={cn(className)}

components/ui/user-menu.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+// import { type Session } from 'next-auth'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { signOut } from 'next-auth/react'
+
+import Image from 'next/image'
+
+export interface UserMenuProps {
+  session: any // Session
+}
+
+export function UserMenu({ session }: UserMenuProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <button className="focus:outline-none">
+            {session.user?.image ? (
+              <Image
+                width={24}
+                height={24}
+                className="w-6 h-6 transition-opacity duration-300 rounded-full select-none ring-zinc-100/10 ring-1 hover:opacity-80"
+                src={session.user?.image ? `${session.user.image}&s=60` : ''}
+                alt={session.user.name ?? 'Avatar'}
+              />
+            ) : (
+              <div className="flex items-center justify-center w-8 h-8 p-2 rounded-full select-none shrink-0 bg-gradient-to-r from-cyan-500 to-blue-500">
+                <div
+                  className="font-medium uppercase text-zinc-100"
+                  style={{ fontSize: 12 }}
+                >
+                  {session.user?.name ? session.user?.name.slice(0, 2) : null}
+                </div>
+              </div>
+            )}
+          </button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            className="min-w-[200px] bg-white dark:bg-zinc-950 rounded-lg shadow-lg text-zinc-900 dark:text-zinc-400 overflow-hidden border border-transparent dark:border-zinc-700 focus:outline-none relative z-20 py-2"
+            sideOffset={8}
+            align="end"
+          >
+            <DropdownMenu.Item className="px-3 py-2 focus:outline-none">
+              <div className="text-xs font-medium">{session.user?.name}</div>
+              <div className="text-xs text-zinc-500">{session.user?.email}</div>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Separator className="my-1 h-[1px] bg-zinc-100 dark:bg-zinc-800" />
+            <DropdownMenu.Item className="px-3 py-2 text-xs transition-colors duration-200 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 focus:outline-none ">
+              <a
+                href="https://vercel.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-between w-full"
+              >
+                <span>Vercel Homepage</span>
+                <span>
+                  <svg
+                    fill="none"
+                    height={16}
+                    shapeRendering="geometricPrecision"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
+                    viewBox="0 0 24 24"
+                    width={16}
+                    aria-hidden="true"
+                    className="mr-1"
+                  >
+                    <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
+                    <path d="M15 3h6v6" />
+                    <path d="M10 14L21 3" />
+                  </svg>
+                </span>
+              </a>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              className="px-3 py-2 text-xs transition-colors duration-200 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 focus:outline-none"
+              onClick={() => signOut()}
+            >
+              Log Out
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </div>
+  )
+}
+
+UserMenu.displayName = 'UserMenu'