Hono•2mo ago

Default headers not setting in nextjs rpc requests

When using the rpc client in nextjs, it doesn't include the headers for the request like a normal fetch does, this ends up leaving out items like cookies which is needed for authentication on the server.

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}`,
  },
});

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}`,
  },
});

Since i will mainly being using this API on the client side I have no way to pass in the cookies without passing it from the server which is not feasable. What is a way around this?

6 Replies

ambergristle•4w ago

hi @Jacob! could you share more about 1) what your current setup is, 2) what you want the code to be doing, 3) what it's actually doing? it's not quite clear from your question what you're trying to accomplish

JacobOP•4w ago

Hey @ambergristle my setup is split into 3 different part 1 the api (hono) the web app (nextjs) and 3 the mobile app (expo/react native) currently in my web app using clerk for auth it won’t send across the cookies to the hono api however my mobile app sends them across fine, feeling like it is a cors issue but not sure how to fix it or it could be something else internally

ambergristle•4w ago

so what has you thinking it might be a cors issue? also, what cookies is the clerk client setting in the browser, and how do they get read in on the backend? and could you provide a little more detail on how the next app and expo app are behaving differently?

JacobOP•4w ago

The clerk cookies are set via the clerk nextjs sdk and read by the @hono/clerk provider that wraps the clerk back end node sdk. Here is the repo: https://github.com/jacobsamo/BuzzTrip/tree/improve-web

GitHub

GitHub - jacobsamo/BuzzTrip at improve-web

Plan the trip you've always dreamed of. Contribute to jacobsamo/BuzzTrip development by creating an account on GitHub.

JacobOP•4w ago

Assuming cookies are set very similar on web to mobile however not set to the api on web thinking cors or nextjs might be the issue as it doesn’t automatically attach headers to the request e.g cookies to external apis unless specified

ambergristle•4w ago

ah, tough oh, wait. i have some questions about your repo (parenthetically, there's a typo in your readme: "creat custom maps") can you give me an example of a (web) client file that makes a request to a secured hono endpoint (that demos your issue)? ah, nevermind, i see so the idea is that clerk handles all of register/login, and is meant to set a cookie but when you're making requests with the hono client and that cookie isn't winding up on the hono server it seems like you have both bearer + clark auth set up on the backend? off the dome, i'm wondering whether this is a csrf issue

Gaming

Programming

Default headers not setting in nextjs rpc requests

Did you find this page helpful?