Cross-Origin Cookie Issue: JWT Authentication Not Persisting Between Backend (Render) and Frontend (Vercel)

[CH3T4N87]

before deployment everything was fine but when i deployed my backend on render and frontend on vercel.
cookie is not getting stored in browser.

app.js

Login Controller

and Login.jsx

[krzysdz]

EDIT: I read the code wrong - ignore this answer.

[CH3T4N87]

You mean in cors config , I have to change origin ['https://equixchange.vercel.app'] (frontend) to ['https://equixchange.onrender.com'] (backend)
?

[krzysdz]

Oh, sorry. Your configuration seems correct.
I must have somehow swapped those domains when looking at your code.
EDIT: I did not expect the cookie to have a domain different than backend which tries to set it. See #6394 (comment) for explanation.

[krzysdz]

Your backend's login controller tries to set a cookie for your frontend domain - that's impossible.
You can set the cookie to be used in backend requests, but the cookie's domain should match the backend domain (otherwise browsers will reject it) and, since it is a third-party cookie, it must be marked as Partitioned (supported only in Chrome, but worked for me in Firefox 🤷).

If you don't want to gamble on CHIPS browser support, you could also use Storage Access API or just return the token in response, store it in LocalStorage and send e.g. in Authorization header using your JS client code.

[CH3T4N87]

I tried CHIPS , but it didn't work for me. I think i should go for LocalStorage. and Thank you very much for your time.