Move to Next Auth (#19)

2023-06-16 12:23:45 -04:00 · 2023-06-16 12:23:45 -04:00 · 615e8e6384
commit 615e8e6384
parent f91a79f2d5 fdd68cf6d7
18 changed files with 491 additions and 600 deletions
--- a/app/actions.ts
+++ b/app/actions.ts
@ -2,7 +2,7 @@

 import { revalidatePath } from 'next/cache'
 import { kv } from '@vercel/kv'
-import { currentUser } from '@clerk/nextjs'
+import { auth } from '@/auth'

 import { type Chat } from '@/lib/types'

@ -44,41 +44,50 @@ export async function getChat(id: string, userId: string) {
 }

 export async function removeChat({ id, path }: { id: string; path: string }) {
-  const user = await currentUser()
+  const session = await auth()

-  if (!user) {
+  if (!session) {
    throw new Error('Unauthorized')
  }

  const uid = await kv.hget<string>(`chat:${id}`, 'userId')

-  if (uid !== user.id) {
+  if (uid !== session?.user?.id) {
    throw new Error('Unauthorized')
  }

  await kv.del(`chat:${id}`)
-  await kv.zrem(`user:chat:${user.id}`, `chat:${id}`)
+  await kv.zrem(`user:chat:${session.user.id}`, `chat:${id}`)

  revalidatePath('/')
  revalidatePath(path)
 }

 export async function clearChats() {
-  const user = await currentUser()
+  const session = await auth()

-  if (!user) {
+  if (!session) {
    throw new Error('Unauthorized')
  }

-  const chats: string[] = await kv.zrange(`user:chat:${user.id}`, 0, -1, {
-    rev: true
-  })
+  if (!session.user?.id) {
+    throw new Error('Unauthorized')
+  }
+
+  const chats: string[] = await kv.zrange(
+    `user:chat:${session.user.id}`,
+    0,
+    -1,
+    {
+      rev: true
+    }
+  )

  const pipeline = kv.pipeline()

  for (const chat of chats) {
    pipeline.del(chat)
-    pipeline.zrem(`user:chat:${user.id}`, chat)
+    pipeline.zrem(`user:chat:${session.user.id}`, chat)
  }

  await pipeline.exec()
@ -97,9 +106,17 @@ export async function getSharedChat(id: string) {
 }

 export async function shareChat(chat: Chat) {
-  const user = await currentUser()
+  const session = await auth()

-  if (!user || chat.userId !== user.id) {
+  if (!session) {
+    throw new Error('Unauthorized')
+  }
+
+  if (!session.user?.id) {
+    throw new Error('Unauthorized')
+  }
+
+  if (chat.userId !== session.user?.id) {
    throw new Error('Unauthorized')
  }

--- a/app/api/auth/[...nextauth]/route.ts
+++ b/app/api/auth/[...nextauth]/route.ts
@ -0,0 +1,2 @@
+export { GET, POST } from '@/auth'
+export const runtime = 'edge'
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@ -1,9 +1,8 @@
 import { kv } from '@vercel/kv'
 import { OpenAIStream, StreamingTextResponse } from 'ai-connector'
 import { Configuration, OpenAIApi } from 'openai-edge'
-
 import { nanoid } from '@/lib/utils'
-import { currentUser } from '@clerk/nextjs'
+import { auth } from '@/auth'

 export const runtime = 'edge'

@ -18,8 +17,8 @@ if (!process.env.OPENAI_API_KEY) {
 }

 export async function POST(req: Request) {
-  const user = await currentUser()
-  if (user == null) {
+  const session = await auth()
+  if (session == null) {
    return new Response('Unauthorized', { status: 401 })
  }

@ -40,7 +39,7 @@ export async function POST(req: Request) {
  const stream = OpenAIStream(res, {
    async onCompletion(completion) {
      const title = json.messages[0].content.substring(0, 100)
-      const userId = user.id
+      const userId = session.user.id
      const id = json.id ?? nanoid()
      const createdAt = Date.now()
      const path = `/chat/${id}`
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@ -1,5 +1,5 @@
 import { type Metadata } from 'next'
-import { auth } from '@clerk/nextjs'
+import { auth } from '@/auth'

 import { Chat } from '@/components/chat'
 import { getChat } from '@/app/actions'
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,6 +1,5 @@
 import { Metadata } from 'next'

-import { ClerkProvider } from '@clerk/nextjs'
 import { Toaster } from 'react-hot-toast'

 import '@/app/globals.css'
@ -33,29 +32,25 @@ interface RootLayoutProps {

 export default function RootLayout({ children }: RootLayoutProps) {
  return (
-    <ClerkProvider>
-      <html lang="en" suppressHydrationWarning>
-        <head />
-        <body
-          className={cn(
-            'font-sans antialiased',
-            fontSans.variable,
-            fontMono.variable
-          )}
-        >
-          <Toaster />
-          <Providers attribute="class" defaultTheme="system" enableSystem>
-            <div className="flex min-h-screen flex-col">
-              {/* @ts-ignore */}
-              <Header />
-              <main className="flex flex-1 flex-col bg-muted/50">
-                {children}
-              </main>
-            </div>
-            <TailwindIndicator />
-          </Providers>
-        </body>
-      </html>
-    </ClerkProvider>
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body
+        className={cn(
+          'font-sans antialiased',
+          fontSans.variable,
+          fontMono.variable
+        )}
+      >
+        <Toaster />
+        <Providers attribute="class" defaultTheme="system" enableSystem>
+          <div className="flex flex-col min-h-screen">
+            {/* @ts-ignore */}
+            <Header />
+            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+          </div>
+          <TailwindIndicator />
+        </Providers>
+      </body>
+    </html>
  )
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,8 +1,7 @@
 import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'

-// export const runtime = 'edge'
-export const preferredRegion = 'home'
+export const runtime = 'edge'

 export default function IndexPage() {
  const id = nanoid()
--- a/app/sign-in/[[...sign-in]]/page.tsx
+++ b/app/sign-in/[[...sign-in]]/page.tsx
@ -1,36 +0,0 @@
-import { ClerkLoaded, ClerkLoading, SignIn } from '@clerk/nextjs'
-
-import { cn } from '@/lib/utils'
-import { ExternalLink } from '@/components/external-link'
-import { buttonVariants } from '@/components/ui/button'
-import { IconSpinner } from '@/components/ui/icons'
-import { FooterText } from '@/components/footer'
-
-export default function SignInPage() {
-  return (
-    <div className="flex h-full min-h-screen flex-col items-center justify-center">
-      <div className="space-y-4">
-        <ClerkLoading>
-          <div className="flex items-center text-sm text-muted-foreground">
-            <IconSpinner className="mr-2 h-5 w-5" /> Loading...
-          </div>
-        </ClerkLoading>
-        <ClerkLoaded>
-          <SignIn
-            appearance={{
-              elements: {
-                card: 'shadow rounded-lg border border-border',
-                formFieldInput:
-                  'flex h-9 w-full rounded-md px-3 py-2 text-sm shadow-sm',
-                formButtonPrimary: 'normal-case',
-                footerAction: 'text-sm',
-                footerActionLink: 'font-medium'
-              }
-            }}
-          />
-          <FooterText />
-        </ClerkLoaded>
-      </div>
-    </div>
-  )
-}
--- a/app/sign-in/page.tsx
+++ b/app/sign-in/page.tsx
@ -0,0 +1,13 @@
+import { FooterText } from '@/components/footer'
+import { LoginButton } from '@/components/login-button'
+
+export default function SignInPage() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full min-h-screen">
+      <div className="space-y-4">
+        <LoginButton />
+        <FooterText />
+      </div>
+    </div>
+  )
+}
--- a/app/sign-up/[[...sign-up]]/page.tsx
+++ b/app/sign-up/[[...sign-up]]/page.tsx
@ -1,37 +0,0 @@
-import { ClerkLoaded, ClerkLoading, SignUp } from '@clerk/nextjs'
-
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
-import { ExternalLink } from '@/components/external-link'
-import { IconSpinner } from '@/components/ui/icons'
-import { FooterText } from '@/components/footer'
-
-export default function Page() {
-  return (
-    <div className="flex h-full min-h-screen flex-col items-center justify-center">
-      <div className="space-y-4">
-        <ClerkLoading>
-          <div className="flex items-center text-sm text-muted-foreground">
-            <IconSpinner className="mr-2 h-5 w-5" /> Loading...
-          </div>
-        </ClerkLoading>
-        <ClerkLoaded>
-          <SignUp
-            appearance={{
-              elements: {
-                card: 'shadow rounded-lg border border-border',
-                formFieldInput:
-                  'flex h-9 w-full rounded-md px-3 py-2 text-sm shadow-sm',
-                formButtonPrimary: 'normal-case',
-                footerAction: 'text-sm',
-                footerActionLink: 'font-medium hover:underline',
-                identityPreview: 'rounded-md'
-              }
-            }}
-          />
-          <FooterText />
-        </ClerkLoaded>
-      </div>
-    </div>
-  )
-}
--- a/auth.ts
+++ b/auth.ts
@ -0,0 +1,30 @@
+import NextAuth from 'next-auth'
+import GitHub from 'next-auth/providers/github'
+
+export const {
+  handlers: { GET, POST },
+  auth,
+  CSRF_experimental
+  // @ts-ignore
+} = NextAuth({
+  // @ts-ignore
+  providers: [GitHub],
+  callbacks: {
+    // @ts-ignore
+    jwt: async ({ token, profile }) => {
+      if (profile?.id) {
+        token.id = profile.id
+        token.image = profile.picture
+      }
+      return token
+    },
+    // @ts-ignore
+    authorized({ request, auth }) {
+      if (!request.nextUrl.pathname.startsWith('/share/')) return true
+      return !!auth?.user
+    }
+  },
+  pages: {
+    signIn: '/sign-in'
+  }
+})
--- a/components/header.tsx
+++ b/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/"
--- a/components/login-button.tsx
+++ b/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)}
--- a/components/ui/user-menu.tsx
+++ b/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'
--- a/middleware.ts
+++ b/middleware.ts
@ -1,10 +1 @@
-import { authMiddleware } from '@clerk/nextjs'
-
-// @see https://clerk.dev
-export default authMiddleware({
-  publicRoutes: ['/share/:id']
-})
-
-export const config = {
-  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)']
-}
+export { auth as middleware } from './auth'
--- a/next-auth.d.ts
+++ b/next-auth.d.ts
@ -0,0 +1,13 @@
+import NextAuth, { DefaultSession } from 'next-auth'
+
+declare module 'next-auth' {
+  /**
+   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    user: {
+      /** The user's postal address. */
+      address: string
+    } & DefaultSession['user']
+  }
+}
--- a/package.json
+++ b/package.json
@ -14,9 +14,9 @@
    "format:check": "prettier --check \"{app,lib,components}**/*.{ts,tsx,mdx}\" --cache"
  },
  "dependencies": {
-    "@clerk/nextjs": "^4.21.1",
    "@radix-ui/react-alert-dialog": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
@ -31,7 +31,8 @@
    "clsx": "^1.2.1",
    "focus-trap-react": "^10.1.1",
    "nanoid": "^4.0.2",
-    "next": "13.4.6-canary.7",
+    "next": "13.4.7-canary.1",
+    "next-auth": "0.0.0-manual.4cd21ea5",
    "next-themes": "^0.2.1",
    "openai-edge": "^0.5.1",
    "react": "^18.2.0",
@ -55,7 +56,7 @@
    "dotenv": "^16.0.3",
    "drizzle-kit": "^0.18.0",
    "eslint": "^8.31.0",
-    "eslint-config-next": "13.4.6-canary.7",
+    "eslint-config-next": "13.4.7-canary.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-tailwindcss": "^3.12.0",
    "postcss": "^8.4.21",
@ -67,7 +68,7 @@
  },
  "pnpm": {
    "overrides": {
-      "@auth/core": "0.0.0-manual.527fff6c"
+      "@auth/nextjs": "0.0.0-manual.223c6467"
    }
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tsconfig.json
+++ b/tsconfig.json
@ -24,6 +24,12 @@
    ],
    "strictNullChecks": true
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "next-auth.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
  "exclude": ["node_modules"]
 }