RLS Next-Auth Supabase Adapter

Question

I am making a fullstack app with Next.js 14 app router and trying to setup RLS in Supabase. I am using the Supabase adapter for next-auth and I am following the docs here https://authjs.dev/getting-started/adapters/supabaseAfter setting up the adapter and injecting the supabase access token in the session succesfully, I am not able to complete this next stepThe supabaseAccessToken is now available on the session object and can be passed to the supabase-js client. This works in any environment: client-side, server-side (API routes, SSR), as well as in middleware edge functions!// Use `useSession()` or `unstable_getServerSession()` to get the NextAuth session.
 
const { supabaseAccessToken } = session
 
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  {
    global: {
      headers: {
        Authorization: `Bearer ${supabaseAccessToken}`,
      },
    },
  }
)
// Now you can query with RLS enabled.
const { data, error } = await supabase.from("users").select("*")I am having all the trouble in the world trying to put the supabaseAccessToken in the headers like shown in the docs.I create my Supabase client in a dedicated file located in  /src/lib/supabaseClient.ts I cannot do anything with await in there to set the token like  const supabaseAccessToken = await getServerSession(authOptions)Am I wrong to create my supabase client in the src folder? Should I create a client in every component, endpoint etc where I need to work with supabase? Should I get supabase/ssr package? I am pretty lost.

Silver Fox · Answer

From my /src/lib/supabaseClient.tsimport { createClient } from "@supabase/supabase-js";
import { authOptions } from "../app/api/auth/[...nextauth]/route"
import { getServerSession } from "next-auth";

// const session = await getServerSession();
// // const session = await getServerSession(authOptions);
// console.log('Session from supabaseClient.ts: ', session);

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseAnonKey,
  // {
  //   global: {
  //     headers: {
  //       Authorization: `Bearer ${supabaseAccessToken}`,
  //     },
  //   },
  // }
);Doing const session = await getServerSession(); gets me a plain 'default' session, doing const session = await getServerSession(authOptions); gets me the session I have injected the token in but when I use that one in the file, it breaks my app and points to how I am trying to use cookies in my auth flow(I set some user data in cookies there),And even if it worked, there's the fat I cannot await at all here so even if I was able to get the session while passing authOptions, I would not be able to await the promise to be able to pass the access token in Authorization header.

RLS Next-Auth Supabase Adapter

1 Reply