fixed client side duplicates

Author: Gerome-Elassaad

app/page.tsx

@@ -15,7 +15,7 @@ import { Message, toAISDKMessages, toMessageImage } from '@/lib/messages'
 import { LLMModelConfig } from '@/lib/models'
 import modelsList from '@/lib/models.json'
 import { FragmentSchema, fragmentSchema as schema } from '@/lib/schema'
-import { createBrowserClient } from '@/lib/supabase-client'
+import { createSupabaseBrowserClient } from '@/lib/supabase-browser'
 import templates, { TemplateId, Templates } from '@/lib/templates'
 import { ExecutionResult } from '@/lib/types'
 import { cn } from '@/lib/utils'
@@ -28,7 +28,7 @@ import { useEnhancedChat } from '@/hooks/use-enhanced-chat'
 import { HeroPillSecond } from '@/components/announcement'
 
 export default function Home() {
-  const supabase = createBrowserClient()
+  const supabase = createSupabaseBrowserClient()
   const [chatInput, setChatInput] = useLocalStorage('chat', '')
   const [files, setFiles] = useState<File[]>([])
   const [selectedTemplate, setSelectedTemplate] = useState<'auto' | TemplateId>('auto')

app/settings/account/page.tsx

@@ -11,7 +11,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { AlertTriangle, Camera, Mail, Shield, Loader2 } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { useAuth } from '@/lib/auth'
-import { createBrowserClient } from '@/lib/supabase-client'
+import { createSupabaseBrowserClient } from '@/lib/supabase-browser'
 import { 
   getUserPreferences, 
   getUserSecuritySettings,
@@ -24,7 +24,7 @@ import {
 export default function AccountSettings() {
   const { session } = useAuth(() => {}, () => {})
   const { toast } = useToast()
-  const supabase = createBrowserClient()
+  const supabase = createSupabaseBrowserClient()
 
   // Form state
   const [email, setEmail] = useState('')

components/sidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { X, MessageCircle, Search, Gift, Settings, HelpCircle, CreditCard, User, LogOut, MoreHorizontal, Menu, Plus, Trash2, CornerUpLeft } from 'lucide-react';
-import type { User as SupabaseUser } from '@supabase/supabase-js';
+import type { User as SupabaseUser, Session, AuthChangeEvent } from '@supabase/supabase-js';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
-import { createBrowserClient } from '@/lib/supabase-client';
+import { createSupabaseBrowserClient } from '@/lib/supabase-browser';
 import { getProjects, Project, deleteProject } from '@/lib/database';
 import { formatDistanceToNow } from 'date-fns';
 
@@ -67,7 +67,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
   };
 
   const handleDeleteChat = async (chatId: string) => {
-    const supabase = createBrowserClient();
+    const supabase = createSupabaseBrowserClient();
     await deleteProject(supabase, chatId);
     setChatHistory(chatHistory.filter(chat => chat.id !== chatId));
   };
@@ -112,7 +112,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
   };
 
   React.useEffect(() => {
-    const supabase = createBrowserClient();
+    const supabase = createSupabaseBrowserClient();
 
     // Skip authentication setup if Supabase is not available (development mode)
     if (!supabase) {
@@ -138,7 +138,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
     };
     getUser();
 
-    const { data: authListener } = supabase.auth.onAuthStateChange((_event, session) => {
+    const { data: authListener } = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
       setUser(session?.user ?? null);
       if (session?.user) {
         fetchChatHistory();

lib/auth.ts

@@ -1,11 +1,11 @@
-import { createBrowserClient } from './supabase-client'
+import { createSupabaseBrowserClient } from './supabase-browser'
 import { ViewType } from '@/components/auth'
 import { randomString } from './utils'
-import { Session } from '@supabase/supabase-js'
+import { Session, AuthChangeEvent } from '@supabase/supabase-js'
 import { usePostHog } from 'posthog-js/react'
 import { useState, useEffect } from 'react'
 
-const supabase = createBrowserClient();
+const supabase = createSupabaseBrowserClient();
 
 type UserTeam = {
   email: string
@@ -43,7 +43,7 @@ export function useAuth(
       return setSession({ user: { email: 'demo@codinit.dev' } } as Session)
     }
 
-    supabase.auth.getSession().then(({ data: { session } }) => {
+    supabase.auth.getSession().then(({ data: { session } }: { data: { session: Session | null } }) => {
       setSession(session)
       if (session) {
         getUserTeam(session).then(setUserTeam)
@@ -63,7 +63,7 @@ export function useAuth(
 
     const {
       data: { subscription },
-    } = supabase.auth.onAuthStateChange((_event, session) => {
+    } = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
       setSession(session)
 
       if (_event === 'PASSWORD_RECOVERY') {

lib/database.ts

@@ -1,10 +1,10 @@
 import { SupabaseClient } from '@supabase/supabase-js'
-import { createBrowserClient } from './supabase-client'
+import { createSupabaseBrowserClient } from './supabase-browser'
 import { Message } from './messages'
 
 // The supabase client will be passed as an argument to functions.
 // A browser client is created here for convenience on the client-side.
-const browserSupabase = createBrowserClient()
+const browserSupabase = createSupabaseBrowserClient()
 
 export interface Project {
   id: string

lib/supabase-browser.ts

@@ -0,0 +1,30 @@
+import { createBrowserClient } from '@supabase/ssr'
+
+let supabaseClient: ReturnType<typeof createBrowserClient> | null = null
+
+export function createSupabaseBrowserClient() {
+    // Only create client on the client side
+    if (typeof window === 'undefined') {
+        return null
+    }
+    
+    // Return existing client if it exists
+    if (supabaseClient) {
+        return supabaseClient
+    }
+    
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+    
+    if (!supabaseUrl || !supabaseAnonKey) {
+        // Return null in development when Supabase is not configured
+        if (process.env.NODE_ENV === 'development') {
+            return null
+        }
+        throw new Error('Supabase URL and Anon Key are required')
+    }
+    
+    // Create and cache the client using SSR-compatible client
+    supabaseClient = createBrowserClient(supabaseUrl, supabaseAnonKey)
+    return supabaseClient
+}

lib/supabase-client.ts

@@ -1,8 +1,8 @@
-import { createBrowserClient } from './supabase-client'
+import { createSupabaseBrowserClient } from './supabase-browser'
 
 // Lazy getter for supabase instance
 function getSupabase() {
-  return createBrowserClient()
+  return createSupabaseBrowserClient()
 }
 
 export interface UserProfile {