aspirante Posts - Answer Overflow

aspirante

•Created by aspirante on 5/8/2024 in #questions

How to set up Clerk with tRPC in app router?

Hi! I'm having trouble setting up Clerk in the t3 boilerplate using app router. I am quite confused it's the first time I'm trying the new architecture, I am doing this as an exercize and I am trying to understand how things are organized. I think I should be editting the files: - src/server/api/trpc (this is where the createTRPCCOntext is defined, so I guess I should add the auth object here):

export const createTRPCContext = async (
  opts: { headers: Headers },
) => {
  return {
    db,
   //auth: getAuth( ????
    ...opts,
  };
};

- src/trpc/server.ts (here createTRPCContext is wrapped in cache, and I'm not sure how to proceed adding the auth here)

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

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

- src/app/api/trpc/[trpc]/route.ts (here the conext is actually created I guess)

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
    //auth: getAuth(req), ??
  });
};

So any help understanding all this structure would be greatly appreciated! Thanks!

9 replies

Gaming

Programming