Issues with Cookies: Browser Not Sending & Deleting on Refresh

[bkyerv]

I'm facing an issue related to cookie handling in my app and would appreciate any assistance. I've developed a basic application with both client and server parts, each deployed on different domains. My primary objective is to instruct the browser to set a cookie so that subsequent requests use this cookie.

1. Although the server correctly sends the cookie in response (verified in Chrome's DevTools), the browser does not include the cookie in subsequent requests. It appears the browser isn't honoring the Set-Cookie header
2. Upon a simple page reload, the cookie gets deleted from the client

I suspect there might be a mistake in my implementation. Below is the code. Can anyone review and let me know if there's something I've missed or implemented incorrectly? and yes, I have ensured that all env variables are available in respective environments (i.e. when developing locally and in prod as well)

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { deleteCookie, getCookie, setCookie } from 'hono/cookie';

export interface Env {
    Bindings: {
        ENVIRONMENT: string;
    };
}

const app = new Hono<Env>();

app.use('*', (c, next) => {
    const corsConfig = cors({
        origin: c.env.ENVIRONMENT === 'prod' ? '[client_url<=I have replaced the actual url]' : 'localhost',
        credentials: true,
    });
    return corsConfig(c, next);
});

app.post('/signin', async (c) => {
    setCookie(c, 'sessionId', 'dummy_cookie', {
        httpOnly: c.env.ENVIRONMENT === 'prod' ? true : false,
        sameSite: c.env.ENVIRONMENT === 'prod' ? 'None' : 'Lax',
        secure: c.env.ENVIRONMENT === 'prod' ? true : false,
        maxAge: 60 * 60 * 24 * 7,
        path: '/',
        domain: c.env.ENVIRONMENT === 'prod' ? '.workers.dev' : 'localhost',
    });

    return c.json({ status: 'ok' });
});

app.post('/signout', async (c) => {
    const sessionId = getCookie(c, 'sessionId');
    console.log(sessionId);
    if (!sessionId) {
        return c.json({ status: 'error', message: 'session is missing' }, 400);
    }

    deleteCookie(c, 'sessionId', {
        path: '/',
        secure: c.env.ENVIRONMENT === 'prod' ? true : false,
        domain: c.env.ENVIRONMENT === 'prod' ? '.workers.dev' : 'localhost',
    });

    return c.json({ status: 'ok', message: 'successfully signed out' });
});

export default app;

[yusukebe]

Hi @bkyerv

It's not a perfect solution but could you try to remove a domain field? Will the behavior correct?

[b-marques]

I believe it's related to the Access-Control-Allow-Credentials header. I was facing the same issue, was able to handle it adding credentials: true to the Fetch API.

fetch(api.example.$url(), {
    credentials: 'include',
    body: JSON.stringify({any: 'thing'}),
});

But couldn't find a way to use the hono RPC feature to handle this...

api.example.$post(), {
    json: {
        any: 'thing'
    },
    // how to add? credentials: 'include',
});

@yusukebe do you know if it's possible with the current implementation?

[yusukebe]

@b-marques

How about try this?

const api = hc<AppType>('http://localhost', {
  fetch: (req: Request, init?: RequestInit) =>
    fetch(req, {
      ...init,
      credentials: 'include'
    })
})

//...

[b-marques]

It does the trick, thanks (: