[FEATURE] Migrate to supabase-ssr (#9)

- Migrate to @supabase/ssr
- Update unstable_cache implementation
- Update edge runtime for some pages

Author: nphivu414

app/(auth)/signin/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next"
 import { redirect } from "next/navigation"
 import { UserAuthForm } from "@/components/modules/auth/UserAuthForm"
 import { getCurrentSession } from "@/lib/session"
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
+import { createClient } from "@/lib/supabase/server"
 import { cookies } from "next/headers"
 import { Heading3 } from "@/components/ui/typography"
 import { siteConfig } from "@/config/site"
@@ -12,13 +12,12 @@ export const metadata: Metadata = {
   description: "Sigin to your account",
 }
 
+export const runtime = "edge"
 export const dynamic = 'force-dynamic'
 
 export default async function LoginPage() {
   const cookieStore = cookies()
-  const supabase = createServerComponentClient({
-    cookies: () => cookieStore,
-  })
+  const supabase = createClient(cookieStore)
   const session = await getCurrentSession(supabase)
 
   if (session) {

app/(auth)/signup/page.tsx

@@ -1,12 +1,13 @@
 import { Metadata } from "next"
 import { redirect } from "next/navigation"
 import { UserSignupForm } from "@/components/modules/auth/UserSignupForm"
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
+import { createClient } from "@/lib/supabase/server"
 import { getCurrentSession } from "@/lib/session"
 import { cookies } from "next/headers"
 import { Heading3 } from "@/components/ui/typography"
 import { siteConfig } from "@/config/site"
 
+export const runtime = "edge"
 export const metadata: Metadata = {
   title: "Signup",
   description: "Signup a new account",
@@ -16,9 +17,7 @@ export const dynamic = 'force-dynamic'
 
 export default async function LoginPage() {
   const cookieStore = cookies()
-  const supabase = createServerComponentClient({
-    cookies: () => cookieStore,
-  })
+  const supabase = createClient(cookieStore)
   const session = await getCurrentSession(supabase)
 
   if (session) {

app/api/auth/callback/route.ts

@@ -1,17 +1,20 @@
-import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
-import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
 
-export const dynamic = 'force-dynamic'
-
-export async function GET(req: NextRequest) {
-  const supabase = createRouteHandlerClient({ cookies })
-  const { searchParams } = new URL(req.url)
-  const code = searchParams.get('code')
+export async function GET(request: Request) {
+  // The `/auth/callback` route is required for the server-side auth flow implemented
+  // by the Auth Helpers package. It exchanges an auth code for the user's session.
+  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
+  const requestUrl = new URL(request.url)
+  const code = requestUrl.searchParams.get('code')
 
   if (code) {
+    const cookieStore = cookies()
+    const supabase = createClient(cookieStore)
     await supabase.auth.exchangeCodeForSession(code)
   }
 
-  return NextResponse.redirect(new URL('/apps/chat', req.url))
-}
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(requestUrl.origin)
+}

app/api/auth/logout/route.ts

@@ -1,11 +1,12 @@
-import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { createClient } from '@/lib/supabase/server'
 import { cookies } from 'next/headers'
 import { type NextRequest, NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
 
 export async function POST(req: NextRequest) {
-  const supabase = createRouteHandlerClient({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
 
   // Check if we have a session
   const {

app/api/chat/route.ts

@@ -1,13 +1,13 @@
-import { RequestCookies } from "@edge-runtime/cookies";
 import OpenAI from 'openai'
 import { OpenAIStream, StreamingTextResponse } from 'ai'
-import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
 import { pick } from 'lodash';
 import { AxiomRequest, withAxiom } from 'next-axiom';
 import { getCurrentSession } from '@/lib/session';
 import { createNewMessage, deleteMessagesFrom, getMessageById } from '@/lib/db/message';
 import { createNewChat } from '@/lib/db/chats';
 import { getAppBySlug } from '@/lib/db/apps';
+import { createClient } from "@/lib/supabase/server";
+import { cookies } from "next/headers";
 import {
   env
 } from '@/env.mjs';
@@ -25,8 +25,8 @@ export const POST = withAxiom(async (req: AxiomRequest) => {
     route: 'api/chat',
   });
 
-  const cookies = new RequestCookies(req.headers) as any;
-  const supabase = createRouteHandlerClient({ cookies: () => cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
   const params = await req.json()
   const {
     messages,

app/apps/chat/[id]/page.tsx

@@ -2,14 +2,17 @@ import React from "react"
 import { cookies } from "next/headers"
 import { Metadata } from "next"
 import { ChatPanel } from "@/components/modules/apps/chat/ChatPanel"
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
+import { createClient } from "@/lib/supabase/server"
 import { getChatById, getChats } from "@/lib/db/chats"
 import { getAppBySlug } from "@/lib/db/apps"
 import { getCurrentSession } from "@/lib/session"
 import { Message } from "ai"
 import { getMessages } from "@/lib/db/message"
 import { ChatParams } from "@/components/modules/apps/chat/types"
 
+export const runtime = "edge"
+export const preferredRegion = "home"
+
 export const metadata: Metadata = {
   title: "Chat",
   description: "Chat with your AI assistant to generate new ideas and get inspired.",
@@ -18,7 +21,8 @@ export const metadata: Metadata = {
 export default async function ChatPage({ params }: { params: { id: string } }) {
   const chatId = params.id
 
-  const supabase = createServerComponentClient({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
   const session = await getCurrentSession(supabase)
   const currentApp = await getAppBySlug(supabase, '/apps/chat')
 

app/apps/chat/page.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Metadata } from "next"
 import { ChatPanel } from "@/components/modules/apps/chat/ChatPanel"
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
+import { createClient } from "@/lib/supabase/server"
 import { cookies } from "next/headers"
 import { getAppBySlug } from "@/lib/db/apps"
 import { getCurrentSession } from "@/lib/session"
@@ -16,9 +16,7 @@ export default async function NewChatPage() {
   const chatId = uuidv4()
 
   const cookieStore = cookies()
-  const supabase = createServerComponentClient({
-    cookies: () => cookieStore,
-  })
+  const supabase = createClient(cookieStore)
   const session = await getCurrentSession(supabase)
   const currentApp = await getAppBySlug(supabase, '/apps/chat')
 

app/apps/layout.tsx

@@ -2,7 +2,7 @@ import { ChatHistory } from "@/components/modules/apps/chat/ChatHistory"
 import { getAppBySlug } from "@/lib/db/apps"
 import { getChats } from "@/lib/db/chats"
 import { getCurrentSession } from "@/lib/session"
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
+import { createClient } from "@/lib/supabase/server"
 import { cookies } from "next/headers"
 import { MainLayout } from '@/components/ui/common/MainLayout'
 
@@ -11,7 +11,8 @@ interface AppLayoutProps {
 }
 
 export default async function AppLayout({ children }: AppLayoutProps) {
-  const supabase = createServerComponentClient({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
   const session = await getCurrentSession(supabase)
   const currentApp = await getAppBySlug(supabase, '/apps/chat')
 

app/apps/page.tsx

@@ -1,7 +1,6 @@
 import { Heading1 } from "@/components/ui/typography"
 
 export const runtime = "edge"
-export const preferredRegion = "home"
 
 export default function Apps() {
   return (

app/page.tsx

@@ -14,6 +14,8 @@ export const metadata: Metadata = {
   description: siteConfig.description,
 }
 
+export const runtime = "edge"
+
 export default async function Home() {
   return (
     <MainLayout>

app/profile/page.tsx

@@ -3,13 +3,16 @@ import { ProfileForm } from "@/components/modules/profile/ProfileForm";
 import { ProfileFormValues } from "@/components/modules/profile/type";
 import { getCurrentProfile } from "@/lib/db/profile";
 import { getCurrentSession } from "@/lib/session";
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { createClient } from "@/lib/supabase/server";
 import { cookies } from "next/headers";
 
 export const dynamic = 'force-dynamic'
 
+export const runtime = "edge"
+
 export default async function Profile() {
-  const supabase = createServerComponentClient({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
   const profile = await getCurrentProfile(supabase)
   const session = await getCurrentSession(supabase)
 

components/modules/apps/app-side-bar/AppSideBar.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { cookies } from 'next/headers';
-import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import { createClient } from '@/lib/supabase/server';
 import { getApps } from '@/lib/db/apps';
 import { AppSideBarList } from './AppSideBarList';
 
 export const AppSideBar = async () => {
-  const supabase = await createServerComponentClient({ cookies })
+  const cookieStore = cookies()
+  const supabase = await createClient(cookieStore)
   const apps = await getApps(supabase)
   return (
     <aside className="sticky top-16 flex w-0 flex-col overflow-x-hidden bg-muted transition-[width] lg:w-[73px] lg:border-r lg:hover:w-80" aria-label="Sidenav">

components/modules/apps/chat/action.ts

@@ -1,16 +1,17 @@
 'use server'
 
-import { Database, Update } from "@/lib/db"
+import { Update } from "@/lib/db"
 import { getAppBySlug } from "@/lib/db/apps"
 import { createNewChat as createNewChatDb, deleteChat as deleteChatDb, updateChat as updateChatDb } from "@/lib/db/chats"
 import { getCurrentSession } from "@/lib/session"
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
+import { createClient } from "@/lib/supabase/server"
 import { revalidatePath } from "next/cache"
 import { cookies } from "next/headers"
 import { redirect } from "next/navigation"
 
 export const createNewChat = async () => {
-  const supabase = createServerComponentClient<Database>({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
   const session = await getCurrentSession(supabase)
   const currentApp = await getAppBySlug(supabase, '/apps/chat')
 
@@ -32,7 +33,8 @@ export const createNewChat = async () => {
 }
 
 export const deleteChat = async (id: string) => {
-  const supabase = createServerComponentClient<Database>({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
 
   try {
     await deleteChatDb(supabase, id)
@@ -43,7 +45,8 @@ export const deleteChat = async (id: string) => {
 }
 
 export const updateChat = async (params: Update<'chats'>) => {
-  const supabase = createServerComponentClient<Database>({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
   const { id, ...rest } = params
   if (!id) {
     throw new Error('Missing ID')

components/modules/apps/chat/control-side-bar/action.ts

@@ -1,14 +1,15 @@
 'use server'
 
-import { Chat, Database, Update } from "@/lib/db"
+import { Chat, Update } from "@/lib/db"
 import { getAppBySlug } from "@/lib/db/apps"
 import { updateChat } from "@/lib/db/chats"
 import { getCurrentSession } from "@/lib/session"
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
+import { createClient } from "@/lib/supabase/server"
 import { cookies } from "next/headers"
 
 export const updateChatSettings = async (id: Chat['id'], params: Update<'chats'>['settings']) => {
-  const supabase = createServerComponentClient<Database>({ cookies })
+  const cookieStore = cookies()
+  const supabase = createClient(cookieStore)
   const session = await getCurrentSession(supabase)
   const currentApp = await getAppBySlug(supabase, '/apps/chat')
 

components/modules/auth/SocialLoginButton.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonProps } from '@/components/ui/Button'
 import { useToast } from '@/components/ui/use-toast'
 import { getURL } from '@/config/site'
-import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
+import { createClient } from '@/lib/supabase/client'
 import { Provider } from '@supabase/supabase-js'
 import { Loader } from 'lucide-react'
 import React from 'react'
@@ -11,7 +11,7 @@ type SocialLoginButtonProps = ButtonProps & {
 }
 
 export const SocialLoginButton = ({ provider, children, ...rest }: SocialLoginButtonProps) => {
-  const supabase = createClientComponentClient()
+  const supabase = createClient()
   const [isLoading, setIsLoading] = React.useState<boolean>(false)
   const { toast } = useToast()
 

components/modules/auth/UserAuthForm.tsx

@@ -9,18 +9,17 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useToast } from "@/components/ui/use-toast"
 import { InputField } from "@/components/ui/form/form-fields"
 import { Loader } from "lucide-react"
-import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
-import { Database } from "@/lib/db"
 import Link from "next/link"
 import { credentialAuthSchema } from "./schema"
 import { SocialLoginOptions } from "./SocialLoginOptions"
+import { createClient } from "@/lib/supabase/client"
 
 type UserAuthFormProps = React.HTMLAttributes<HTMLDivElement>
 
 type FormData = z.infer<typeof credentialAuthSchema>
 
 export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
-  const supabase = createClientComponentClient<Database>()
+  const supabase = createClient()
   const {
     register,
     formState,

components/modules/auth/UserSignupForm.tsx

@@ -10,17 +10,16 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useToast } from "@/components/ui/use-toast"
 import { InputField } from "@/components/ui/form/form-fields"
 import { Loader } from "lucide-react"
-import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
-import { Database } from "@/lib/db"
 import { registerProfileSchema } from "./schema"
 import Link from "next/link"
+import { createClient } from "@/lib/supabase/client"
 
 type UserSignupFormProps = React.HTMLAttributes<HTMLDivElement>
 
 type FormData = z.infer<typeof registerProfileSchema>
 
 export function UserSignupForm({ className, ...props }: UserSignupFormProps) {
-  const supabase = createClientComponentClient<Database>()
+  const supabase = createClient()
   const { replace } = useRouter()
   const {
     register,

components/modules/profile/AccountDropdownMenu.tsx

@@ -11,7 +11,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
 import { getCurrentProfile } from '@/lib/db/profile';
-import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import { createClient } from '@/lib/supabase/client'
 import { Loader, User } from 'lucide-react';
 import Link from 'next/link';
 import LogoutButton from '../auth/LogoutButton';
@@ -24,7 +24,7 @@ type AccountDropdownMenuProps = {
 }
 
 export const AccountDropdownMenu = ({ userEmail }: AccountDropdownMenuProps) => {
-  const supabase = createClientComponentClient()
+  const supabase = createClient()
   const [ isLoading, setIsLoading ] = React.useState<boolean>()
   const [isMounted, setIsMounted] = React.useState(false)