Hono•9mo ago

Hono + Nextjs with Cloudflare D1 Cookies problem!

Hi, I am try to build a basic app with hono, nextjs, better-auth, drizzle, cloudflare d1. My goal is to deploy the frontend on cloudflare pages, backend (hono) on cloudflare workers, which will be using cloudflare d1 as database.
When developing locally I have 2 separate projects running: :3000 nextjs, :8787 hono (with wrangler dev)
Repo: https://github.com/raikusy/nextjs-hono-better-auth-d1
Problem 1: I am using Hono RPC, and I have to manually attach cookies to the request. Because apiClient can be called from both server components and client components

src/components/blog-list.tsx

src/components/blog-list.tsx

src/components/blog-list.tsx

src/components/blog-list.tsx

const postResponse = await apiClient.api.posts.$get(
    {},
    {
      headers: {
        cookie: (await headers()).get("cookie") ?? "",
      },
    }
  );

const postResponse = await apiClient.api.posts.$get(
    {},
    {
      headers: {
        cookie: (await headers()).get("cookie") ?? "",
      },
    }
  );

const postResponse = await apiClient.api.posts.$get(
    {},
    {
      headers: {
        cookie: (await headers()).get("cookie") ?? "",
      },
    }
  );

const postResponse = await apiClient.api.posts.$get(
    {},
    {
      headers: {
        cookie: (await headers()).get("cookie") ?? "",
      },
    }
  );

Problem 2: On client components for some reason Cookie is empty. the browser has the cookie, but when I try to load it using

js-cookie

js-cookie

js-cookie

js-cookie package it shows empty. What am I doing wrong here?

src/components/create-post-form.tsx

src/components/create-post-form.tsx

src/components/create-post-form.tsx

src/components/create-post-form.tsx

const getCookie = () => {
  if (typeof window === "undefined") {
    return "";
  }
  const allCookies = Cookies.get();
  console.log("ALL_COOKIES - ", allCookies); // TODO: Fix - better-auth.session_token cookie not preset here!! But it's present in the browser
  const value = `${AUTH_COOKIE_NAME}=${Cookies.get() ?? ""}`;
  console.log("COOKIE VALUE - ", value);
  return value;
};

const getCookie = () => {
  if (typeof window === "undefined") {
    return "";
  }
  const allCookies = Cookies.get();
  console.log("ALL_COOKIES - ", allCookies); // TODO: Fix - better-auth.session_token cookie not preset here!! But it's present in the browser
  const value = `${AUTH_COOKIE_NAME}=${Cookies.get() ?? ""}`;
  console.log("COOKIE VALUE - ", value);
  return value;
};

const getCookie = () => {
  if (typeof window === "undefined") {
    return "";
  }
  const allCookies = Cookies.get();
  console.log("ALL_COOKIES - ", allCookies); // TODO: Fix - better-auth.session_token cookie not preset here!! But it's present in the browser
  const value = `${AUTH_COOKIE_NAME}=${Cookies.get() ?? ""}`;
  console.log("COOKIE VALUE - ", value);
  return value;
};

const getCookie = () => {
  if (typeof window === "undefined") {
    return "";
  }
  const allCookies = Cookies.get();
  console.log("ALL_COOKIES - ", allCookies); // TODO: Fix - better-auth.session_token cookie not preset here!! But it's present in the browser
  const value = `${AUTH_COOKIE_NAME}=${Cookies.get() ?? ""}`;
  console.log("COOKIE VALUE - ", value);
  return value;
};

Also I am looking for a good boilerplate for this stack, which is scalable.

GitHub

GitHub - raikusy/nextjs-hono-better-auth-d1

Contribute to raikusy/nextjs-hono-better-auth-d1 development by creating an account on GitHub.

Hono + Nextjs with Cloudflare D1 Cookies problem!

Similar Threads

Similar Threads

Similar Threads