How to Handle Navigation Between Two Separate Flutter Web Applications on Same Domain with Session Management

Frontend
1

I’m building a micro-frontend setup using Flutter web where I have two different apps running on the same domain but different paths.

My Setup:

  • Authentication app at /auth/
  • Dashboard app at /dashboard/

Both applications are built separately and hosted on different routes. Here’s what should happen:

  1. User logs in through the auth app and gets redirected to dashboard.
  2. When user clicks logout in dashboard, it should clear all data and go back to auth.
  3. Browser back button shouldn’t allow returning to dashboard after logout.

Current Implementation:

For login redirect:

import 'dart:js' as javascript;

void navigateToDashboard() {
  javascript.context.callMethod('eval', [
    'window.location.replace("/dashboard/")'
  ]);
}

For logout:

import 'dart:html' as browser;
import 'dart:js' as javascript;

void performLogout() {
  browser.window.sessionStorage.clear();
  browser.window.localStorage.clear();
  javascript.context.callMethod('eval', [
    'window.location.replace("/auth/")'
  ]);
}

What I’ve Attempted:

  • Using browser.window.location.assign()
  • Trying browser.window.open() with _self target
  • Standard Flutter navigation with Navigator.push()
  • Custom popstate event handling
  • Different routing libraries like go_router

The Issue:
After logout and redirect, users can still hit the back button and access the dashboard app even though their session is cleared. This creates security concerns since they can view the protected content momentarily.

What I’m Looking For:

  • Best practices for navigating between independent Flutter web apps.
  • Ways to properly clear browser history after logout.
  • Methods to detect and handle back navigation in this scenario.

Has anyone dealt with similar multi-app Flutter web deployments? Any suggestions would be helpful!

2

same issue here with flutter. add window.history.replaceState(null, null, '/auth/') after you clear storage but before redirecting - it overwrites the history entry instead of just doing a redirect. also throw a session check in your dashboard’s main() that kicks users out right away if there’s no valid token.

3

Try window.history.replaceState() instead of location.replace(). Clear the history stack with multiple replaceState calls to overwrite previous entries. Works way better than regular navigation methods when logging users out.

4

Nice micro-frontend setup! You could try window.history.pushState() to add dummy entries before logout - then the back button just hits empty states. Are you sharing state between the apps or keeping them totally separate?

5

cool setup! maybe consider adding a heartbeat check on the dashboard to ping the auth service often. if the session isn’t valid, redirect them out. that way, the back button is less of a concern. what auth system are you using?

6

Set up a session validation middleware that runs every time the dashboard loads. Before rendering anything, verify the auth token with your auth service. If it fails, redirect using window.location.href = '/auth/' instead of replace methods. This handles the back button issue perfectly - even if users hit back, the dashboard checks their session and kicks them out before showing protected content. I’ve done this with several Flutter web apps and it’s way more secure than messing with browser history. Just make sure the session check runs synchronously during bootstrap.