Managing HttpOnly Authentication Cookies Across Multiple Localhost Frontends in a Multi-Portal Application

Introduction

Developing complex, multi-portal applications often involves running several frontend interfaces simultaneously on different localhost ports during development. A common scenario involves a centralized authentication process where a user logs in through one portal, and then navigates to others within the same application ecosystem. Ensuring smooth and secure user authentication across these multiple frontends presents unique challenges, particularly related to cookie management.

Challenge Overview

In such setups, the backend server typically issues an HttpOnly, Secure, and SameSite=None cookie upon successful login. These cookies are designed to enhance security by preventing client-side scripts from accessing sensitive information and enforcing strict cross-site request policies. However, this security configuration introduces a complication: when each frontend runs on a different localhost port, browsers treat cookies as port-isolated, meaning they cannot be shared or accessed across these local origins.

This port isolation is a security feature of the browser, aligning with the behavior of cookies in production environments. In a production setting, developers often utilize subdomains (e.g., portal1.yourapp.com, portal2.yourapp.com) and set cookie domains appropriately to share authentication cookies seamlessly across different sections of an application.

Current Research and Considerations

During development, some developers resort to various workarounds, such as:

• Proxy configurations that route multiple frontends through a common origin.
• Using tokens stored in localStorage or sessionStorage instead of cookies.
• Modifying cookie attributes (although HttpOnly cookies cannot be accessed via client-side scripts).

While these approaches can mitigate certain issues, they either deviate from best security practices or are not as close to production as desired. For example, token hacks or localStorage storage can introduce vulnerabilities or discrepancies compared to how cookies are managed in production.

Best Practices and Recommendations

To maintain security and closely emulate production behavior during development, consider the following strategies:

1. Use a Centralized Development Domain:
2. Instead of running multiple frontends on different localhost ports, configure local development to use subdomains (e.g., app.localhost, admin.localhost).

3. Tools like ngrok or local DNS configurations can help simulate subdomain environments.

4. Run a Local Reverse Proxy or Proxy Server:

5. Set up a local reverse proxy (such as Nginx or Caddy) that consolidates different frontend ports under a single domain or subdomain structure.