Question
JWT Cookie is not being stored in ReactJS application when being sent from a Express Js application, both hosted as Apps on Digital Ocean
- Posted on January 28, 2024
- APICDNDeploymentDigitalOcean App PlatformGetting StartedNode.jsReactSolutionsStorageTypeScript
Asked by talEel
I am hosting 2 applications on Digital Ocean: 1.ReactJS app with a custom domain 2.NodeJs + Express backend with a domain given by Digital Ocean. I am using a JWT token sent by the backend as a httponly cookie, on localhost it works perfectly, but on live version it seems to not even being stored in the website cookies on access. I found 1 issue on stackoverflow mentioning that the backend should be stored at the same domain as the frontend in order for the cookies to be properly stored with Digital Ocean, is that true?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Hey!
The situation you’re encountering with JWT cookies not being stored when sent from your Express.js backend to your ReactJS frontend, both hosted on the DigitalOcean App Platform, is a common challenge when deploying applications across different domains or subdomains, especially when involving
HttpOnlycookies for security reasons.The advice you found on StackOverflow is indeed on point for many deployment scenarios, including those on DigitalOcean. When your frontend and backend are served from different origins (which is the case when they’re under different domains or even different subdomains), browsers enforce the Same-Origin Policy for cookies and other web resources for security reasons.
This policy can prevent your frontend hosted on a custom domain from accessing cookies set by your backend hosted on a different domain provided by DigitalOcean.
As suggested, aligning both your frontend and backend under the same custom domain can help. You can achieve this by using subdomains, or different routes for your frontend and backend service.
Also, ensure your backend’s CORS settings are configured to accept requests from your frontend’s domain. This is crucial for APIs but doesn’t directly impact
HttpOnlycookies, which are not accessible via JavaScript due to their nature for security reasons.Best,
Bobby