Hono RPC in NextJS doesn't include default cookies / headers that fetch does

[jacobsamo]

What version of Hono are you using?

4.6.11

What runtime/platform is your app running on? (with version if possible)

Cloudflare Workers

What steps can reproduce the bug?

When I import the rpc client from hono and make requests using it, it doesn't pass the cookies in the same request like fetch methods do, in my mobile app it works fine but not my nextjs project for some reason and not sure how to fix it.

import type { AppType } from "@buzztrip/api/src";
import { env } from "env";
import { hc } from "hono/client";

export const apiClient = hc<AppType>(env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer ${env.NEXT_PUBLIC_API_SECRET_KEY}`,
  },
});

In a server environment you can use the cookies() and the headers() method to add them however I am using this on the client and those are server-only values

What is the expected behavior?

When i make a request the cookie's and any other default header information that fetch sends will also send with the request.

What do you see instead?

Default Headers / cookies is not passed.

Additional information

Repo: https://github.com/jacobsamo/BuzzTrip/tree/improve-web

[yusukebe]

Hi @jacobsamo

Thank you for sharing the repo. But, it is large. Can you create a minimal project to reproduce it and share clear instructions?

[jacobsamo]

Hey @yusukebe,

It is quite a large repo I have gone and created a example repo here: https://github.com/jacobsamo/hono-rpc-nextjs-example it is still quite large as this is how the setup works for my example.

The main issue I am facing is when I make a request there is no cookies being sent with that request, cookies can be returned from the sever if added but not sent as the API lives on another port. my question is how do I get this sent across as well.

this is what I see in chrome dev tools:

I might be missing something with cors policy but not 100% sure.

[yusukebe]

Hi @jacobsamo

Thank you for the repro. Since the apiClient executes just the fetch method, the lack of cookies seems expected.

[jacobsamo]

@yusukebe that is true, I think the weird part I find is when using it in my expo app it automatically adds the cookies to send to the server (I know these might work a bit differently) I'm thinking the best option is when I set the RPC client in Nextjs I add cookies to the headers

Like so:

import type { AppType } from "@buzztrip/api/src";
import { env } from "env";
import { hc } from "hono/client";

export const apiClient = hc<AppType>(env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer ${env.NEXT_PUBLIC_API_SECRET_KEY}`,
Cookie: document.cookie
  },
});

[yusukebe]

I see. That means the behavior of the expo is not the same as other fetch's. If you want to add the cookies in the Next.js app, you can add the Set-Cookie header :

const res = await apiClient.api.index.$get(
  {
    foo: 'bar',
  },
  {
    headers: {
      'set-cookie': cookieValues,
    },
  }
)

Anyway, this issue is not a Hono-side bug.

[github-actions]

This issue has been marked as stale due to inactivity.

[github-actions]

Closing this issue due to inactivity.