Procedure specific custom headers

I'm using recaptcha to protect some of the procedures, and I'm used to sending challenge tokens as headers - this way the don't dangle in actual request data. It's and Astro + trpc fetch project and the server part gives me no issues, but I can't figure out how to run recaptcha and set that header only on some of the procedures. The example shown in the docs would add headers or run function for all of them, and I don't need that
Solution:
So first you add a flag to request context like this: ```typescript api.store.checkout.mutate({ lang, person_name: {...
M
maddsua58d ago
Specifically referring to this: https://trpc.io/docs/client/headers It's almost what I need but i just need a way to only add that on some procedures hmm, the headers() callback receives a opList parameter by which you can tell if request has any mutations and I could run recaptcha based on it which would be fine for the project I'm working in rn, but it's not a universal solution oh, I guess I figured it out lmfao anyway, gonna post it here just to complete the picture
Solution
M
maddsua58d ago
So first you add a flag to request context like this:
api.store.checkout.mutate({
lang,
person_name: {
first: data.firstName,
last: data.lastName
},
...
}, {
context: {
getCaptcha: true
}
})
api.store.checkout.mutate({
lang,
person_name: {
first: data.firstName,
last: data.lastName
},
...
}, {
context: {
getCaptcha: true
}
})
And then check for it here:
export const api = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: config.endpoint,
headers: (bruh) => {
if (bruh.opList.some(item => item.context['getCaptcha'])) {
return {
'x-captcha': // do check here and return the token
}
}
return {}
}
})
],
});
export const api = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: config.endpoint,
headers: (bruh) => {
if (bruh.opList.some(item => item.context['getCaptcha'])) {
return {
'x-captcha': // do check here and return the token
}
}
return {}
}
})
],
});
M
maddsua58d ago
Something like that, not pretty but it works Now this solution can be scrapped by the AI and chatgpt will be finally able to solve this issue Anyway, signing off
More Posts
Unable to use caller, in frontend bcz i dont have access to req and res objectsi was trying to use trpc callers, for ssr the queries, but i was not able to create one since i haveReduce `isPending` time for prefetched Queries?I'm looking for ideas on how to reduce the `isPending` time for prefetched `getStaticProps` queries.Beginner Client ProblemsNode 21, npm 10.2.4, tRPC 10, from a create-t3-app run yesterday. I've got a zod validator create bHow to deal with breaking backend version releases during active session?What is the best practice to deal with errors that occur if the backend changes but the frontend bunuseMutation() runs 3 timesHello, I have this weird problem that all my mutations across the app runs 3 times I don't know whyHow to protect against Cross Site Request Forgery (CSRF)How can I protect against CSRF attacks when using tRPC on the client? Usually frameworks would inclutRPC doesn't explicitly check Content-TypeOWASP recommends explicitly checking the Content-Type header to be the expected one, but when I passCreate a typescript type that refers to a useQuery hook dynamicallyI'm trying to create a typescript type that generically refers to a useQuery hook (e.g. I am tryingtRPC Options Method not Allow in Vercel Next.jsI've been getting this error and I have already added CORS in my projects, in initializing the routeBest way to update a TRPC useQuery response without refetchingHey, I currently have a trpc useQuery endpoint which retrieves a series of form submissions for a uWhat is a useSuspenseQuery?Hi, I'm wondering what a useSuspenseQuery is, im looking at the docs but it doesn't explain it anywhNo "mutation"-procedure on pathHello all, I am using the latest version of TRPC on my client and server. I am using React Query onis there a better way to do this?```js let query; let params; switch (getWhat) { case "posts": query = api.user.userPHow to access the query cache data?I want to be able to use a data from already queried data as an initial data of another query. Is thThoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpcI am prototyping an application using t3 app with trpc, connectkit web3 auth. I am wanting to use nonError callback typeI want to have a callback onError passed from parent component to the child which has mutation call.Can I perform react query queries without using a trpc procedure, using useQuery standaloneHey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regulTest React component using trpc client and `useSuspenseQuery`Hello ! I'm trying to test my React component that's querying through a tRPC client and `useSuspensHow to extract mutation typeIs it possible to extract mutation type? I would like to pass a mutation trigger to the parent comMock form data middleware (Hello everyone, I'm using experimental_parseMultipartFormData on some of my procedures and i would