Issues with Authentication and Session Handling in Next.js with Supabase

Question

Description: I'm working on a project using Next.js 13 and Supabase, where I'm trying to inject types and use authentication with cookies. I've managed to display the page but am unable to fetch the restricted rows correctly for the table on the page. The displayed table is empty, and I suspect the issue lies with how I'm handling cookies and session authentication. I believe I might be handling the session authentication improperly, which could be why I can't fetch the data. Any guidance would be greatly appreciated!

File Structure:

gestion-gastos-supabase/
  app/
    auth/
      callback/
        route.ts
      sign-in/
        route.ts
      sign-out/
        route.ts
      sign-up/
        route.ts
    ingresos/
      page.tsx
    login/
      messages.tsx
      page.tsx
    _examples/
      client-component/
        page.tsx
      route-handler/
        route.ts
      server-action/
        page.tsx
      server-component/
        page.tsx
    auth-form.tsx
    favicon.ico
    globals.css
    layout.tsx
    page.tsx
  components/
    LogoutButton.tsx
    NextJsLogo.tsx
    SupabaseLogo.tsx
  lib/
    supabase-client.ts
  types/
    supabase.ts
  .env.local
  .gitignore
  middleware.ts
  next-env.d.ts
  next.config.js
  package-lock.json
  package.json
  postcss.config.js
  README.md
  tailwind.config.js
  tsconfig.json

Code Snippet for ingresos/page.tsx:

import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
import supabase from "@/lib/supabase-client"
export const dynamic = 'force-dynamic'

export default async function obtenerIngresos() {
  const {data, error} = await supabase.from("ingresos").select("*");

  return (
    <div className="flex flex-col">
        <div className="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div className="overflow-hidden">
              <table className="min-w-full text-center text-sm font-light">
                <thead className="border-b bg-neutral-800 font-medium text-white dark:border-neutral-500 dark:bg-neutral-900">
                  <tr>
                    <th scope="col" className=" px-6 py-4">#</th>
                    <th scope="col" className=" px-6 py-4">Fuente</th>
                    <th scope="col" className=" px-6 py-4">Cantidad</th>
                    <th scope="col" className=" px-6 py-4">Fecha</th>
                  </tr>
                </thead>
                <tbody>
                  {data?.map((item, index) => (
                    <tr key={index} className="border-b dark:border-neutral-500">
                      <td className="whitespace-nowrap  px-6 py-4 font-medium">{index + 1}</td>
                      <td className="whitespace-nowrap  px-6 py-4">{item.fuente}</td>
                      <td className="whitespace-nowrap  px-6 py-4">{item.cantidad}</td>
                      <td className="whitespace-nowrap  px-6 py-4">{item.timestamp_with_time_zone}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
  );
}

Code Snippet for lib/supabase-client.ts:

import { NextApiRequest, NextApiResponse } from 'next'
import { createClient } from '@supabase/supabase-js'
import { Database } from '../types/supabase'

const supabase = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL as string,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
)

export default supabase

Problem: I'm facing difficulty in fetching restricted rows. The table is empty, and I think the issue is related to how cookies are being passed to Supabase and how I'm handling session authentication. I'm not sure how to pass the cookies correctly, handle the session properly, and use them with type injection.

Question: How can I correctly pass the cookies to Supabase, manage the session authentication, and use them with type injection? Am I doing this correctly, or is there a better way? What might be the reason I can't fetch the data, and how can I rectify it?

Answer 1

You are currently mixing Supabase clients in your codebase. The normal createClient from @supabase/supabase-js doesn't make use of cookies while the createServerComponentClient from @supabase/auth-helpers-nextjs makes use of cookies for authentication. You need to only use the client from the @supabase/auth-helpers-nextjs when working in a SSR framework like NextJS. The only time you would use @supabase/supabase-js is if you need to make a request using the service_role key in a server component.