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?
Took a minute but here's what I did to reproduce.
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
.
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.
Users
collection to observe the initial behavior:payload.cookie.domain.com
works as expected, sets a cookie for the payload subdomain.cookie.domain.com
also works until the page is refreshed. No cookie was set though, as expected (different domain).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.
},
// ...
}
cookie.domain.com
works until page is refreshed. However no cookie is set though.Set-Cookie
to the domain cookie.domain.com
. However, again, doesn't actually set the cookie.Additional (kind of) related behaviors:
However, I can still click
Account` 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.
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?
@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.
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
?
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.
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.