Configuring Clerk on the latest release of t3 with tRPC
Could anyone share a working example of configuring Clerk on the latest release of t3 with tRPC? I'm trying to follow Theo's t3 tutorial but Clerk and t3 have evolved enough since the recording to get me confused what would be the best practice. I am particularly interested in basic examples of
trpc.ts
and middleware.ts
files.87 Replies
Please! Integrate clerk with the new t3 app router!
trpc.ts:/
I put out a demo doing this yesterday - https://x.com/nicoalbanese10/status/1721560882994377087?s=20
Big shout to nico!
Ty man
I did this repo
https://github.com/CsarChvz/t3-appRouter-mantine-clerk-trpc
GitHub
GitHub - CsarChvz/t3-appRouter-mantine-clerk-trpc
Contribute to CsarChvz/t3-appRouter-mantine-clerk-trpc development by creating an account on GitHub.
nice!
And idea how to get Clerk auth to flow through into trpc context? I'm getting null values when trying to access my Clerk user details
@vibbin having the same issue! :/
I need to do this too
Same
I can't get this to work with t3 after a few hours of trying. It works with a regular next-app with kirimase (kirimase's regular implementation of trpc is using nextcachelink vs batchstreamlink which may be the reason). I give up though. Would defer to @JacobMGEvans (Rustular CAO) who may be able to help. One thing I would mention @vibbin is that when using the app directory, clerk docs says to use auth() rather than getAuth().
@Nico yep!
Also it gives me an error with trpc idk why
Yeah, there was an issue with the types, is that error you are referring to?
If it is the type issue:
https://github.com/clerk/javascript/pull/2049
GitHub
fix(nextjs): Improve type inference for the return type of auth hel...
Description
Backport of #2047
Checklist
npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If appli...
Emmm, no
Let me show u
Did anyone solve it?
Also looking for a solution here
I'm having issues whenever I try to make my root page public
Any clerk call from a trpc router rretuns null values.
I tried useUser but doesn't work
@JacobMGEvans (Rustular CAO) no unfortunately clerk doesn't return a user in the auth() call.
Clearing my cookies and cache and then logging in and console-logging the headers in the TRPC API route handler has some interesting findings that may lead to properly identifying the issue:
1) clerk cookies exist and seem like everything necessary for the auth function
2) clerk related headers conveying different message:
[ 'x-clerk-auth-message', '' ],
[ 'x-clerk-auth-reason', 'header-missing-non-browser' ],
[ 'x-clerk-auth-status', 'signed-out' ],
'x-clerk-auth-message' => { name: 'x-clerk-auth-message', value: '' },
'x-clerk-auth-reason' => {
name: 'x-clerk-auth-reason',
value: 'header-missing-non-browser'
},
'x-clerk-auth-status' => { name: 'x-clerk-auth-status', value: 'signed-out' },
Which is what i'm assuming is leading to the user object equalling null.
I've been trying to find a solution but no luck yet. Any thoughts?
based on what theo said on today's stream a solution would be replacing server.ts to:
Does it works?
this seems to work for me as a temporary solution, but how would I continue to split edge and lambda, like in the OpenStatus repo? I previously had:
server.ts
shared.ts
I don't know how merging routers affects a caller but I understand that the previous method makes an API request, and you define the runtime in
/api/trpc/edge/[trpc]/route.ts
. By using a caller, it doesn't make an API request, so you are now responsible for setting the runtime in the appropriate page.tsx
routesWould be interested in listening to the stream/discussion - what platform was that on?
Theo - t3․gg
YouTube
STREAM VOD: Testing with Prime, TS benchmarks, camera rants and more
Intro - 00:00:00OFFSET 35:30 - 00:35:31Prime unit testing - 00:40:11End of Prime Testing vid - 01:18:45TypeScript benchmarking tool - 01:25:36End of TS bench...
I'm glad to know it's not just me because I spent the entire weekend trying to get Clerk running on T3 using app router and couldn't figure it out.
Still can't figure this out 😦
GitHub
bug: Recent Commit Breaks Clerk Based Authentication w/ tRPC · Issu...
Provide environment information "initVersion": "7.23.2" System: OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa) CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz Memory: 9....
hey I was able to figure out the issue
it was with a recent change to the headers in the trpc provider
but it seems maybe theo mentioned a better fix on stream?
any updates on clerk + trpc + app router?
afaik there is still no complete implementation with no issues
were you typing?
@Spark
I haven’t seen a full implementation yet. I have used createCaller with some success in server.ts, but I am running into issues with useMutation on the client atm.
I have Clerk + T3 fully integrated, except for a nasty bug we are stuck on.
With this bug, authenticated requests to the TRPC server can only be made after logging in and refreshing the page.
(see https://discord.com/channels/966627436387266600/1174091052102197398/1174091052102197398)
No idea why!
any word from clerk devs yet?
this is kinda insane
trpc + app router has been out for so long
Im discussing this with Roy at Clerk https://discord.com/channels/856971667393609759/1172416025271226409
the one possible "solution" is this, in createTRPCContext:
Caveat: subject to rate limit
I was just made aware of this thead. The suggestion Theo made on stream seems like the correct path here. I suspect that once that's implemented the req.header might include the cookie information that clerk is expecting. What's the issue with Edge/Lambda @Spark?
Does anyone happen to have a relatively basic repo trying Theo's suggestion they can share with me to look into this?
And unfortunately most of the conversation with shikishikichangchang on the Clerk discord was more general stuff or talk about App Router. Its not really relevant here.
You can solve "2) clerk related headers conveying different message:" by making the trpc route public. And since usually auth checks are done trpc side this isn't an issue. Add something like
publicRoutes: ["/api/<your trpc route>"]
or publicRoutes: ["/api(.*)"]
to your middleware.ts. The latter makes all api routes public. However after that step the cookie from Clerk still isn't normally in the header. What Theo mentioned might solve that -- need to look into that.Using a caller fixes all my problems, but I had to tweak
server.ts
to make it build without errors, but still havent solved the issue using the proxyclient
nothing Clerk specific, just that using createCaller forces you to set the runtime in page.tsx instead of the way I was splitting edge/lambda before
@JacobMGEvans (Rustular CAO) can we get some more support on this issue? clerk has been silent + 100s people struggling
What do you mean Clerk has been silent?
@JacobMGEvans (Rustular CAO) it's quite clear – there are 6/7 open issues on discord, mutliple ad-hoc discussions in the general channels, and 2 issues on github – and there has been very minimal interaction between clerk staff and the community if at all
On the Clerk Discord?
i think between clerk, theo, and trpc discords there are 12ish open issues yes
and almost 0 support from clerk officially
We officially give support in the Clerk discord 🙂
really? then why are there 4+ active issues on this and zero support from clerk in your server?
these are just the ones i follow
Ping me & Roy in those
definitely! also - i don't mean to be rude - just being transparent and voicing the signals from the community that the support on this has been quite far below what you'd usually expect for a p0 (!!!) issue for paying customers
After speaking with Roy last night, I will be releasing a video for the team @JacobMGEvans (Rustular CAO) demonstrating one symptom, as he said this will be useful. I can tag you when this goes up as well. Eating some breakfast before I get going
Whatever we can do to help the team troubleshoot the issue faster, here to help with as long as we have bandwidth !
You're fine, it's frustrating. We had a week we're it was me and another DevRel doing tickets and we couldn't keep up. That's on us
thank you for understanding!
Discord is arguably one of the most confusing comms platforms too, my last start up we were Discord centric and it was a living hell, so we totally understand the thread spread
Me and Roy are working on improving that, he wrote up some support features for a bot and I'm adding some stuff too
There is still no clear solution for this right?
Like a simple example repo?
@NotLuksus I have Clerk working with tRPC in this example repo, however there is still one bug present in my implementation where the
auth
object on the tRPC router server-side is only updated upon a full-page reload.
You can check the example repo here:
https://github.com/paulmikulskis/popup
If you have a suggestion on how to complete the fix, please open a branch so all can benefit 🙏The solution is likely due to needing to call
auth()
from the client-side state, but I am not 100% clear on how to do this just yet. Roy provided a reasonable approach that I want to dig into a bit more today for inserting the client-side Clerk auth state into the tRPC context.
(see https://discord.com/channels/966627436387266600/1170848397570359376/1174696019720671304)
The issue with createCaller
is that this solution is somewhat of an anti-pattern, since we want to keep the tRPC Context as the "caller"
@JacobMGEvans (Rustular CAO) @Roy Anger
Video walkthrough as promised, with two replay recordings for demonstrating:
- what happens when things don't work
(Replay recording 1 👉 https://app.replay.io/recording/builderclerk-broken--beda20eb-378a-4000-9aa4-5b558d905a82)
- what happens when things do work
(Replay recording 2 👉 https://app.replay.io/recording/builderclerk-working-demo--dae89c78-6cef-45f9-862b-d9ce26abcde1)
Video walkthrough (3-minutes): https://youtu.be/ct47SQF0NMo
Would be great to know when you folks are all set with the Replay links so I can delete them.Did you add this to Clerk support channel too @pineappaul
I have not. I Will add shortly
Yes, please add this to your iframe thread so I can help you.
While trying to figure this out I noticed that this is an issue that, at least for me, only occurs in dev.
In my production deployment I have full access to the clerk user / auth objects in trpc
Anyone got any lucky on getting this sorted out? Using the createCaller is indeed the best solution?
@LeoMachado how do you plan on integrating the
createCaller
paradigm into your NextJS app?
I might be totally missing the mark here, but it feels that this is an anti-pattern, so I am curious on your take thereT3 has or is about to release a fix for this.
anyone have a clerk example working with the newest create-t3-app? where do we set auth?
i do
GitHub
feat: skip http for trpc rsc calls by juliusmarminge · Pull Request...
Closes #1669
Closes #1656
Closes #1650
Closes #1639
Closes #1599
Adds a custom link that just invokes the procedures directly with a cached createContext function, instead of using http even for RS...
depends tho– this is only required if you're using RSC ^^
if you don't want to use RSC for some reason, then the solution is even easier
search the help threads for the cookies solution - its really easy
right, I implemented those changes, but are you still setting auth in trpc.ts on the ctx?
@Spark
yes
awesome, thanks! didn't realize we could just use the auth() function instead of getAuth() now. have you been able to useMutation? I keep getting an error, but it might just be my mistake.
what's the error?
auth is working? Is this for App router with RSC or pages?
Working for me after the changes that were made last week or 2
Rsc app dir
Has anyone got this to work and not return null for the auth object ?
I got it to work but auth() only returned user.id but if you do currentUser() you get the full object
Are there any api limits for doing that method? If possible could you share the code for how you did it? Thanks!
No limits afaik but it was basically just replace the next auth call to getserversession with currentUser
from which clerk libraries are those methods from ? Appreciate you helping
Do you know if I have to add in these changes too or is this unrelated https://github.com/t3-oss/create-t3-app/pull/1670/files
Yes those changes were necessary
I had the version prior and just recreated the difference on my repo
makes sense, if possible could you share what your context.ts file looks like?
Also would this work if im using Pages router instead ? would I need to add in those changes in the t3 link above?
If you are using pages router I don't know
I was under the understanding that for pages router you could just use it but I haven't used it in a while
In some repos it works I think for Pages router but in my main repo the auth returns null.
Im still using import { withClerkMiddleware } from "@clerk/nextjs/server"; which is from @clerk/[email protected] I would ideally like to use import { authMiddleware } from "@clerk/nextjs"; which is in the latest version of @clerk/nextjs however when I upgrade I get the following error which is documented in this thread I put in clerk discord. Says it cant find the #components library.
https://discord.com/channels/856971667393609759/1177080652630327326/1177080652630327326
middleware.ts
server/trpc.ts
part 2
TRPC Provider is
Running next 14.0 on clerk v2.27 with app router. full t3 app with drizzle to start and then adding clerk by following the nextjs tutorial on clerk docs, following the t3-app with auth example very closely to intergrate the trpc parts. You know you are doing something wrong once you get type errors
when you pass cookies into trpcreactprovider, what is done with those cookeis?
@KiKo
I'm simply following the example in create t3 app
I just did what was there
I'm guessing clerk needs the cookies in the trpc middleware
hmmm, i must be missing something, what example is this?
And thanks for responding! Im banging my head over here, been at this for hours
There was an example somewhere. This thread is a few months old now also
Remembering now. I took clerk + trpc getting started guide and applied it to t3 app
Integrate Clerk into your Next.js Pages Router app with tRPC | Clerk
Learn how to integrate Clerk into your Next.js application using tRPC. tRPC can be used with Clerk, but requires a few tweaks from a traditional Clerk + Next.js setup.
thanks! i appreciare it!