Issue with trpc fetch when trying to pass Clerk auth to context
I'm currently trying to add Clerk auth to my trpc context, but I just keep getting this error:
Error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
This is my code:
context.ts
trpc.ts
E
entropy•357d ago
Everything also seems to work fine when I log in and make a call to my protectedProcedure, it's only a problem when I log out.
L
Lucas•357d ago
Kinda seems like you're getting the default 404 html page from next as a response. So maybe my first guess would be that you set up the route handler incorrectly
At least everytime I encountered an error like that it was because I had set up something wrong in the route handler
did you export the methods correctly in the route handler like this?
E
entropy•357d ago
Yep I did here's my route handler
api/trpc/[trpc]/route.ts
So after a lot of messing around it seems to caused by something with the Clerk Middleware. I'm still not exactly sure what is the problem or why though.E
entropy•357d ago
here's a link to a repo with the same issue as well:
https://github.com/Entropy-10/clerk-trpc-issue
GitHub
GitHub - Entropy-10/clerk-trpc-issue
Contribute to Entropy-10/clerk-trpc-issue development by creating an account on GitHub.
K
koko#1337•357d ago
I implemented this the other week, this is how I added the clerk auth to the context
and for the middleware:
in my case any TRPC calls would happen post auth, so I added the auth check in the middleware, but feel free to remove that if your case differs
E
entropy•356d ago
I see thank you for the information! It turns out that Clerk will send everything to the sign in page including api's so I just had to add my api route for trpc to my clerk middleware public routes.
K
koko#1337•355d ago
cool, glad I was of help 🙂
S
siobe•190d ago
i'm new here so sorry if i'm asking in the wrong place, but did this code snippet work for you when using the app router or pages router?
been trying to implement Clerk authentication with t3 using the app router and running into issues with Clerk's getAuth() and auth() methods both returning null for auth specifically in this line:
auth: getAuth(req),
in the createInnerTRPCContext
methodC
carnegiepilled•182d ago
same - any update here? @siobe @koko#1337 @Entropy @CsarChvz
been stuck on this for a whole day now
E
entropy•182d ago
you just need to add your api to your public routes on the Clerk middleware so:
Though if you are following the Clerk docs and use the matcher they have it should prevent your middleware from running on
/trpc
or /api
endpoints
C
carnegiepilled•182d ago
thanks for getting back to me! @Entropy
C
carnegiepilled•182d ago
okay so i did this
C
carnegiepilled•182d ago
will give it a run
C
carnegiepilled•182d ago
and also just to be clear i'm using
getAuth
to create the context - does that work with your solution?C
carnegiepilled•182d ago
would masively apprecoate any help you can give :)
E
entropy•182d ago
They actually have a guide that can help you setup tRPC with Clerk here that I'd recommend following.
https://clerk.com/docs/references/nextjs/trpc
Integrate Clerk into your Next.js 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.
C
carnegiepilled•182d ago
yeah i already setup that whole thing
i've been like banging my head against the wall on this for >1d its so frustrating bc those docs don't work + are old
C
carnegiepilled•182d ago
yeah still not working btw
E
entropy•182d ago
also it's redundant to have the
/
and /api/(.*)
routes in your publicRoutes
since the matcher already prevents the middleware from running on those routes.
Is that after you go through the sign in flow?C
carnegiepilled•182d ago
yeah
im signed in already
E
entropy•182d ago
and in the application code you can get the session, but just not on your tRPC context?
C
carnegiepilled•182d ago
yep
ive run out of ideas
is it that hard to migrate to nextauth?
E
entropy•182d ago
Uh I mean really depends on what you need but I would say compared to Clerk that next-auth is a bit harder to setup. I found this github really quickly if you want to take a peak at their implementation. Otherwise I would wait for someone more knowledgeable to help out.
https://github.com/solaldunckel/next-13-app-router-with-trpc
GitHub
GitHub - solaldunckel/next-13-app-router-with-trpc: Next 13 app dir...
Next 13 app dir with tRPC, Kysely, Planetscale and Turborepo - GitHub - solaldunckel/next-13-app-router-with-trpc: Next 13 app dir with tRPC, Kysely, Planetscale and Turborepo
C
carnegiepilled•182d ago
thanks will take a look
is that a working implementation though? the repo is from 6 months ago
E
entropy•182d ago
no clue just the first thing I found sorry
C
carnegiepilled•182d ago
do you have a working implementaion of app router + trpc + clerk?
if so could i see your code?
E
entropy•182d ago
Let me check to see really quick this was from a while ago when I was testing for a tech stack, but decided to not go with tRPC or Clerk
C
carnegiepilled•182d ago
okay! thanks
:)
E
entropy•182d ago
I'm curious if you did
const auth = getAuth(opt.req)
and then just logged auth
what that returns.C
carnegiepilled•182d ago
null
i already tried them all
C
carnegiepilled•182d ago
E
entropy•182d ago
hmmm and sorry to ask again, but if you did
auth()
in your server components it returns the correct info?C
carnegiepilled•182d ago
let me try that - thanks for the suggestion!
S
siobe•182d ago
GitHub
GitHub - isaackoz/t3-app-router-clerk
Contribute to isaackoz/t3-app-router-clerk development by creating an account on GitHub.
S
siobe•182d ago
here's a working repo but uses cookies from opts to verify the session rather than the getAuth method
i couldn't get it to work when i passed opt.req to auth() or to getAuth()
C
CsarChvz•180d ago
GitHub
GitHub - isaackoz/t3-app-router-clerk
Contribute to isaackoz/t3-app-router-clerk development by creating an account on GitHub.
4.8KMembers
View on DiscordMore Posts
BullMQ + TRPCCurious how to configure BullMQ with TRPC correctly. Currently I have the queue, queueevents, and thTrpc refetches all of the queries when i run a mutationIm running node 16.15.0 with Pnpm
When i run a mutation for some reason all of the queries get refettRPC Client on NodeJS server keeps complaining that no fetcher has been configuredHey, I want to create a tRPC setup where I have one server (works fine) and then a client which is cBest Practice to Fetch a Query OnDemandWhat's the best practice to fetch a query on demand?
I don't have the context for the query's inputOutput Response ShapeI'm wondering, is the output response shape locked in, or can we modify it in any way? For example:
Need help```js
import {initTRPC} from '@trpc/server';
import * as trpcNext from '@trpc/server/adapters/next';useQuery hook modify data on fetch.Hello is it possible to modify the data that is fetched with useQuery hook in tRPC basically im storAccepting a DecoratedProcedure with inputs and outputs that extend some given typesIs there any way to accept a DecoratedProcedure that extends { mutate: Resolver<TProcedure> } where useEffect and useMutation error about conditional rendering of hooksI am using t3 stack with tRPC, and I am trying to mark all emails as seen when the page loads by usiGuide to create an adapterIs there a guide on the docs that explains the basics to create an adapter?Does tRPC websocket client supports wss protocol?After changing the websocket client url from ws to wss, it fails to connect. Tested out the connectiGet the type of context after middlewareHow can I get the type of the context of `adminProcedure` from
`export const adminProcedure = public[How To] Properly use trpc UseQuery based on currently selected itemI have a component with a video element and a flatlist. I want to utilize a trpc query to get the viData from useQuery is inferred as data: {} | undefinedMy server query returns data from database via ElectroDB. TypeScript can statically infer all properCannot access 't' before initializationHi,
I'm migrating my app to a mono repo but I just can't get past this error for some reason `CannottRPC Middleware consuming memory limit on VercelHi all, I'm running into a weird error where my tRPC middleware to enforce that a user is authed, isUsing react-query parameters in tRPC for useQueryHello, the useQuery from react-query can take parameters such cacheTime, staleTime, refetchOnWindowFtRPC type error on turborepo```Types of property 'query' are incompatible.
Type 'inferHandlerFn<{}>' is not assignable to tyStack for expo?Can someone recommend a stack for an expo project? I'm considering trpc + fastify + fly.io, but havImplementing a "Prisma model converter middleware"Bit of a fancy name, but if you've ever worked with Symfonys param converters (especially the Doctri