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

createTRPCClient

createTRPCClient

call in

router.tsx

router.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

Similar Threads

How to forward headers (cookies) w/ Tanstack Start

Similar Threads

Similar Threads

Similar Threads