Clerk and tRPC "protectedProcedures" on the server.
Hey everyone!
I am trying to integrate Clerk into tRPC so I can create protectedProcedures (using create-t3-app). Essentially I need the "auth" object returned by
getAuth
to be part of the ctx.
Now I got this working nicely for client components.
However I am a bit stuck on how I would implement this for server components... I cannot see a way to pass the NextRequest
object into createContext from the createCaller
function.
Any ideas?5 Replies
@clerk/nextjs
provides auth()
function, you can call it without any arguments and get the auth dataNot sure if this is what you're after but Theo's T3 stack tutorial uses Clerk for
privateProcedure
's:
https://www.youtube.com/watch?v=YkOSUVzOAA4
Here's how he does it:
https://github.com/t3dotgg/chirp/blob/main/src/server/api/trpc.tsNot quite...
The method Theo uses in the video for adding the Clerk auth object to the ctx works a charm.
However, I experimented with the Create T3 App App router and using tRPC on ther server. You know using
import { api } from "@/trpc/server";
instead of import { api } from "@/trpc/react";
.
The problem is (if my understanding is correct) because Next server components don't have access to the Request object, I can't figure how to pass the auth object to the ctx when using tRPC on the server... (really not sure if this is making sense).
I am looking to make sure these requests are authed:
These ones work fine:
I THINK it is because the server side api
call for tRPC is created in server/trpc/api.ts
where the context passed to it doesn't get access to the request object - which the clerk getAuth()
method requires in order to create it's auth object.
where as I can pass the auth object to the clerk context in for client side components similar to the way Theo did in the tutorial.I suppose the question is... how do I get Clerk's auth object in the context when following this example from tRPC?
https://trpc.io/docs/server/server-side-calls#context-with-middleware-example
Server Side Calls | tRPC
You may need to call your procedure(s) directly from the same server they're hosted in, createCallerFactory() can be used to achieve this. This is useful for server-side calls and for integration testing of your tRPC procedures.
Figured it out.
@Matvey was right.
I can add Clerk's auth object to the server side context in
/src/trpc/server.ts
like so: