Merge pull request #1 from supabase-community/main

Merge

Author: PaulGwamanda

.env.example

@@ -8,6 +8,9 @@ OPENAI_API_KEY=XXXXXXXX
 NEXT_PUBLIC_SUPABASE_URL=your-project-url
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
 
-## Follow GitHub Oauth setup steps from Supabase: 
+## Follow GitHub Oauth setup steps from Supabase,
+## if you choose not to use Github, set first
+## value to "false"
+NEXT_PUBLIC_AUTH_GITHUB=false
 AUTH_GITHUB_ID=XXXXXXXX
 AUTH_GITHUB_SECRET=XXXXXXXX

app/actions.ts

@@ -1,26 +1,27 @@
 'use server'
-
+import 'server-only'
 import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { Database } from '@/lib/db_types'
 import { revalidatePath } from 'next/cache'
 import { redirect } from 'next/navigation'
 
 import { type Chat } from '@/lib/types'
-import { auth } from '@/auth'
-
-const supabase = createServerActionClient<Database>({ cookies })
 
 export async function getChats(userId?: string | null) {
   if (!userId) {
     return []
   }
-
   try {
+    const cookieStore = cookies()
+    const supabase = createServerActionClient<Database>({
+      cookies: () => cookieStore
+    })
     const { data } = await supabase
       .from('chats')
       .select('payload')
       .order('payload->createdAt', { ascending: false })
+      .eq('user_id', userId)
       .throwOnError()
 
     return (data?.map(entry => entry.payload) as Chat[]) ?? []
@@ -30,6 +31,10 @@ export async function getChats(userId?: string | null) {
 }
 
 export async function getChat(id: string) {
+  const cookieStore = cookies()
+  const supabase = createServerActionClient<Database>({
+    cookies: () => cookieStore
+  })
   const { data } = await supabase
     .from('chats')
     .select('payload')
@@ -41,6 +46,10 @@ export async function getChat(id: string) {
 
 export async function removeChat({ id, path }: { id: string; path: string }) {
   try {
+    const cookieStore = cookies()
+    const supabase = createServerActionClient<Database>({
+      cookies: () => cookieStore
+    })
     await supabase.from('chats').delete().eq('id', id).throwOnError()
 
     revalidatePath('/')
@@ -54,12 +63,11 @@ export async function removeChat({ id, path }: { id: string; path: string }) {
 
 export async function clearChats() {
   try {
-    const session = await auth()
-    await supabase
-      .from('chats')
-      .delete()
-      .eq('user_id', session?.user.id)
-      .throwOnError()
+    const cookieStore = cookies()
+    const supabase = createServerActionClient<Database>({
+      cookies: () => cookieStore
+    })
+    await supabase.from('chats').delete().throwOnError()
     revalidatePath('/')
     return redirect('/')
   } catch (error) {
@@ -71,6 +79,10 @@ export async function clearChats() {
 }
 
 export async function getSharedChat(id: string) {
+  const cookieStore = cookies()
+  const supabase = createServerActionClient<Database>({
+    cookies: () => cookieStore
+  })
   const { data } = await supabase
     .from('chats')
     .select('payload')
@@ -87,6 +99,10 @@ export async function shareChat(chat: Chat) {
     sharePath: `/share/${chat.id}`
   }
 
+  const cookieStore = cookies()
+  const supabase = createServerActionClient<Database>({
+    cookies: () => cookieStore
+  })
   await supabase
     .from('chats')
     .update({ payload: payload as any })

app/api/auth/callback/route.ts

@@ -1,3 +1,4 @@
+import 'server-only'
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
@@ -10,7 +11,10 @@ export async function GET(request: Request) {
   const code = requestUrl.searchParams.get('code')
 
   if (code) {
-    const supabase = createRouteHandlerClient({ cookies })
+    const cookieStore = cookies()
+    const supabase = createRouteHandlerClient({
+      cookies: () => cookieStore
+    })
     await supabase.auth.exchangeCodeForSession(code)
   }
 

app/api/chat/route.ts

@@ -1,3 +1,4 @@
+import 'server-only'
 import { OpenAIStream, StreamingTextResponse } from 'ai'
 import { Configuration, OpenAIApi } from 'openai-edge'
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
@@ -16,10 +17,13 @@ const configuration = new Configuration({
 const openai = new OpenAIApi(configuration)
 
 export async function POST(req: Request) {
-  const supabase = createRouteHandlerClient<Database>({ cookies })
+  const cookieStore = cookies()
+  const supabase = createRouteHandlerClient<Database>({
+    cookies: () => cookieStore
+  })
   const json = await req.json()
   const { messages, previewToken } = json
-  const userId = (await auth())?.user.id
+  const userId = (await auth({ cookieStore }))?.user.id
 
   if (!userId) {
     return new Response('Unauthorized', {

app/chat/[id]/page.tsx

@@ -4,6 +4,7 @@ import { notFound, redirect } from 'next/navigation'
 import { auth } from '@/auth'
 import { getChat } from '@/app/actions'
 import { Chat } from '@/components/chat'
+import { cookies } from 'next/headers'
 
 export const runtime = 'edge'
 export const preferredRegion = 'home'
@@ -17,7 +18,8 @@ export interface ChatPageProps {
 export async function generateMetadata({
   params
 }: ChatPageProps): Promise<Metadata> {
-  const session = await auth()
+  const cookieStore = cookies()
+  const session = await auth({ cookieStore })
 
   if (!session?.user) {
     return {}
@@ -30,7 +32,8 @@ export async function generateMetadata({
 }
 
 export default async function ChatPage({ params }: ChatPageProps) {
-  const session = await auth()
+  const cookieStore = cookies()
+  const session = await auth({ cookieStore })
 
   if (!session?.user) {
     redirect(`/sign-in?next=/chat/${params.id}`)

app/layout.tsx

@@ -43,10 +43,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
       >
         <Toaster />
         <Providers attribute="class" defaultTheme="system" enableSystem>
-          <div className="flex flex-col min-h-screen">
+          <div className="flex min-h-screen flex-col">
             {/* @ts-ignore */}
             <Header />
-            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+            <main className="flex flex-1 flex-col bg-muted/50">{children}</main>
           </div>
           <TailwindIndicator />
         </Providers>

app/sign-in/page.tsx

@@ -1,16 +1,26 @@
 import { auth } from '@/auth'
 import { LoginButton } from '@/components/login-button'
+import { LoginForm } from '@/components/login-form'
+import { Separator } from '@/components/ui/separator'
+import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 
 export default async function SignInPage() {
-  const session = await auth()
+  const cookieStore = cookies()
+  const session = await auth({ cookieStore })
   // redirect to home if user is already logged in
   if (session?.user) {
     redirect('/')
   }
   return (
-    <div className="flex h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10">
-      <LoginButton />
+    <div className="flex h-[calc(100vh-theme(spacing.16))] flex-col items-center justify-center py-10">
+      <div className="w-full max-w-sm">
+        <LoginForm action="sign-in" />
+        <Separator className="my-4" />
+        <div className="flex justify-center">
+          <LoginButton />
+        </div>
+      </div>
     </div>
   )
 }

app/sign-up/page.tsx

@@ -0,0 +1,26 @@
+import { auth } from '@/auth'
+import { LoginButton } from '@/components/login-button'
+import { LoginForm } from '@/components/login-form'
+import { Separator } from '@/components/ui/separator'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export default async function SignInPage() {
+  const cookieStore = cookies()
+  const session = await auth({ cookieStore })
+  // redirect to home if user is already logged in
+  if (session?.user) {
+    redirect('/')
+  }
+  return (
+    <div className="flex h-[calc(100vh-theme(spacing.16))] flex-col items-center justify-center py-10">
+      <div className="w-full max-w-sm">
+        <LoginForm action="sign-up" />
+        <Separator className="my-4" />
+        <div className="flex justify-center">
+          <LoginButton />
+        </div>
+      </div>
+    </div>
+  )
+}

auth.ts

@@ -1,9 +1,16 @@
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
+import 'server-only'
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 
-export const auth = async () => {
+export const auth = async ({
+  cookieStore
+}: {
+  cookieStore: ReturnType<typeof cookies>
+}) => {
   // Create a Supabase client configured to use cookies
-  const supabase = createServerActionClient({ cookies })
+  const supabase = createServerComponentClient({
+    cookies: () => cookieStore
+  })
   const { data, error } = await supabase.auth.getSession()
   if (error) throw error
   return data.session

components/header.tsx

@@ -17,11 +17,13 @@ import { SidebarFooter } from '@/components/sidebar-footer'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { ClearHistory } from '@/components/clear-history'
 import { UserMenu } from '@/components/user-menu'
+import { cookies } from 'next/headers'
 
 export async function Header() {
-  const session = await auth()
+  const cookieStore = cookies()
+  const session = await auth({ cookieStore })
   return (
-    <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">
+    <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">
       <div className="flex items-center">
         {session?.user ? (
           <Sidebar>
@@ -36,12 +38,12 @@ export async function Header() {
           </Sidebar>
         ) : (
           <Link href="/" target="_blank" rel="nofollow">
-            <IconNextChat className="w-6 h-6 mr-2 dark:hidden" inverted />
-            <IconNextChat className="hidden w-6 h-6 mr-2 dark:block" />
+            <IconNextChat className="mr-2 h-6 w-6 dark:hidden" inverted />
+            <IconNextChat className="mr-2 hidden h-6 w-6 dark:block" />
           </Link>
         )}
         <div className="flex items-center">
-          <IconSeparator className="w-6 h-6 text-muted-foreground/50" />
+          <IconSeparator className="h-6 w-6 text-muted-foreground/50" />
           {session?.user ? (
             <UserMenu user={session.user} />
           ) : (
@@ -59,7 +61,7 @@ export async function Header() {
           className={cn(buttonVariants({ variant: 'outline' }))}
         >
           <IconGitHub />
-          <span className="hidden ml-2 md:flex">GitHub</span>
+          <span className="ml-2 hidden md:flex">GitHub</span>
         </a>
         <a
           href="https://github.com/thorwebdev/vercel-ai-chatbot"

components/login-button.tsx

@@ -21,6 +21,11 @@ export function LoginButton({
   const [isLoading, setIsLoading] = React.useState(false)
   // Create a Supabase client configured to use cookies
   const supabase = createClientComponentClient()
+
+  if (process.env.NEXT_PUBLIC_AUTH_GITHUB !== 'true') {
+    return null
+  }
+
   return (
     <Button
       variant="outline"