Browser Deleting Cookies on Refresh.

[SayedTahsin]

Issue Summary

I’m using Hono.js for the backend of my project and have implemented a login function to set a cookie with JWT for authentication. However, I'm encountering issues with the cookie being removed on reload when accessed from my frontend deployed on a different domain.

Note: This issue only occures on production. (Everything is fine in dev mode)

Backend-repo: Routine-Hono
Frontend-repo: Routine-Vue

Environment

• Frontend: Deployed on Vercel at https://routine-lemon.vercel.app
• Backend: Hosted on cloudflare-workers.
• Cookie Options:
  • sameSite: "None"
  • secure: true
  • httpOnly: false
  • path: "/"
  • maxAge: 60 * 60 * 24 * 30 (30 days)

Problem Details

1. Cookie Removal: The cookie is being removed from storage on reload in Chrome and doesn’t set at all in Firefox.
2. Expected Behavior: The cookie should persist in the browser storage and remain accessible across pages and sessions.

Code Example

Here’s my login function with the cookie setup:

import { sign } from "hono/jwt";
import { setCookie } from "hono/cookie";
import { Context } from "hono";

export const login = async (c: Context) => {
  try {
    const { mail } = await c.req.json();
    const payload = { mail };
    const secret = c.env.SECRET_KEY || "";
    const token = await sign(payload, secret);

    setCookie(c, "ROUTINEAPP", token, {
      secure: true,
      httpOnly: false,
      sameSite: "None",
      path: "/",
      maxAge: 60 * 60 * 24 * 30,
    });

    return c.json("Login Successful", 201);
  } catch (error) {
    return c.json({ message: "Cannot login", error }, 500);
  }
};

Troubleshooting Steps

I’ve checked several common cross-origin and SameSite-related issues, including:

• Confirming that both frontend and backend are served over HTTPS.
• Setting SameSite: "None" and secure: true as required for cross-origin cookies.
• Inspecting browser Developer Tools, where I see the cookie is set initially but then removed or not available after reload.

Providing index.ts file as it maybe caused due to my project setup.

import { Hono } from "hono";
import taskRoutes from "./routes/taskRoutes";
import noteRoutes from "./routes/noteRoutes";
import userRoutes from "./routes/userRoutes";
import authRoutes from "./routes/authRoutes";
import { updateTasksByDay } from "./controllers/taskController";
import { checkAuth } from "./middlewares/checkAuth";
import { cors } from "hono/cors";
import { secureHeaders } from "hono/secure-headers";
import { prettyJSON } from "hono/pretty-json";

type Bindings = {
  DB: D1Database;
  SECRET_KEY: string;
  FRONT_END_URL: string;
};

const app = new Hono<{ Bindings: Bindings }>();

app.use("*", async (c, next) => {
  c.header("Access-Control-Allow-Origin", c.env.FRONT_END_URL);
  c.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  c.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  c.header("Access-Control-Allow-Credentials", "true");
  if (c.req.method === "OPTIONS") {
    return c.text("", 204);
  }

  await next();
});

app.use(secureHeaders());
app.use(prettyJSON());

app.use("/api/tasks/*", checkAuth);
app.use("/api/notes/*", checkAuth);

app.route("/api/tasks", taskRoutes);
app.route("/api/notes", noteRoutes);
app.route("/api/users", userRoutes);
app.route("/auth", authRoutes);

app.get("/", (c) => {
  return c.html(`<a href="https://routine-lemon.vercel.app/routine">UI</a>`);
});

export default {
  async fetch(request: Request, env: Bindings, ctx: ExecutionContext) {
    return app.fetch(request, env, ctx);
  },
  async scheduled(event: ScheduledEvent, env: Bindings, ctx: ExecutionContext) {
    ctx.waitUntil(updateTasksByDay(env.DB));
  },
};