Subdomains and Cookies

[imphillipzissou]

Hey folks,

Running into an issue where Payload running on a subdomain fails to set an auth cookie properly.

With Payload is running on https://payload.domain.com and a React frontend is running on https://domain.com.

User collection:

import { CollectionConfig } from 'payload/types';
export const User : CollectionConfig = {
  slug: 'user',
  auth: {
    cookies: {
      secure: true, // domain.com is secure (https)
      domain: `.domain.com`,
      sameSite: 'none' // Tried with all options, strict, lax, none
    },
  },
  access: {
    // ...
  },
  fields: [
    // ...
  ]
};

From inspecting requests, the correct response appears to be sent from payload however no cookie is ever actually set.

The issue seems similar to discussion #401 however I wasn't able to identify the issue with the cookie not setting.

Any thoughts?

[jmikrut]

Hey @imphillipzissou — this is strange. At first glance everything looks right. Can you try this in Chrome? I believe Chrome will show a little yellow warning sign if a cookie is not set successfully. And it typically comes with the reason why. Looks like you're using Safari, right?

[imphillipzissou]

@jmikrut Thanks for replying so quickly! Correct, this was with Safari. I just tried this on Chrome too, however same behavior and no little yellow warnings.

[jmikrut]

Hmm, the only thing I can see here is that in Chrome, the SameSite property appears to be set to Strict. Are you specifying SameSite to None?

[imphillipzissou]

Apologies for changing it in the screenshot. I've attempted it with all the options (lax, strict, and none) in Chrome.

Not sure if it would make a difference but I am attempting this over the REST /api/[colleciton-slug]/login endpoint. Working on reproducing the issue isolated from my project.

[imphillipzissou]

Took a minute but here's what I did to reproduce.

1. Cloned and installed the Payload Next Auth repo: payload-cms-next. Locally, I'm using Traefik, dnsmasq, for the certificate and resolution. Configured this to run and resolve on payload.cookie.domain.com.

2. Cloned and installed the Next Auth Frontend repo: next-auth-frontend. Again, locally using Traefik and dnsmasq for valid certs and resolution. Configured this to run and resolve on cookie.domain.com. Set the NEXT_PUBLIC_CMS_URL env. var. to point to payload.cookie.domain.com.

Then I tried a few different approaches.

1. Did not modify the Users collection to observe the initial behavior:

• Logging into payload at directly at payload.cookie.domain.com works as expected, sets a cookie for the payload subdomain.
• Logging into next-auth at cookie.domain.com also works until the page is refreshed. No cookie was set though, as expected (different domain).

2. Did modify the Users collection:

// ...
auth : {
  cookies: {
      secure: true,
      sameSite: 'strict', // Also tried `lax`, and `none`
      domain: '.cookie.domain.com' // Also tried `cookie.domain.com` and `.domain.com` to rule out it being the naked domain.
  },
  // ...
}

• Logging into payload works (as expected).
• Logging into next-auth at cookie.domain.com works until page is refreshed. However no cookie is set though.
• The console and networking logs show a similar response to my initial post where the response contains a Set-Cookie to the domain cookie.domain.com. However, again, doesn't actually set the cookie.

Additional (kind of) related behaviors:

• The logout button in next-auth says the 'You are already logged out.However, I can still clickAccount` up top and return to the Account page. Appears the only way to logout is to refresh the page.

Not sure what the heck is going on here! lol

Edit: Seems like it's specific to REST fetch requests so looking into this and CORS configuration a little more.

Edit: Am a goof. lol There are a couple things at play. Ultimately I was calling the payload rest api in getServerSideProps. Which is obviously not from the browser. So the request wouldn't contain the cookie. What I ultimately did was read the httponly cookie in getServerSideProps then set it as an Authorization: JWT {cookie token} on the payload request.