HTTP-only cookie issue

default discord avatar
rishi-afk
11 months ago
1 8

My payload service running @ https://me.example.com and frontend NextJS app running @ https://web.example.com. I am facing an issue that after logging in when I hit any access controlled endpoint (for eg. /refresh-token) from the frontend app, the payload service does not extract token frrom the HTTPOnly cookie and does not set the user property on the req object and throw a 403:Forbidden response code.

Cookie Configs I Tried:
cookies: { domain: "example.com", sameSite: "none", secure: true }
cookies: { domain: "example.com" }

CORS Allowlist:
["https://web.example.com", "http://web.example.com"]

However, when I use the beforeOperation({args, operation}) hook to debug the refresh operation, I can see the cookie present on the args.req.headers.cookie object, but args.token is by default null, and it works when I manually extract the cookie from args.req.headers.cookie and set the args.token value and return it.

Any help and suggestions will be appreciated. Thank you!

  • default discord avatar
    BayBreezy
    11 months ago

    Did you add this ["https://web.example.com", "http://web.example.com"] to the csrf key in the config as well?

    // ... 
    csrf: ["https://web.example.com", "http://web.example.com"],
    // ..
  • discord user avatar
    JarrodMFlesch
    Payload Team
    11 months ago

    @rishi-afk what does your fetch request look like? Are you using credentials: include? Docs talk about it here

  • default discord avatar
    rishi-afk
    11 months ago
  • default discord avatar
    rishi-afk
    11 months ago
    1 reply
    default discord avatar
    BayBreezy
    11 months ago

    I was having a similar issue with a NuxtJs app & ohmyfetch/fetch. I think the issue is with the OPTION request that is sent before the actual request. When i sent the request from the server side with the cookies included, I got the expected results. But from the client side, I got back my user as null.

    Are you able to test sending the request in nest from the server side and see if you get the same results? Ensure that the cookie is included on the server side request(If possible in NextJs)

    Like you said, hitting the auth endpoints from the browser directly (going to http://[PAYLOAD_URL]/api/me from a new tab in the browser) will produce the expected results but sending the request with axios or fetch is not working as expected

  • default discord avatar
    rishi-afk
    11 months ago
  • default discord avatar
    rishi-afk
    11 months ago
    1 reply
    default discord avatar
    BayBreezy
    11 months ago

    Can you add that and see if it makes a difference?

  • default discord avatar
    rishi-afk
    11 months ago
  • default discord avatar
    sebastianvarona
    2 weeks ago

    Hi, I'm a bit late but none of your solutions worked for my case. What i had to do was:
    In the User collection (which was the collection that was having the error) instead of leaving the auth attribute by default auth: true, I had to configure manually like this:
    auth: { cookies: { secure: true, sameSite: 'none', }, },

    In my login request when it was trying to Set-Cookies it threw an error because by default the sameSite: 'lax' so I had to set it to 'none' and just to prevent set the secure: true

    For more information about what was done https://payloadcms.com/docs/authentication/config

    1 reply
    default discord avatar
    kouohhashi
    4 days ago

    it worked for me too. Thanks a lot!

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.