I'm currently building a multi-portal application using Vite, where each portal is running on a different localhost port (like 5173, 5174, and so on). The login process occurs on one port (5176), and following a successful login, users are redirected to another portal.
The challenge I'm facing is that the backend is setting a cookie with parameters including HttpOnly, Secure, and SameSite=None. However, because these portals are on different ports, the other portals are unable to access this cookie.
My research indicates that cookies on localhost are isolated by port. I plan to use subdomains for production and set the cookie domain to .yourapp.com. I've seen suggestions about using dev proxies or token hacks but I'm unsure which approach is cleaner or more conventional.
So, how do you guys manage this during development while keeping it similar to the production environment?
4 Answers
To mimic the production setup exactly, I've been using Docker for my local development. I run an Nginx ingress to route subdomains or connect services to specific paths, which helps maintain a consistent origin. However, I personally don’t utilize cookies for authentication anymore; that method feels outdated.
Another approach is to have each portal connect to a backend or a shared database that holds authentication details. This setup allows the portal to recreate the cookie on each port, keeping it functional across different local instances.
One way to tackle this is by setting up a proxy server that can manage all your frontends. You might also consider editing your /etc/hosts file to create custom domain entries that link your cookies to those domains. That way, your setup would closely resemble production and you could share cookies between the frontends.
Using a proxy server is definitely the simplest solution. In our projects, we use a development environment that efficiently resolves this issue. You might want to check out Vite's server proxy options at vite.dev, which allows serving your apps on something like localhost:xxx/sub and keeps everything under the same port. If you go this route, you might not even need to worry about port isolation!
I'm intrigued by your approach! If you're not using HttpOnly cookies for authentication, what method are you using instead?