Use the Correct Supabase Client for Each Context

// ❌ Browser client in a Server Component — no auth cookies available
// app/dashboard/page.tsx (Server Component)
import { createClient } from '@/lib/supabase/client' // Wrong import!
 
export default async function DashboardPage() {
  const supabase = createClient()
 
  // This query runs without auth context — RLS treats it as anonymous
  const { data: projects } = await supabase
    .from('projects')
    .select('*')
 
  // Returns empty array or error — RLS blocks because no user context
  return <ProjectList projects={projects ?? []} />
}

// ❌ Server client in a Client Component — causes errors
'use client'
import { createClient } from '@/lib/supabase/server' // Wrong import!
 
export function ProjectForm() {
  const handleSubmit = async (formData: FormData) => {
    // ❌ createClient from server.ts uses cookies() from next/headers
    // which is not available in Client Components
    const supabase = await createClient()
    // Error: cookies() can only be called in Server Components
  }
 
  return <form action={handleSubmit}>...</form>
}

// app/dashboard/page.tsx (Server Component)
import { createClient } from '@/lib/supabase/server'
 
export default async function DashboardPage() {
  // ✅ Server client reads auth cookies from the request
  const supabase = await createClient()
 
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/login')
 
  // ✅ RLS works correctly — query scoped to authenticated user
  const { data: projects } = await supabase
    .from('projects')
    .select('id, name, status, created_at')
 
  return <ProjectList projects={projects ?? []} />
}

'use client'
import { createClient } from '@/lib/supabase/client'
 
export function ProjectForm() {
  // ✅ Browser client uses browser cookies for auth
  const supabase = createClient() // No await — synchronous
 
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
 
    const { error } = await supabase
      .from('projects')
      .insert({ name: formData.get('name') as string })
 
    if (error) console.error(error)
  }
 
  return <form onSubmit={handleSubmit}>...</form>
}

// app/actions/projects.ts
'use server'
 
import { createClient } from '@/lib/supabase/server'
 
export async function createProject(formData: FormData) {
  // ✅ Server client in Server Action — has access to request cookies
  const supabase = await createClient()
 
  const { data: { user }, error: authError } = await supabase.auth.getUser()
  if (authError || !user) throw new Error('Unauthorized')
 
  const { error } = await supabase
    .from('projects')
    .insert({ name: formData.get('name') as string })
 
  if (error) throw error
  revalidatePath('/dashboard')
}

// middleware.ts
import { createClient } from '@/lib/supabase/middleware'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export async function middleware(request: NextRequest) {
  // ✅ Middleware client handles token refresh on every request
  const { supabase, response } = await createClient(request)
 
  // This refreshes the auth token if expired
  const { data: { user } } = await supabase.auth.getUser()
 
  if (!user && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
 
  return response
}

# Find client imports to verify they match the file context
grep -rn "from.*supabase/server\|from.*supabase/client\|from.*supabase/middleware" src/ --include="*.ts" --include="*.tsx"
# Find 'use client' files that import server client
grep -rn "use client" src/ --include="*.tsx" -l | xargs grep "supabase/server"