Authentication Cookie Not Consistently Sent by "Web Studio" Dev Browser in Firebase Studio (Next.js App)

Collaboration
1

Hello, I encountered a strange behavior in the Web browser of Firebase Studio (code mode) when dealing with cookies and authentication.

Gemini suggested that I report, so here we go.

  • Next.js v15.3.3
  • Node.js v20.19.0

Description:

I’m experiencing an issue where the authentication cookie (app_session_token) set by my Next.js application’s login API route is not consistently sent with subsequent API requests when using the integrated “Web Studio” development browser in Firebase Studio. This results in 401 “Unauthorized: No session token” errors for authenticated API endpoints immediately after a seemingly successful login.

Key Observations & Steps to Reproduce (in “Web Studio” dev browser):

  1. Application Setup:
  • Next.js application using App Router.
  • Custom JWT-based authentication system (cookie-based sessions).
  • API routes for login (/api/auth/login), session check (/api/auth/session), and data (/api/inventories, /api/assets).
  1. Login Process:
  • User logs in via the login page.
  • The /api/auth/login route successfully authenticates the user and sends a Set-Cookie header for app_session_token (attributes: HttpOnly=true, Path=/, SameSite=Lax, Secure=false for the HTTP dev environment).
  1. Post-Login API Calls:
  • Immediately after login, the application attempts to fetch data from authenticated API endpoints (e.g., /api/inventories).
  • Issue: Server-side logs for these API endpoints consistently show that the app_session_token cookie is MISSING from the incoming request headers.
  • This leads to a 401 error from the API, and the client-side application fails to load user-specific data or perform authenticated actions (e.g., “Failed to load inventories: 401 Unauthorized: No session token”).
  • The same 401 error occurs when trying to perform POST/PUT/DELETE operations to authenticated API routes after login.

Behavior in Standard External Browser (e.g., Microsoft Edge, Google Chrome):

  • When accessing the exact same application code via the Firebase Studio preview URL (e.g., https://<project-id>.cluster-<...>.cloudworkstations.dev/) in a standard external browser:
    • The login process works as expected.
    • The app_session_token cookie is correctly set by the browser.
    • Crucially, subsequent API calls to authenticated endpoints (e.g., /api/inventories) successfully include the app_session_token cookie. Server-side logs confirm Received token from cookie: Present.
    • User-specific data loads correctly, and authenticated actions (create, delete) work as expected.

Conclusion & Impact:

The core application logic for authentication and cookie handling appears to be functioning correctly, as evidenced by its successful operation in standard external browsers. The issue seems to be specific to how the “Web Studio” integrated development browser handles or propagates cookies set by the application, or potentially an interaction with how the preview is embedded/proxied within the Web Studio environment.

This discrepancy makes it challenging to reliably test and debug authentication-dependent features directly within the “Web Studio” environment, forcing a switch to external browsers for accurate testing of these flows.

Troubleshooting Steps Taken (which did not resolve the issue in “Web Studio” but work in external browsers):

  • Ensured all client-side fetch requests to authenticated API endpoints use the credentials: 'include' option.
  • Verified server-side cookie setting attributes (HttpOnly, Path, SameSite=Lax, Secure=false).
  • Experimented with various timings for API calls post-login (e.g., awaiting other actions, using useEffect based on different states).
  • Thoroughly cleared .next cache and browser cookies between tests.

Request:

Could the Firebase Studio team investigate if there are any known limitations or specific configurations required for cookie handling within the “Web Studio” development browser, especially for Next.js applications with custom cookie-based authentication?

Thank you for your time and the excellent Firebase Studio platform.

P.S.: I can provide the testing report and additional information if needed.