Cookie Authentication Issue Across Subdomains (Frappe + Next.js)

Frappe Framework Customization
, , ,
1

Hi everyone,

I’m currently facing an issue with cookie-based authentication across subdomains. Here’s the setup of my application:

  • Backend (Frappe app) is hosted on: https://backend.domain.com
  • Frontend (Next.js app) is hosted on: https://frontend.domain.com

:bulb: Goal

I want users to be able to log in from the Next.js frontend, and then authenticate with Frappe using the session cookie (sid), so that authenticated requests to Frappe API work seamlessly.

:warning: The Problem

When I perform login from the frontend (frontend.orecon.co.id) to the Frappe backend (backend.domain.co.id), the API returns 200 OK and includes a Set-Cookie header for the sid.

However:

  • The sid cookie does not get stored in the browser (visible in DevTools > Application > Cookies).
  • As a result, subsequent requests do not include the session cookie, even though login succeeded.
  • I suspect this is due to incorrect SameSite or Domain attributes in the Set-Cookie header.

:hammer_and_wrench: Things I’ve Tried

:white_check_mark: On the Frappe side:

  • Enabled CORS via site_config.json:
"allow_cors": "https://frontend.domain.com"

:white_check_mark: On the Next.js side:

await fetch('https://backend.domain.com/api/method/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'include', // included this to send/receive cookies
  body: JSON.stringify({ usr: 'user', pwd: 'password' }),
});

:white_check_mark: Both domains use HTTPS

:mag: Observations

  • The login API returns 200 OK, with Set-Cookie present.
  • But the browser (Chrome) does not store the cookie.
  • There are no CORS errors in console, but still cookie isn’t persisted.

:question:Question

What am I missing to make Frappe’s cookie-based authentication work across subdomains?

Any Frappe config or headers I need to adjust further?

Thanks a lot in advance!