Theo's Typesafe Cult•12mo ago

Exposing Supabase Session to TRPC Server

Hi Folks, I'm trying to get my head around trpc, it's working great with drizzle and supabase postgres db. When it comes to auth, I was trying to have trpc context expose both, the supabase client and the session. I'm doing this by editing the t3 trpc createTRPCContext function as follows:

// trpc.ts

interface CustomCreateNextContextOptions extends CreateNextContextOptions {
  headers: Headers;
}

export const createTRPCContext = async (
  opts: CustomCreateNextContextOptions
) => {
  const { req, res } = opts;
  const supabase = createServerSupabaseClient({ req, res });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return {
    db,
    supabase,
    session,
    ...opts,
  };
};

// trpc.ts

interface CustomCreateNextContextOptions extends CreateNextContextOptions {
  headers: Headers;
}

export const createTRPCContext = async (
  opts: CustomCreateNextContextOptions
) => {
  const { req, res } = opts;
  const supabase = createServerSupabaseClient({ req, res });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return {
    db,
    supabase,
    session,
    ...opts,
  };
};

Notice that createServerSupabaseClient needs a Request and Response passed in, this is why I've modified the opts parameter to extend CreateNextContextOptions, instead of it just being {headers: Header}. Now I need to find a way to pass in the Request and Response objects when this function gets called in server.ts

// server.ts

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

// server.ts

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

but I'm not really sure how to do it, nor if this is the right approach at injecting supabase and the session in trpc.

Solution:

Hi Matheus. sorry I did not get back to you, I did eventually manage to get it working by using the supabase route handler client instead, which only requires the cookies to be passed in ```TypeScript export const createTRPCContext = async (opts: { headers: Headers }) => { const supabase = createRouteHandlerClient<Database>({...

Jump to solution

2 Replies

Alky•12mo ago

Are you sure you need to pass the Request and the Response? I was looking at the supabase docs, and it seems that you need two environment variables and the cookies, which can be accessed through the cookies()from 'next/headers'

Solution

Dancamdev•12mo ago

Hi Matheus. sorry I did not get back to you, I did eventually manage to get it working by using the supabase route handler client instead, which only requires the cookies to be passed in

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const supabase = createRouteHandlerClient<Database>({
    cookies: () => cookies(),
  });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return {
    db,
    supabase,
    session,
    ...opts,
  };
};

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const supabase = createRouteHandlerClient<Database>({
    cookies: () => cookies(),
  });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  return {
    db,
    supabase,
    session,
    ...opts,
  };
};

Thanks for the helpful advice!

Gaming

Programming

Exposing Supabase Session to TRPC Server