Fix auth

components/header.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { cn } from '@/lib/utils'
 import { auth } from '@/auth'
 import { clearChats } from '@/app/actions'
-import { buttonVariants } from '@/components/ui/button'
+import { Button, buttonVariants } from '@/components/ui/button'
 import { Sidebar } from '@/components/sidebar'
 import { SidebarList } from '@/components/sidebar-list'
 import {
@@ -22,7 +22,7 @@ import { LoginButton } from '@/components/login-button'
 export async function Header() {
   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">
         {session?.user ? (
           <Sidebar>
@@ -37,21 +37,20 @@ export async function Header() {
           </Sidebar>
         ) : (
           <Link href="/" target="_blank" rel="nofollow">
-            <IconNextChat className="mr-2 h-6 w-6 dark:hidden" inverted />
-            <IconNextChat className="mr-2 hidden h-6 w-6 dark:block" />
+            <IconNextChat className="w-6 h-6 mr-2 dark:hidden" inverted />
+            <IconNextChat className="hidden w-6 h-6 mr-2 dark:block" />
           </Link>
         )}
         <div className="flex items-center">
-          <IconSeparator className="h-6 w-6 text-muted-foreground/50" />
+          <IconSeparator className="w-6 h-6 text-muted-foreground/50" />
           {session?.user ? (
             <UserMenu user={session.user} />
           ) : (
-            <LoginButton
-              variant="link"
-              showGithubIcon={false}
-              text="Login"
-              className="-ml-2"
-            />
+            <Button variant="link" asChild className="-ml-2">
+              <Link href="/sign-in" passHref>
+                Login
+              </Link>
+            </Button>
           )}
         </div>
       </div>
@@ -63,7 +62,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

@@ -24,6 +24,7 @@ export function LoginButton({
       variant="outline"
       onClick={() => {
         setIsLoading(true)
+        // next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
         signIn('github', { callbackUrl: `/` })
       }}
       disabled={isLoading}