How to set cookies when using fetchRequestHandler()?

[matallui]

Hi!

I have a Next.js 13 (app router) which uses fetchRequestHanlder().
Here's the route handler for demo purposes:

// app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter, createTRPCContext } from "@phnx/api";

import { getSession } from "./auth";

/**
 * Configure basic CORS headers
 * You should extend this to match your needs
 */
function setCorsHeaders(res: Response) {
  res.headers.set("Access-Control-Allow-Origin", "*");
  res.headers.set("Access-Control-Request-Method", "*");
  res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
  res.headers.set("Access-Control-Allow-Headers", "*");
}

export function OPTIONS() {
  const response = new Response(null, {
    status: 204,
  });
  setCorsHeaders(response);
  return response;
}

const handler = async (req: Request) => {
  const session = await getSession();
  const response = await fetchRequestHandler({
    endpoint: "/api/trpc",
    router: appRouter,
    req,
    createContext: ({ resHeaders }) =>
      createTRPCContext({ req, auth: session, resHeaders }),
    onError({ error, path }) {
      console.error(`>>> tRPC Error on '${path}'`, error);
    },
  });

  setCorsHeaders(response);
  return response;
};

export { handler as GET, handler as POST };

My question is: how can I set a session cookie from the server side?

I tried using resHeaders.set('Set-Cookie', 'session=somevalue') as suggested in #4226 , but that didn't seem to work. All I've tried ended up in not working altogether.

Any help would be greatly appreciated!

[martitv]

https://nextjs.org/docs/app/api-reference/functions/cookies
Could this work?

[Wiper-R]

Thank you my man, I been scrambling my brain for so long

[IDJGILL]

Hi!

I have a Next.js 13 (app router) which uses fetchRequestHanlder(). Here's the route handler for demo purposes:

// app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter, createTRPCContext } from "@phnx/api";

import { getSession } from "./auth";

/**
 * Configure basic CORS headers
 * You should extend this to match your needs
 */
function setCorsHeaders(res: Response) {
  res.headers.set("Access-Control-Allow-Origin", "*");
  res.headers.set("Access-Control-Request-Method", "*");
  res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
  res.headers.set("Access-Control-Allow-Headers", "*");
}

export function OPTIONS() {
  const response = new Response(null, {
    status: 204,
  });
  setCorsHeaders(response);
  return response;
}

const handler = async (req: Request) => {
  const session = await getSession();
  const response = await fetchRequestHandler({
    endpoint: "/api/trpc",
    router: appRouter,
    req,
    createContext: ({ resHeaders }) =>
      createTRPCContext({ req, auth: session, resHeaders }),
    onError({ error, path }) {
      console.error(`>>> tRPC Error on '${path}'`, error);
    },
  });

  setCorsHeaders(response);
  return response;
};

export { handler as GET, handler as POST };

My question is: how can I set a session cookie from the server side?

I tried using resHeaders.set('Set-Cookie', 'session=somevalue') as suggested in #4226 , but that didn't seem to work. All I've tried ended up in not working altogether.

Any help would be greatly appreciated!

I have same question, have you found any solution yet?

[IDJGILL]

I found a fix for this. Consider these key points:

1. If you are using unstable_httpBatchStreamLink by any chance, remember that it does not support setting headers once the stream has begun.
2. setting headers (for example set-cookie) from within a procedure #4226 has been answered very well and it works, but the only catch is to not use unstable_httpBatchStreamLink for this particular use case.
3. Make sure you pass'resHeaders''from createContext to your context, from which you can access'resHeaders' from anywhere in your procedures. Here's how I did it.

const handler = (req: NextRequest) => fetchRequestHandler({ endpoint: "/api/trpc", req, router: appRouter, createContext: ({ resHeaders }) => createTRPCContext({ req, resHeaders }), onError: env.NODE_ENV === "development" ? ({ path, error }) => { console.error( ❌ tRPC failed on ${path ?? ""}: ${error.message}`,
);
}
: undefined,
});

export { handler as GET, handler as POST };
`

Do let me know if this works for you. Happy codding.

[oyerindedaniel]

did you get a solution:

app\api\trpc[trpc]\route.ts

const createContext = async (req: NextRequest, resHeaders: Headers) => {
  console.log('cookies---------------', cookies().get('access_refresh_token')?.value);
  console.log('header', req.headers.get('cookie'));
  console.log('header---', req.headers);
  resHeaders.set(
    'set-cookie',
    cookie.serialize('access_refresh_token', 'oyerinde-daniel', {
      httpOnly: true,
      secure: Boolean(Number(process.env.COOKIE_SECURE ?? 0)),
      sameSite: 'lax'
    })
  );
  return createTRPCContext({
    headers: req.headers,
    cookies,
    resHeaders
  });
};

const handler = (req: NextRequest) => {
  return fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext: ({ resHeaders }) => createContext(req, resHeaders),
    onError:
      env.NODE_ENV === 'development'
        ? ({ path, error }) => {
            console.error(`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`);
          }
        : undefined
  });
};

The above works, but if I try setting the header in the procedure as shown below, it does not work

 ctx.resHeaders.set(
        'set-cookie',
        cookie.serialize('access_refresh_token', 'oyerinde-daniel', {
          httpOnly: true,
          secure: Boolean(Number(process.env.COOKIE_SECURE ?? 0)),
          sameSite: 'lax'
        })
      );

[IDJGILL]

Your code looks good to me but the only problem is in your TRPCReactProvider, It uses the new unstable_httpBatchStreamLink. It comes with amazing benefits but you can't set header.

Here's what you need to solve this issue:

import { httpBatchLink, loggerLink } from "@trpc/client"

export function TRPCReactProvider(props: { children: React.ReactNode; cookies: string }) {
  const [queryClient] = useState(() => new QueryClient());

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === 'development' ||
            (op.direction === 'down' && op.result instanceof Error)
        }),
        httpBatchLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              'x-trpc-source': 'react'
            };
          }
        })
      ]
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

I just changed the unstable_httpBatchStreamLink to httpBatchLink.

To set cookies:

 import { cookies } from "next/headers"

// In your procedure
cookie.set("some-key", "some-value", {
  sameSite: true
}) 

[oyerindedaniel]

Thanks, your solution works

[oyerindedaniel]

i am setting my cookie in after login like this in my login router

ctx.resHeaders.set(
        'set-cookie',
        cookie.serialize('token', 'daniel--sss', {
          httpOnly: true,
          secure: Boolean(Number(process.env.COOKIE_SECURE ?? 0)),
          sameSite: 'lax'
          // domain: 'http://localhost:3000'
        })
      );

but when i try accessing it on trpc server request the cookie is empty this is my
server.ts
// not seeing the set cookie here. I am sure it is sent because on route handler request in my next route i have access to it

import "server-only";

import { cache } from "react";
import { cookies, headers } from "next/headers";

import { createCaller, createTRPCContext } from "@repo/api";

/**
 * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
 * handling a tRPC call from a React Server Component.
 */
const createContext = cache(() => {

console.log(cookies()) // not seeing the set cookie here. I am sure it is sent because on route handler request in my next route i have access to it
  const heads = new Headers(headers());
  heads.set("cookies", cookies.toString());

  return createTRPCContext({
    headers: heads,
  });
});

export const api = createCaller(createContext);

and this is my context

export const createTRPCContext = async (opts: {
  headers: Headers;
  resHeaders?: Headers;
}) => {
  const { headers } = opts;
  // const session = await db.

  return {
    db,
    ...opts,
  };
};

[IDJGILL]

Don't use resHeaders to set cookies:

        'set-cookie',
        cookie.serialize('token', 'daniel--sss', {
          httpOnly: true,
          secure: Boolean(Number(process.env.COOKIE_SECURE ?? 0)),
          sameSite: 'lax'
          // domain: 'http://localhost:3000'
        })
      );
  
Use Built-In cookies function in next/headers
import { cookies } from "next/headers"

// In your procedure
cookie.set("some-key", "some-value", {
  sameSite: true
})```

[oyerindedaniel]

thanks