Hono•2mo 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

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 package it shows empty. What am I doing wrong here? 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;
};

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.

23 Replies

ambergristle•2mo ago

hi @RaikuGG! i'm not sure i understand problem #1, but it may be related to problem #2 you can't/shouldn't access auth cookies using client-side javascript they're generally http-only, so they're invisible to client-side JS the browser should include them automatically for relevant requests

RaikuGGOP•2mo ago

The browser isn't including this cookie this is issue here! Is it because my frontend and backend is running on different ports?

ambergristle•2mo ago

that could definitely do it, if the cookie is same-site, which it probably is. you should check the better-auth docs though i'd recommend ditching the pages app, and serving both frontend and backend from workers

RaikuGGOP•2mo ago

Okay! Thanks I'll look into this

RaikuGGOP•2mo ago

Hi @ambergristle I configured hono RPC like this. Now the client side includes the cookies in request headers. But the server side doesn't include them!

RaikuGGOP•2mo ago

I have to manually pass the cookie when calling RPC from server components:

ambergristle•2mo ago

why are you using the client server-side? the backend doesn't need to call itself you can just do the getPosts logic directly

RaikuGGOP•2mo ago

I'm using the RPC in my nextjs server components. Here's the code to full component -

import { headers } from "next/headers";
import Image from "next/image";
import Link from "next/link";

import { apiClient } from "@/lib/hc-client";
import { formatDate } from "@/lib/utils";

import { BlogListClient } from "./blog-list-client";

export async function BlogList() {
  const postResponse = await apiClient.api.posts.$get(undefined, {
    headers: {
      cookie: (await headers()).get("cookie") ?? "",
    },
  });
  const posts = await postResponse.json();

  return (
    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      <BlogListClient>
        {posts.map((post) => (
          <Link key={post.id} href={`/post/${post.slug}`}>
            <article className="group relative flex flex-col space-y-2">
              <div className="relative aspect-video overflow-hidden rounded-md">
                <Image
                  src={post.coverImage || "/placeholder.svg"}
                  alt={post.title}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              <div className="flex-1 space-y-2">
                <h2 className="group-hover:text-primary line-clamp-1 text-xl font-semibold tracking-tight transition-colors">
                  {post.title}
                </h2>
                <p className="text-muted-foreground line-clamp-2">{post.excerpt}</p>
                <p className="text-muted-foreground text-sm">{formatDate(post.createdAt)}</p>
              </div>
            </article>
          </Link>
        ))}
      </BlogListClient>
    </div>
  );
}

import { headers } from "next/headers";
import Image from "next/image";
import Link from "next/link";

import { apiClient } from "@/lib/hc-client";
import { formatDate } from "@/lib/utils";

import { BlogListClient } from "./blog-list-client";

export async function BlogList() {
  const postResponse = await apiClient.api.posts.$get(undefined, {
    headers: {
      cookie: (await headers()).get("cookie") ?? "",
    },
  });
  const posts = await postResponse.json();

  return (
    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      <BlogListClient>
        {posts.map((post) => (
          <Link key={post.id} href={`/post/${post.slug}`}>
            <article className="group relative flex flex-col space-y-2">
              <div className="relative aspect-video overflow-hidden rounded-md">
                <Image
                  src={post.coverImage || "/placeholder.svg"}
                  alt={post.title}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              <div className="flex-1 space-y-2">
                <h2 className="group-hover:text-primary line-clamp-1 text-xl font-semibold tracking-tight transition-colors">
                  {post.title}
                </h2>
                <p className="text-muted-foreground line-clamp-2">{post.excerpt}</p>
                <p className="text-muted-foreground text-sm">{formatDate(post.createdAt)}</p>
              </div>
            </article>
          </Link>
        ))}
      </BlogListClient>
    </div>
  );
}

RaikuGGOP•2mo ago

Seems to be a problem with NextJS - https://stackoverflow.com/questions/76274546/next-js-does-not-send-cookies-with-fetch-request-even-though-credentials-are-inc

Stack Overflow

Next.js does not send cookies with fetch request even though creden...

I'm working on a Next.js application which was originally a normal react app (created with create-react-app) and I am trying to send cookies with a fetch request to my server. However, the cookies ...

Arjix•2mo ago

I'd suggest wrapping the fetch function instead of manually adding the header every time hc can accept a custom fetch function

RaikuGGOP•2mo ago

Okay solved it! I had to create 2 seperate RPC clients. 1 for server components 1 for client components:

Arjix•2mo ago

nice also, why are you caching a constant value? is there a technical reason? especially since you do it on the left but not on the right ig it is left-over code before a refactor was done?

RaikuGGOP•2mo ago

This weird thing is bc of how nextjs behaves. cookies() can be only used on a server action (with a 'use server') / server component. Also any file using 'use server' can only export async functions. So I had to wrap it with a getServerRPC async function. So just in case cached the async function as it will be called in many places. Caching might not be necessary.

Arjix•2mo ago

did you know that an async function that does not have await is not really async? it just returns a promise that is always fulfilled (fun fact)

RaikuGGOP•2mo ago

nice! 😀

ambergristle•5w ago

glad you got something working! this doesn't really answer my question though your server components are run server-side, so you can run server-side code in them. why use the rpc client at all? instead of const posts = await getPostsFromDb() or whatever https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-an-orm-or-database

RaikuGGOP•5w ago

I know I can use server actions for data fetching. But I want to keep my backend logic to hono. And hono is deployed seperately (cloudflare workers)

ambergristle•5w ago

so it's basically a react + hono project?

RaikuGGOP•5w ago

yeah

ambergristle•5w ago

why use next at all then? if you're doing an extra round trip to an entirely different server to get the data why not just serve both the backend + react frontend from a single worker you'll reduce your latency, and you won't have to deal with next.js

Arjix•5w ago

yeah it doesn't make much sense unless you like microservices

RaikuGGOP•5w ago

Do you have any guide/working example on how to do that? I saw opennext, to deploy nextjs on cf worker. But can't figure out the complete solution combining next+hono+d1 I have been working with Next + server actions stack for long. Just wanted to try out hono with nextjs and play with some different stacks. Also trying to learn the cloudflare stack by building and deploying apps on it.

ambergristle•5w ago

this convo might be helpful: https://discord.com/channels/1011308539819597844/1012477709588385792/1354377240581771375 tbh, i don't really understand using a metaframework with an additional backend. the value of a metaframework generally comes from the integration of the front + backend in a single system what kind of app are you building? spa? ssr? ssg?

Gaming

Programming

Hono + Nextjs with Cloudflare D1 Cookies problem!

Did you find this page helpful?