HTTP-only cookie issue
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!
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"], // ..
@rishi-afk what does your fetch request look like? Are you using
credentials: include? Docs talk about it here- I am using axios, and yes I have set the withCredentials property to true.…On Wed, Oct 5, 2022 at 7:38 PM Jarrod Flesch ***@***.***> wrote: @rishi-afk <https://github.com/rishi-afk> what does your fetch request look like? Are you using credentials: include on them? Docs talk about it here <https://payloadcms.com/docs/authentication/overview#http-only-cookies> — Reply to this email directly, view it on GitHub <#1203 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFPPCFUBRI6JLHQUHOFGRT3WBWDUVANCNFSM6AAAAAAQ5NWV5A> . You are receiving this because you were mentioned.Message ID: ***@***.***>
- And I know that for a fact, because on the payload side, I can log the incoming request (from web.example.com) and the token cookie is set. It is just that it won't process the token from the cookie and set the user property. However, I am unable to replicate this behaviour on localhost, Postman or calling the endpoint directly using the API domain ( me.example.com). On Wed, Oct 5, 2022 at 9:43 PM Rishikesh Bhakare ***@***.***> wrote:…I am using axios, and yes I have set the withCredentials property to true. On Wed, Oct 5, 2022 at 7:38 PM Jarrod Flesch ***@***.***> wrote: > @rishi-afk <https://github.com/rishi-afk> what does your fetch request > look like? Are you using credentials: include on them? Docs talk about > it here > <https://payloadcms.com/docs/authentication/overview#http-only-cookies> > > — > Reply to this email directly, view it on GitHub > <#1203 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AFPPCFUBRI6JLHQUHOFGRT3WBWDUVANCNFSM6AAAAAAQ5NWV5A> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >1 reply
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/mefrom a new tab in the browser) will produce the expected results but sending the request with axios or fetch is not working as expected - Cookie is recieved with the Payload request everytime, however the user from token is extracted only when I hit the endpoint using the same domain or via Postman. I just can't figure out what's going wrong.…On Thu, 6 Oct 2022, 00:12 BayBreezy, ***@***.***> wrote: 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 — Reply to this email directly, view it on GitHub <#1203 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFPPCFS64O36Z3EZX4OGBKDWBXDZVANCNFSM6AAAAAAQ5NWV5A> . You are receiving this because you were mentioned.Message ID: ***@***.***>
- No, I didn't. Currently in my Payload config, csrf option is set to [].…On Thu, 6 Oct 2022, 00:39 BayBreezy, ***@***.***> wrote: 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"],// .. — Reply to this email directly, view it on GitHub <#1203 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFPPCFVPDFT6GJYIXADM6ATWBXG63ANCNFSM6AAAAAAQ5NWV5A> . You are receiving this because you were mentioned.Message ID: ***@***.***>1 reply
Can you add that and see if it makes a difference?
- I did it. It worked 🎉. I thought keeping csrf [] would just disable it and I'll be able to take care of it in the future.…On Thu, 6 Oct 2022, 00:44 BayBreezy, ***@***.***> wrote: Can you add that and see if it makes a difference? — Reply to this email directly, view it on GitHub <#1203 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFPPCFQK354DXUERJ3ATVY3WBXHRXANCNFSM6AAAAAAQ5NWV5A> . You are receiving this because you were mentioned.Message ID: ***@***.***>
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 defaultauth: 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 thesecure: trueFor more information about what was done https://payloadcms.com/docs/authentication/config
1 replyit worked for me too. Thanks a lot!
Continue the discussion in GitHub
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.