How to use Session based auth (cookies) with orpc?

[lexer21]

For my backend I'm using NestJS + orpc and better auth. On the frontend I am using OpenAPILink with the contracts to setup the query client. However when I use the query client, the sent requst doesnt contain any Cookies (since better auth is session based), therefore leading to 403. My client setup is the following:

orpc client setup:

const link = new OpenAPILink(contract, {
  url: 'http://localhost:9335/',
  headers: async () => {
    return {
      // This does not have any effect
      Cookie: `access_token=<token value>`,
    };
  },
});

export const client: JsonifiedClient<ContractRouterClient<typeof contract>> =
  createORPCClient(link);

export const orpc = createTanstackQueryUtils(client);

I tried manually setting up the cookie as is described in the documentation, but it seems that it ignores the Cookie key, if i use any other key name it will set the header.

React component:

import { Button } from '@cargox/shared/ui/components';
import { createAuthClient } from 'better-auth/react';
import { ssoClient } from 'better-auth/client/plugins';
import { useQuery } from '@tanstack/react-query';
import { orpc } from '../utils/orpc';
import { JsonIcon } from '@cargox/shared/ui/icons';
import { authClient } from '../utils/auth';

const { useSession } = authClient;


export function Index() {
  const { data: session } = useSession();

  const { data: planetData } = useQuery(
    orpc.planet.list.queryOptions({
      input: { cursor: 1, limit: 1, name: 1 },
    })
  );

  async function login() {
    const { data, error } = await authClient.signIn.sso({
      providerId: 'cargox',
      callbackURL: '/',
    });
  }

  async function logout() {
    const { data, error } = await authClient.signOut();
  }

  return (
    <div className="mt-5 flex w-full justify-center">
      <div>
        {!session ? (
          <Button onClick={login}>Login with CargoX</Button>
        ) : (
          <div className="flex flex-col items-center justify-center gap-2">
            <div className="">Welcome {session.user?.email}</div>
            <div>
              <Button onClick={logout}>Logout</Button>
            </div>
          </div>
        )}

        <pre>{JSON.stringify(planetData)}</pre>
      </div>
    </div>
  );
}
export default Index;

So in the above example the request which fetches session data will be authenticated with cookies (better auth provided hook), but the request which fetches the planet data wont be. So how do I correctly setup orpc to use cookies for authentication? Thanks

[dosubot]

Browsers block manual setting of the Cookie header for security reasons—cookies are only sent automatically if fetch is configured with credentials: 'include'. To use session-based authentication with orpc and cookies, you need to override the fetch function in your OpenAPILink setup like this:

const link = new OpenAPILink(contract, {
  url: 'http://localhost:9335/',
  headers: async () => ({}), // or your other headers
  fetch: (request, init) =>
    globalThis.fetch(request, {
      ...init,
      credentials: 'include', // ensures cookies are sent
    }),
});

This will ensure cookies are included with every request from the browser, allowing your session-based auth to work as expected
example.

On the backend, make sure cookies are set on the response using res.cookie() (Express) or reply.cookie() (Fastify, with @fastify/cookie registered). Also, check that your CORS config allows credentials and that your cookies have the correct SameSite and Secure attributes for your environment
backend details
Fastify example.

If cookies still aren't sent, double-check your CORS, SameSite, Secure, and proxy settings.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}