T
tRPC

NextJs middleware broken by tRPC

NextJs middleware broken by tRPC

MMugetsu10/25/2022
Hi, I have a NextJs middleware that is redirecting to the login page. Basically an Auth guard over my all pages and apis but I have a problem with tRPC api routes. Whenever NextJs middleware pickup /api/trpc call and there is no session it tries to redirect to the login page breaking the redirect and trpc itself. Is there a way to get this working so redirect would actually work as expected?
AKAlex / KATT 🐱10/25/2022
You might need a custom link at the end to deal with it Unsure what you expect the trpc api request to do here though
MMugetsu10/25/2022
yeah I was looking at links but cant actually get to understand them
AKAlex / KATT 🐱10/25/2022
I think you should exclude the trpc api requests in your middleware
MMugetsu10/25/2022
But then i need to handle unathorized on the client side like in queryclientconfig. I was expecting I would be able to handle this with nextjsmiddleware which would be much simpler having guard in one place
AKAlex / KATT 🐱10/25/2022
You're on your own here, I'm afraid. Nextjs middlewares have a lot unexpected behaviours when it overrides the api calls like this - I don't use them myself and don't have the capacity to solve your problems with them
MMugetsu10/25/2022
I see. Yeah I've been searching for a few days already. I guess I will go with client handle for trpc then. Thanks for quick response tho @alex / KATT . Loving tRPC keep up the good work ❤️
UUUnknown User10/26/2022
Message Not Public
Sign In & Join Server To View
MMugetsu10/26/2022
@Bennett My usecase is simple. I dont need to expose my api to external clients so its pure backend for fronted api and everything of the app must be gated behind OneLogin oauth. So Ideally with use of the nextJs middleware I suppose to be able to authorise my app within single place for all my page routes and api routes. With middleware I should be able to achieve checking/validating the authorisation before request even hits my api endpoints. So there would be no extra trip to server for it to checking auth in trpc context and returning auth status to the client and then action on it. With middleware I can remove that extra layer and handle auth before request even tries reaching that particular api route if my understanding is correct. But what I found is that trpc swallows the redirects due to nature of fetch not being able to redirect document. Here are my findings https://github.com/trpc/trpc/issues/3081
UUUnknown User10/26/2022
3 Messages Not Public
Sign In & Join Server To View
MMugetsu10/26/2022
@Bennett How the response json should look like then for it to work?? I believe this wont fix the problem as trpc httplinks are swallowing the response if I respond with 401 anyway.
return NextResponse.json(
{
result: { data: 1 },
},
{ status: 401 }
);
return NextResponse.json(
{
result: { data: 1 },
},
{ status: 401 }
);
UUUnknown User10/27/2022
Message Not Public
Sign In & Join Server To View
MMugetsu10/27/2022
Yeah I would like to have some response to the issue but I believe @alex / KATT is currently busy with doing stable release of v10 👀 For now I exclude trpc api from middleware and handle it globally with reactquery onerror but I believe if Im not mistaken that this will be anyway an issue once NextAuth will figure out middleware database sessions instead of jwt. I havent checked if this is also an issue with current nextauth middleware if I find time I will check
AKAlex / KATT 🐱10/27/2022
Haha, I'm busy with day to day work, trpc is mainly evenings, weekends, and got half a day a week to work at it during work hours 😅

Looking for more? Join the community!

T
tRPC

NextJs middleware broken by tRPC

Join Server
Recommended Posts
Cannot read properties of undefined (reading 'query')Hey folks, Updating from v9 to v10. I thought I'm done, no type errors. Launching the app in dev modUpdating from v9 to v10 - how to access react hooks?Hey folks, I'm updating to v10. I replaced @trpc/react@9.27.4 with @trpc/react-query@10.0.0-proxy-beHow to infer the output of a mutation? The current methods appear to be depreciated.I am attempting to export the bellow utility function to use client side to infer an output type thaTrouble inferring the type of a very simple structure of nested routersA very simple router results in an inference error, causing the client to not be able to infer the rcalling trpc endpoints from vanilla nextJs api routesI'm struggling to find what's the best way to call a trpc endpoint directly from the server. BasicalMutation type issueI'm trying to mutate something like this with tRPC and Prisma ```const updateColumn = trpc.project.uCan I redirect the user from inside my router?I have a query protectedProcedure, which returns an object from my prisma planetscale db What's theInfer the type of ctx for a specific procedureLet's say I had a helper function that I wanted to pass the context to, I can't use the default ContCORS in standalone serverHi, I'm trying to get CORS working in standalone server. Attempted this solution but unfortunatelyQueries break when in production on Vercel; work on localhostThe query is called like this: ```javascript const { data } = api.useQuery(["user.!getCount"], { Can't get client to workHi, I can't get my client to work I'm using Next.js but I have also tried the React method from the Request context inside middleware?Hi, Is it possible to get the request context inside a middleware somehow? I'm trying to migrate data becomes never[] when destructuring with a fallback valueCurrently it doesn't seem possible to set a fallback value on a destructured `data` property, for exSyntaxError Unexpected token u in JSON at position 0 with mutationsI'm trying to use trpc client to await a mutation and just keep getting this error. everything worksLosing the type between the client and serverHello everyone, I am new to tRPC and the magic of types in typescript so I am looking for ideas as tMobile app with tRPCWhat's the suggested way of working with tRPC when it comes to mobile apps? How do you ensure that yHow to use trpc react hooks from an external data sourceHi, I have a monorepo, nextjs and keystone cms. The cms has trpc running, and I managed to get it coNextJS & Keystone CMS, issues when connecting both in a monorepoHello everyone, so I have a monorepo with NextJS and keystone cms, both are running trpc v10beta.15Best practices for implementing an offline applicationHey there! I'm building a full stack react-native app with Expo and a tRPC backend. I'd like for thisomehow when move typed function out of the router files, frontend infer type to be any ?this is inferred corrected since they are in the same file. ``` getX: t.procedure.query(() => { ret