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):
- src/trpc/server.ts (here createTRPCContext is wrapped in cache, and I'm not sure how to proceed adding the auth here)
- src/app/api/trpc/[trpc]/route.ts (here the conext is actually created I guess)
So any help understanding all this structure would be greatly appreciated! Thanks!
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!
