Like what we’re doing? Star us on GitHub!

HTTP-only cookie issue

rishi-afk
5 months ago
1 7

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!

  • BayBreezy
    5 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"],
    // ..
  • JarrodMFlesch
    Payload Team
    5 months ago

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

  • rishi-afk
    5 months ago
  • rishi-afk
    5 months ago
    1 reply
    BayBreezy
    5 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

  • rishi-afk
    5 months ago
  • rishi-afk
    5 months ago
    1 reply
    BayBreezy
    5 months ago

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

  • rishi-afk
    5 months ago
Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More