Troubleshooting Steps
\nI’ve checked several common cross-origin and SameSite-related issues, including:
\n- \n
- Confirming that both frontend and backend are served over HTTPS. \n
- Setting SameSite: \"None\" and secure: true as required for cross-origin cookies. \n
- Inspecting browser Developer Tools, where I see the cookie is set initially but then removed or not available after reload. \n
Providing index.ts file as it maybe caused due to my project setup.
\nimport { Hono } from \"hono\";\nimport taskRoutes from \"./routes/taskRoutes\";\nimport noteRoutes from \"./routes/noteRoutes\";\nimport userRoutes from \"./routes/userRoutes\";\nimport authRoutes from \"./routes/authRoutes\";\nimport { updateTasksByDay } from \"./controllers/taskController\";\nimport { checkAuth } from \"./middlewares/checkAuth\";\nimport { cors } from \"hono/cors\";\nimport { secureHeaders } from \"hono/secure-headers\";\nimport { prettyJSON } from \"hono/pretty-json\";\n\ntype Bindings = {\n DB: D1Database;\n SECRET_KEY: string;\n FRONT_END_URL: string;\n};\n\nconst app = new Hono<{ Bindings: Bindings }>();\n\napp.use(\"*\", async (c, next) => {\n c.header(\"Access-Control-Allow-Origin\", c.env.FRONT_END_URL);\n c.header(\"Access-Control-Allow-Methods\", \"GET, POST, PUT, DELETE, OPTIONS\");\n c.header(\"Access-Control-Allow-Headers\", \"Content-Type, Authorization\");\n c.header(\"Access-Control-Allow-Credentials\", \"true\");\n if (c.req.method === \"OPTIONS\") {\n return c.text(\"\", 204);\n }\n\n await next();\n});\n\napp.use(secureHeaders());\napp.use(prettyJSON());\n\napp.use(\"/api/tasks/*\", checkAuth);\napp.use(\"/api/notes/*\", checkAuth);\n\napp.route(\"/api/tasks\", taskRoutes);\napp.route(\"/api/notes\", noteRoutes);\napp.route(\"/api/users\", userRoutes);\napp.route(\"/auth\", authRoutes);\n\napp.get(\"/\", (c) => {\n return c.html(`<a href=\"https://routine-lemon.vercel.app/routine\">UI</a>`);\n});\n\nexport default {\n async fetch(request: Request, env: Bindings, ctx: ExecutionContext) {\n return app.fetch(request, env, ctx);\n },\n async scheduled(event: ScheduledEvent, env: Bindings, ctx: ExecutionContext) {\n ctx.waitUntil(updateTasksByDay(env.DB));\n },\n};
Used firebase auth for session management to fix this Issue.
\nSayedTahsin/Routine-Vue@e88902e
\nAs we cannot set cookies from different domain. Frontend & Backend domain must be same.
Browser Deleting Cookies on Refresh. #3669
-
Issue SummaryI’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 Environment
Problem Details
Code ExampleHere’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 StepsI’ve checked several common cross-origin and SameSite-related issues, including:
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));
},
}; |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Used firebase auth for session management to fix this Issue. |
Beta Was this translation helpful? Give feedback.
Used firebase auth for session management to fix this Issue.
SayedTahsin/Routine-Vue@e88902e
As we cannot set cookies from different domain. Frontend & Backend domain must be same.