I'm working on a multi-portal application using Vite, where each portal is served on a different localhost port (like 5173, 5174, etc.). The login process occurs on one port (5176), and once authenticated, users are redirected to other portals. The issue I'm facing is that the backend sets an HttpOnly, Secure cookie with SameSite=None, but due to port isolation on localhost, the other portals can't access this cookie. I've learned that in production, I'll be using subdomains with a cookie domain of .yourapp.com, but I'm looking for a clean and efficient way to manage this during development. Any tips or common practices that align closely with production setups?
3 Answers
Using Docker locally could be an ideal solution. It allows you to replicate your production environment closely. I set up an nginx ingress to create subdomains or connect services to paths, which helps maintain the same origin. Just a heads up, I personally avoid using cookies for auth, as it feels outdated!
Another option is creating local subdomains. You can edit your hosts file to define things like portal1.local and portal2.local, which will point to localhost. This way, cookies set with a domain like .local can be shared across your different portals, giving you a setup that resembles production where subdomains share cookies.
Setting up a proxy server can be a great way to handle this. It mimics your production environment and allows all your frontends to communicate seamlessly. You can configure Vite to forward API requests to your backend, which will let the cookies be sent along with the requests even if the frontends are on different ports. That's a solid way to bypass same-origin policy issues.
That's interesting! If you're not using HttpOnly cookies, what's your alternative method for handling authentication?