How to forward headers (cookies) w/ Tanstack Start

I followed the example repository to get up and running, but I can't seem to get cookie-based authentication to work during the ssr pass. Just doesn't look like the headers are being forwarded on to the fetch call. I tried attaching ...(typeof window === 'undefined' && headers: getHeaders()})...(typeof window === 'undefined' && headers: getHeaders()}) to the createTRPCClientcreateTRPCClient call in router.tsxrouter.tsx which works in dev and fails in build (probably because that function isn't supposed to be used there). Any help would be appreciated!

Solution

After playing around some more, I was able to simplify it to

const getIncomingHeaders = createIsomorphicFn()
    .client(() => ({}))
    .server(() => getHeaders());

// ...

const trpcClient = createTRPCClient<TRPCRouter>({
    links: [
        httpBatchStreamLink({
            headers: getIncomingHeaders(),
            transformer: superjson,
            url: getUrl(),
        }),
    ],
});

const getIncomingHeaders = createIsomorphicFn()
    .client(() => ({}))
    .server(() => getHeaders());

// ...

const trpcClient = createTRPCClient<TRPCRouter>({
    links: [
        httpBatchStreamLink({
            headers: getIncomingHeaders(),
            transformer: superjson,
            url: getUrl(),
        }),
    ],
});

Jump to solution

How to forward headers (cookies) w/ Tanstack Start

How to forward headers (cookies) w/ Tanstack Start

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads