Subdomains and Cookies

default discord avatar
imphillipzissou
last year
2 4

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.

Screen Shot 2022-10-02 at 8 22 16 AM

Screen Shot 2022-10-02 at 8 31 39 AM

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

Any thoughts?

  • default discord avatar
    imphillipzissou
    last year

    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).
    1. 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.

  • discord user avatar
    jmikrut
    Payload Team
    last year

    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?

  • default discord avatar
    imphillipzissou
    last year

    @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.

    Screen Shot 2022-10-02 at 10 01 13 AM

    Screen Shot 2022-10-02 at 10 00 14 AM

  • discord user avatar
    jmikrut
    Payload Team
    last year

    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?

    1 reply
    default discord avatar
    imphillipzissou
    last year

    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.

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.