T
tRPC

❓-help

How to pass through authentication header when using createTRPCProxyClient and RSC?

Iianh.eth12/8/2023
Hi - we are having a great time with tRPC, and have it working well in a Next14 + React Server Components environment. However, we're seeing that the headers aren't being passed through when a trpc query call is made from within a RSC component via await trcp.profile.me.query() I looked into trying to pass through the headers and there's no way to access the actual headers from the current request, only to add new ones via headers() function. What is the preferred way to pass through auth headers in a client => RSC => trpc.query => server environment?
BBeBoRE12/9/2023
You need to pass the headers to your query client provider
Iianh.eth12/12/2023
Sorry, I must have not been clear. This is for React Server Components, where the rendering occurs 100% on server. So the client implementation doesn't get touched, this is exclusively on the server side. We're currently using the proxy implementation, not the SSR implementation, but I'm unclear how to go from RSC context (req,res) and apply that req.headers.authorization to the proxy client, which is initialized elsewhere. It would be cumbersome to require each RSC component to pass an auth header, but I'm failing to see any other options here.
BBeBoRE12/12/2023
Oh my bad, have you tried to use appRouter.createCaller and then pass in the context. You really shouldn't be using createProxyClient it just adds way too much overhead since you'll be doing http calls.
BBeBoRE12/12/2023
Server Side Calls | tRPC
You may need to call your procedure(s) directly from the same server they're hosted in, router.createCaller() can be used to achieve this.
Iianh.eth12/12/2023
You may need to call your procedure(s) directly from the same server they're hosted in
So - this would generally be the right solution, but our trpc server is not within the nextjs trpc webapp. We have multiple diff nextjs servers all proxying calls (via next.config.js rewrites) from web -> API server. So the flow sorta looks like this: browser =[auth cookie]=> vercel RSC (server action) =[proxy auth header]=> tRPC fastify server Really what I'm trying to figure out is how to add the auth header at the RSC step.
BBeBoRE12/12/2023
Then you probably need something like this
/* eslint-disable @typescript-eslint/no-shadow */
import * as context from 'next/headers';
import {
createTRPCProxyClient,
loggerLink,
unstable_httpBatchStreamLink,
} from '@trpc/client';

import { AppRouter } from '@ei/trpc';

import { getApiUrl, transformer } from './shared';

export const api = createTRPCProxyClient<AppRouter>({
transformer,
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === 'development' ||
(op.direction === 'down' && op.result instanceof Error),
}),
unstable_httpBatchStreamLink({
url: getApiUrl(),
headers() {
const heads = new Map(context.headers());
heads.set('x-trpc-source', 'rsc');
return Object.fromEntries(heads);
},
}),
],
});
/* eslint-disable @typescript-eslint/no-shadow */
import * as context from 'next/headers';
import {
createTRPCProxyClient,
loggerLink,
unstable_httpBatchStreamLink,
} from '@trpc/client';

import { AppRouter } from '@ei/trpc';

import { getApiUrl, transformer } from './shared';

export const api = createTRPCProxyClient<AppRouter>({
transformer,
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === 'development' ||
(op.direction === 'down' && op.result instanceof Error),
}),
unstable_httpBatchStreamLink({
url: getApiUrl(),
headers() {
const heads = new Map(context.headers());
heads.set('x-trpc-source', 'rsc');
return Object.fromEntries(heads);
},
}),
],
});
I'll see if I can find a beter example

Looking for more? Join the community!

Recommended Posts
Integrating tRPC with Clerk Authentication in an Existing Next.js "Turborepo" ProjectHello, I am currently working on a Next.js application within a Turborepo setup and am looking to inHelp understanding how to deploy tRPC in monorepo.Hi All, I read in the FAQ that most benefits come from using tRPC in a monorepo. So if i want to buibest way to delete trpc?I want to delete TRPC from a Nextjs project. What is the most appropiate way to take it out? ThanksQuery string paramsHi , new to tRPC, is there a way to send query string params with tRPC when making a request ?Error running dist/client/index.jsGot this error during node dist/client/index.js I have ran tsc -b also followed as same as in docsTRPC, Cookies, fetchI try to cakl my backend inside trpc procedures and I an using fetch for this. Is it possible so tha`The property 'query' in your router collides with a built-in method`I'm seeing an error (attached) where I can get autocompletes on TRPC in the file where the client isUsing trpc backend across multiple seperate front endsI want to create a nodejs backend with trpc to expose some api endpoints. This will then be called aHow can I Prefetch on client or server component on App router Nextjs?how can I pretch data on app router nextjsPage couldn't be rendered statically because it used `cookies`Has anyone had this issue? I'm using trpc in a server component and in localhost it works fine but iComparing tRPC and Server Actions for a SaaS Template: Seeking Insights and AdviceHey everyone 👋, I've just posted a detailed comparison and discussion request on Reddit about tRPCsetting up trpc in next 14Pleaase I need help on how to integrate trpc in next js 14, please help mecreateTRPCReact transformers getting type errorHave anyone tried migration from TRPC router to app router apiI was learning the trpc and I wanna know to go back and forth with trpc and restapi. can anyone knowHas anyone integrated trpc + udp (quic/webtransport api)?Hi all, I'm thinking about taking advantage of quic for a certain part of my project. Basically I'm onSuccess invalidateI'm trying to follow along with Theo's T3 tutorial using the latest Next version and the app routerReact Query client and caller client under one objectWould love to know if it is possible to have caller and react query clients under one object? I feeI want to refetch and set the inital data of an useStateHello guys, currently i am retrieving the data i use in useState with `SSR`, but i want to use some