WEB-956: share authenticated session across tabs and windows

Currently AuthenticationService persists the user credentials in
sessionStorage by default (and only opts into localStorage when the
optional Remember Me checkbox is checked). sessionStorage is scoped to
a single browser tab/window, so any link to a Mifos URL opened from
outside the current tab — email, chat, bookmark, target="_blank", a new
browser window — boots into an empty storage and the
AuthenticationGuard sends the already-logged-in user back to /login.

This change adopts the pattern used by `@supabase/auth-js`
(GoTrueClient.ts) and Auth0's SPA SDK: localStorage as the single
source of truth for the session, plus a BroadcastChannel for cross-tab
synchronisation.

- The `storage` field is now `localStorage` unconditionally so the
  session is visible to every tab/window of the same origin. The
  `rememberMe` flag is preserved for the backend token expiration
  policy, but no longer controls which Storage is used in the browser.

- A BroadcastChannel named `mifosXAuth` is created lazily (with a
  feature-detect fallback for older browsers). On login the service
  broadcasts a `{ type: 'login' }` message; on logout it broadcasts
  `{ type: 'logout' }`. Other tabs listening on the same channel
  rehydrate or wipe their state accordingly without waiting for a
  reload — matching what users expect from modern SaaS UIs.

Verified end-to-end against the isolated docker-compose stack:

  master:   click on a Mifos link while logged in  → re-login forced
  fix:      click on a Mifos link while logged in  → session preserved
  fix:      logout in tab A                        → tab B reacts live

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: Jonattan Infante

src/app/core/authentication/authentication.service.ts

@@ -58,13 +58,17 @@ export class AuthenticationService {
   /** Denotes whether the user credentials should persist through sessions. */
   private rememberMe = false;
   /**
-   * Denotes the type of storage:
+   * Credentials are always persisted in localStorage so the authenticated
+   * session is shared across browser tabs and windows of the same origin.
+   * sessionStorage would scope the credentials to a single tab, which forces
+   * an unnecessary re-login when the user opens any internal link from an
+   * external program (email, chat, bookmark, target="_blank", etc.).
    *
-   * Session Storage: User credentials should not persist through sessions.
-   *
-   * Local Storage: User credentials should persist through sessions.
+   * The `rememberMe` flag still controls the token expiration policy on the
+   * backend; on logout (or when credentials are cleared explicitly) the
+   * storage is wiped from both localStorage and sessionStorage.
    */
-  private storage: Storage = sessionStorage;
+  private storage: Storage = localStorage;
   private credentials: Credentials;
   private dialogShown = false;
   private authMode: AuthMode = AuthMode.Basic;
@@ -77,6 +81,17 @@ export class AuthenticationService {
   /** Key to store two factor authentication token in storage. */
   private readonly twoFactorAuthenticationTokenStorageKey = 'mifosXTwoFactorAuthenticationToken';
 
+  /**
+   * Broadcast channel used to synchronise login/logout events across browser
+   * tabs and windows of the same origin. Mirrors the pattern used by
+   * `@supabase/auth-js` (see supabase/auth-js GoTrueClient.ts) so that a
+   * logout in any tab propagates to the others without waiting for a page
+   * reload, and a login in a new tab updates already-open ones too.
+   * Falls back gracefully when BroadcastChannel is unavailable.
+   */
+  private readonly broadcastChannel: BroadcastChannel | null =
+    typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel('mifosXAuth') : null;
+
   /**
    * Initializes the type of storage and authorization headers depending on whether
    * credentials are presently in storage or not.
@@ -93,6 +108,30 @@ export class AuthenticationService {
     }
 
     this.restoreSession();
+    this.listenForCrossTabAuthEvents();
+  }
+
+  /**
+   * Listens for login/logout events broadcast from other tabs and updates
+   * the local authentication state accordingly. This keeps the UI in sync
+   * (e.g. a logout in tab A removes the session from tab B in real-time).
+   */
+  private listenForCrossTabAuthEvents(): void {
+    if (!this.broadcastChannel) return;
+    this.broadcastChannel.onmessage = (event: MessageEvent<{ type: 'login' | 'logout' }>) => {
+      if (event.data?.type === 'logout' && this.userLoggedIn$.getValue()) {
+        // Mirror the logout effects without re-broadcasting (avoid loops).
+        this.authenticationInterceptor.removeAuthorization();
+        [
+          localStorage,
+          sessionStorage
+        ].forEach((store) => store.removeItem(this.credentialsStorageKey));
+        this.userLoggedIn$.next(false);
+      } else if (event.data?.type === 'login' && !this.userLoggedIn$.getValue()) {
+        // Another tab logged in: rehydrate from shared storage.
+        this.restoreSession();
+      }
+    };
   }
 
   /**
@@ -220,7 +259,10 @@ export class AuthenticationService {
     }
 
     this.rememberMe = environment.enableRememberMe ? (loginContext?.remember ?? false) : false;
-    this.storage = this.rememberMe ? localStorage : sessionStorage;
+    // Always use localStorage so the authenticated session is visible
+    // to any tab/window opened against the same origin (links from
+    // email, chat, bookmarks, target="_blank", new browser windows, ...).
+    this.storage = localStorage;
 
     // Basic Auth: Direct authentication with Fineract
     return this.http
@@ -374,6 +416,7 @@ export class AuthenticationService {
     this.setCredentials();
     this.resetDialog();
     this.userLoggedIn$.next(false);
+    this.broadcastChannel?.postMessage({ type: 'logout' });
 
     if (this.authMode === AuthMode.OIDC) {
       // OIDC: Use library to handle logout (redirects to OIDC provider)
@@ -435,11 +478,15 @@ export class AuthenticationService {
    */
   private setCredentials(credentials?: Credentials): void {
     if (credentials) {
+      const wasLoggedIn = this.userLoggedIn$.getValue();
       credentials.rememberMe = this.rememberMe;
-      // Make sure we're using the correct storage based on rememberMe value
-      this.storage = credentials.rememberMe ? localStorage : sessionStorage;
+      // Credentials are always written to localStorage so the session is
+      // shared across tabs/windows of the same origin (see class doc).
+      this.storage = localStorage;
       this.oauthService.setStorage(this.storage);
       this.storage.setItem(this.credentialsStorageKey, JSON.stringify(credentials));
+      // Notify other tabs only on a NEW login (not on every credential refresh).
+      if (!wasLoggedIn) this.broadcastChannel?.postMessage({ type: 'login' });
     } else {
       // Clear credentials from both storage types to ensure complete logout
       [