browser-extension-manager 1.3.16 → 1.3.18

package/CHANGELOG.md

@@ -15,6 +15,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - `Security` in case of vulnerabilities.
 
 ---
+## [1.3.17] - 2025-12-23
+### Changed
+- Auth system now uses messaging instead of `chrome.storage` for cross-context sync
+- Background.js is the source of truth; contexts sync via `bxm:syncAuth` message on load
+- Fresh custom tokens fetched from server only when context UID differs from background UID
+
+### Fixed
+- Auth failures caused by expired custom tokens (tokens no longer stored, fetched fresh when needed)
+
 ## [1.3.0] - 2025-12-16
 
 ### Added

package/CLAUDE.md

@@ -354,11 +354,7 @@ Provides cross-context auth synchronization and reusable auth UI event handlers.
 
 ### Cross-Context Auth Architecture
 
-**Background.js is the source of truth** for authentication. Browser extensions have multiple isolated JavaScript contexts (background, popup, options, pages, sidepanel) - each runs its own Firebase instance. BEM solves this by:
-
-1. Background.js monitors for auth tokens via `tabs.onUpdated`
-2. When detected, background signs in Firebase and saves to `chrome.storage`
-3. Other contexts listen to storage changes and sync their Firebase instances
+**Background.js is the source of truth** for authentication. Browser extensions have multiple isolated JavaScript contexts (background, popup, options, pages, sidepanel) - each runs its own Firebase instance. BEM syncs them via messaging (no storage).
 
 **Sign-in Flow:**
 ```
@@ -366,29 +362,36 @@ User clicks .auth-signin-btn
   → openAuthPage() opens https://{authDomain}/token?authSourceTabId=123
   → Website authenticates, redirects to /token?authToken=xxx
   → background.js tabs.onUpdated detects authDomain URL with authToken param
-  → background.js calls handleAuthToken():
-    → signInWithCustomToken(auth, token)
-    → Saves {token, user, timestamp} to storage key 'bxm:authState'
-    → Closes the /token tab
-    → Reactivates the original tab (authSourceTabId)
-  → Other contexts detect storage change via setupAuthStorageListener()
-  → Each context calls signInWithStoredToken() to sign in their Firebase
+  → background.js signs in with signInWithCustomToken()
+  → background.js broadcasts token to all open contexts via postMessage()
+  → Closes the /token tab, reactivates original tab
+  → Open contexts receive broadcast and sign in with the token
+```
+
+**Context Load Flow:**
+```
+Context loads (popup, page, options, sidepanel)
+  → Web Manager initializes, waits for auth to settle via auth.listen({once: true})
+  → Sends bxm:syncAuth message to background with local UID
+  → Background compares UIDs:
+    → Same UID (including both null) → already in sync, no action
+    → Different UID → background fetches fresh custom token from server, sends to context
+    → Background signed out, context signed in → tells context to sign out
 ```
 
 **Sign-out Flow:**
 ```
 User clicks .auth-signout-btn
-  → Web Manager signs out Firebase locally
-  → setupAuthStorageListener() detects WM auth state change (user=null)
-  → Clears 'bxm:authState' from storage
-  → background.js setupAuthStorageListener() detects storage cleared
-  → background.js signs out its Firebase instance
-  → Other contexts detect storage cleared and sign out
+  → Web Manager signs out that context's Firebase
+  → setupSignOutListener() detects sign-out, sends bxm:signOut to background
+  → background.js signs out its Firebase
+  → background.js broadcasts bxm:signOut to all other contexts
+  → All contexts sign out
 ```
 
 **Key Implementation Details:**
 
-1. **Storage area**: BEM normalizes storage to `sync` (if available) or `local`. Auth listeners should NOT check `areaName` - just check for the `bxm:authState` key directly.
+1. **No storage**: Auth state is NOT stored in `chrome.storage`. Firebase persists sessions in IndexedDB per context. Web Manager handles UI bindings.
 
 2. **Firebase in service workers**: Static ES6 imports are required. Dynamic `import()` fails with webpack chunking in service workers.
 
@@ -397,7 +400,9 @@ User clicks .auth-signout-btn
 4. **Required permission**: `tabs` permission needed for `tabs.onUpdated` listener.
 
 **Functions:**
-- `setupAuthStorageListener(context)` - Listens for auth state changes from background.js AND monitors WM auth state to clear storage on sign-out
+- `syncWithBackground(context)` - Compares context's UID with background's UID on load, syncs if different
+- `setupAuthBroadcastListener(context)` - Listens for sign-in/sign-out broadcasts from background
+- `setupSignOutListener(context)` - Notifies background when context signs out
 - `setupAuthEventListeners(context)` - Sets up delegated click handlers for auth buttons
 - `openAuthPage(context, options)` - Opens auth page on the website with authSourceTabId for tab restoration
 
@@ -432,21 +437,6 @@ Add these classes to your HTML elements to enable automatic auth handling:
 - `data-wm-bind="@text auth.user.email"` - Display user's email
 - `data-wm-bind="@attr src auth.user.photoURL"` - Set avatar image src
 
-**Storage Schema (`bxm:authState`):**
-```javascript
-{
-  token: "firebase-custom-token",  // Used by other contexts to sign in
-  user: {
-    uid: "...",
-    email: "...",
-    displayName: "...",
-    photoURL: "...",
-    emailVerified: true
-  },
-  timestamp: 1234567890
-}
-```
-
 **Logger:** [src/lib/logger.js](src/lib/logger.js)
 - Full logging utility
 - [src/lib/logger-lite.js](src/lib/logger-lite.js) for lightweight contexts
@@ -808,8 +798,8 @@ Manager.initialize().then(() => {
 - [src/cli.js](src/cli.js) - CLI implementation
 
 **Auth System (Cross-Context):**
-- [src/background.js](src/background.js) - Source of truth for auth; `setupAuthTokenListener()`, `setupAuthStorageListener()`, `handleAuthToken()`
-- [src/lib/auth-helpers.js](src/lib/auth-helpers.js) - `setupAuthStorageListener()`, `openAuthPage()`, `setupAuthEventListeners()` for non-background contexts
+- [src/background.js](src/background.js) - Source of truth; `handleSyncAuth()`, `handleSignOut()`, `broadcastAuthToken()`
+- [src/lib/auth-helpers.js](src/lib/auth-helpers.js) - `syncWithBackground()`, `setupAuthBroadcastListener()`, `setupSignOutListener()`
 
 **CSS Framework:**
 - [src/assets/css/browser-extension-manager.scss](src/assets/css/browser-extension-manager.scss) - Main entry

package/README.md

@@ -88,112 +88,43 @@ Only stores with configured credentials will be published to.
 
 ## 🔐 Authentication
 
-BEM provides built-in authentication support that syncs across all extension contexts (popup, options, pages, sidepanel, background).
+BEM provides built-in authentication that syncs across all extension contexts (popup, options, pages, sidepanel, background).
 
-### Auth Architecture Overview
+### How It Works
 
-**Background.js is the source of truth** for authentication state. When a user signs in via the website, the auth token flows through background.js to all other contexts via `chrome.storage`.
+**Background.js is the source of truth.** Auth syncs via messaging (no storage).
 
-```
-┌─────────────────────────────────────────────────────────────────────────┐
-│                         SIGN-IN FLOW                                    │
-├─────────────────────────────────────────────────────────────────────────┤
-│  1. User clicks .auth-signin-btn in any context                         │
-│  2. Extension opens https://{authDomain}/token?authSourceTabId=123      │
-│  3. Website authenticates user, redirects to /token?authToken=xxx       │
-│  4. Background.js detects URL via tabs.onUpdated listener               │
-│  5. Background signs in Firebase with custom token                      │
-│  6. Background saves auth state to chrome.storage (bxm:authState)       │
-│  7. Background closes /token tab and reactivates original tab           │
-│  8. Other contexts detect storage change and sign in their Firebase     │
-└─────────────────────────────────────────────────────────────────────────┘
-
-┌─────────────────────────────────────────────────────────────────────────┐
-│                         SIGN-OUT FLOW                                   │
-├─────────────────────────────────────────────────────────────────────────┤
-│  1. User clicks .auth-signout-btn in any context                        │
-│  2. Web Manager signs out Firebase locally                              │
-│  3. Auth helper detects WM auth change, clears bxm:authState storage    │
-│  4. Background.js detects storage cleared, signs out its Firebase       │
-│  5. Other contexts detect storage change and sign out                   │
-└─────────────────────────────────────────────────────────────────────────┘
-```
-
-### Required Configuration
-
-Add `authDomain` to your Firebase config in `config/browser-extension-manager.json`:
-
-```json
-{
-  "firebaseConfig": {
-    "apiKey": "...",
-    "authDomain": "your-app.firebaseapp.com",
-    "projectId": "..."
-  }
-}
-```
+- **Sign-in**: User clicks `.auth-signin-btn` → opens `/token` page on website → website authenticates and redirects with token → background.js signs in and broadcasts to all open contexts
+- **Context load**: Each context compares its UID with background's UID on load; syncs if different
+- **Sign-out**: User clicks `.auth-signout-btn` → context signs out → notifies background → background broadcasts sign-out to all contexts
 
-### Required Permission
+### Required Setup
 
-Add the `tabs` permission to your `src/manifest.json`:
-
-```json
-{
-  "permissions": ["tabs"]
-}
-```
-
-This is required for background.js to monitor tab URL changes and detect auth tokens.
+1. Add `authDomain` to your Firebase config in `config/browser-extension-manager.json`
+2. Add `tabs` permission to `src/manifest.json` (for URL monitoring)
 
 ### Auth Button Classes
 
-Add these classes to your HTML elements to enable automatic auth handling:
-
-| Class | Description | Action |
-|-------|-------------|--------|
-| `.auth-signin-btn` | Sign in button | Opens `/token` page on website |
-| `.auth-signout-btn` | Sign out button | Signs out via Web Manager (which triggers storage sync) |
-| `.auth-account-btn` | Account button | Opens `/account` page on website |
+| Class | Action |
+|-------|--------|
+| `.auth-signin-btn` | Opens `/token` page on website |
+| `.auth-signout-btn` | Signs out via Web Manager |
+| `.auth-account-btn` | Opens `/account` page on website |
 
 ### Example
 ```html
-<!-- Sign In Button (shown when logged out) -->
-<button class="btn auth-signin-btn" data-wm-bind="@show !auth.user">
-  Sign In
-</button>
+<button class="btn auth-signin-btn" data-wm-bind="@show !auth.user">Sign In</button>
 
-<!-- Account Section (shown when logged in) -->
 <div data-wm-bind="@show auth.user" hidden>
   <span data-wm-bind="@text auth.user.displayName">User</span>
-  <a class="auth-account-btn" href="#">Account</a>
   <button class="auth-signout-btn">Sign Out</button>
 </div>
 ```
 
 ### Reactive Bindings
-- `data-wm-bind="@show auth.user"` - Show when logged in
-- `data-wm-bind="@show !auth.user"` - Show when logged out
-- `data-wm-bind="@text auth.user.displayName"` - Display user's name
-- `data-wm-bind="@text auth.user.email"` - Display user's email
-- `data-wm-bind="@attr src auth.user.photoURL"` - Set avatar image src
-
-### Storage Key
-
-Auth state is stored in `chrome.storage` under the key `bxm:authState`:
-
-```javascript
-{
-  token: "firebase-custom-token",
-  user: {
-    uid: "...",
-    email: "...",
-    displayName: "...",
-    photoURL: "...",
-    emailVerified: true
-  },
-  timestamp: 1234567890
-}
-```
+- `@show auth.user` / `@show !auth.user` - Show/hide based on auth state
+- `@text auth.user.displayName` / `@text auth.user.email` - Display user info
+- `@attr src auth.user.photoURL` - Set avatar image
 
 <!-- ## ⛳️ Flags
 * `--test=false` - Coming soon

package/dist/background.js

@@ -65,11 +65,8 @@ class Manager {
     // Setup auth token listener (for cross-runtime auth)
     this.setupAuthTokenListener();
 
-    // Setup auth storage listener (detect sign-out from pages)
-    this.setupAuthStorageListener();
-
-    // Restore auth state from storage on startup
-    this.restoreAuthState();
+    // Initialize Firebase auth on startup (restores persisted session if any)
+    this.initializeAuth();
 
     // Setup livereload
     this.setupLiveReload();
@@ -125,10 +122,15 @@ class Manager {
 
     // Listen for runtime messages (from popup, options, pages, etc.)
     this.extension.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-      // Handle auth ID token requests from other contexts
-      // Other contexts use storage listener to know WHEN to request, this just provides the token
-      if (message.command === 'bxm:getIdToken') {
-        this.handleGetIdToken(sendResponse);
+      // Handle auth sync requests - contexts ask background for auth state on load
+      if (message.command === 'bxm:syncAuth') {
+        this.handleSyncAuth(message, sendResponse);
+        return true; // Keep channel open for async response
+      }
+
+      // Handle sign-out requests from contexts
+      if (message.command === 'bxm:signOut') {
+        this.handleSignOut(sendResponse);
         return true; // Keep channel open for async response
       }
     });
@@ -137,28 +139,128 @@ class Manager {
     this.logger.log('Set up message handlers');
   }
 
-  // Handle ID token request from other contexts
-  // Called when other contexts detect auth state in storage and need a fresh token to sign in
-  async handleGetIdToken(sendResponse) {
+  // Handle auth sync request from other contexts (popup, page, options, sidepanel)
+  // Compares context's UID with background's UID and provides fresh token only if different
+  async handleSyncAuth(message, sendResponse) {
     try {
-      // Check if Firebase auth is initialized and user is signed in
-      if (!this.libraries.firebaseAuth?.currentUser) {
-        this.logger.log('[AUTH] getIdToken: No user signed in');
-        sendResponse({ success: false, error: 'No user signed in' });
+      const contextUid = message.contextUid || null; // UID from asking context (or null)
+
+      // Get or initialize Firebase auth
+      const auth = this.getFirebaseAuth();
+      const bgUser = auth.currentUser;
+      const bgUid = bgUser?.uid || null;
+
+      this.logger.log('[AUTH] syncAuth: Comparing UIDs - context:', contextUid, 'background:', bgUid);
+
+      // Already in sync (both null, or same UID)
+      if (contextUid === bgUid) {
+        this.logger.log('[AUTH] syncAuth: Already in sync');
+        sendResponse({ needsSync: false });
+        return;
+      }
+
+      // Context is signed in but background is not → context should sign out
+      if (!bgUser && contextUid) {
+        this.logger.log('[AUTH] syncAuth: Background signed out, telling context to sign out');
+        sendResponse({ needsSync: true, signOut: true });
         return;
       }
 
-      // Get fresh ID token (Firebase auto-refreshes if needed)
-      const idToken = await this.libraries.firebaseAuth.currentUser.getIdToken(true);
+      // Background is signed in, context is not (or different user) → provide token
+      this.logger.log('[AUTH] syncAuth: Fetching fresh custom token for context...', bgUser.email);
+
+      // Get API URL from config
+      const apiUrl = this.config?.web_manager?.api?.url || 'https://api.itwcreativeworks.com';
+
+      // Get fresh ID token for authorization
+      const idToken = await bgUser.getIdToken(true);
+
+      // Fetch fresh custom token from server
+      const response = await fetch(`${apiUrl}/backend-manager`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${idToken}`,
+        },
+        body: JSON.stringify({
+          command: 'user:create-custom-token',
+          payload: {},
+        }),
+      });
+
+      // Check response
+      if (!response.ok) {
+        throw new Error(`Server responded with ${response.status}`);
+      }
+
+      // Parse response
+      const data = await response.json();
+
+      // Check for token in response
+      if (!data.response?.token) {
+        throw new Error('No token in server response');
+      }
+
+      this.logger.log('[AUTH] syncAuth: Got fresh custom token, sending to context');
+
+      // Send user info and fresh custom token
+      sendResponse({
+        needsSync: true,
+        customToken: data.response.token,
+        user: {
+          uid: bgUser.uid,
+          email: bgUser.email,
+          displayName: bgUser.displayName,
+          photoURL: bgUser.photoURL,
+          emailVerified: bgUser.emailVerified,
+        },
+      });
+
+    } catch (error) {
+      this.logger.error('[AUTH] syncAuth error:', error.message);
+      sendResponse({ needsSync: false, error: error.message });
+    }
+  }
+
+  // Handle sign-out request from a context
+  // Signs out background's Firebase and broadcasts to all other contexts
+  async handleSignOut(sendResponse) {
+    try {
+      this.logger.log('[AUTH] handleSignOut: Signing out background Firebase...');
+
+      // Sign out background's Firebase
+      if (this.libraries.firebaseAuth?.currentUser) {
+        await this.libraries.firebaseAuth.signOut();
+      }
+
+      // Broadcast to all contexts
+      await this.broadcastSignOut();
 
-      this.logger.log('[AUTH] getIdToken: Providing fresh ID token');
-      sendResponse({ success: true, idToken: idToken });
+      this.logger.log('[AUTH] handleSignOut: Complete');
+      sendResponse({ success: true });
     } catch (error) {
-      this.logger.error('[AUTH] getIdToken error:', error.message);
+      this.logger.error('[AUTH] handleSignOut error:', error.message);
       sendResponse({ success: false, error: error.message });
     }
   }
 
+  // Broadcast sign-out to all open extension contexts
+  async broadcastSignOut() {
+    try {
+      const clients = await self.clients.matchAll({ type: 'all' });
+
+      this.logger.log(`[AUTH] Broadcasting sign-out to ${clients.length} clients...`);
+
+      for (const client of clients) {
+        client.postMessage({ command: 'bxm:signOut' });
+      }
+
+      this.logger.log('[AUTH] Sign-out broadcast complete');
+    } catch (error) {
+      this.logger.error('[AUTH] Error broadcasting sign-out:', error.message);
+    }
+  }
+
   // Initialize Firebase
   initializeFirebase() {
     // Get Firebase config
@@ -281,75 +383,25 @@ class Manager {
     });
   }
 
-  // Setup auth storage listener (detect sign-out from pages)
-  setupAuthStorageListener() {
-    this.extension.storage.onChanged.addListener((changes) => {
-      const authChange = changes['bxm:authState'];
-      if (!authChange) {
-        return;
-      }
-
-      this.logger.log('[AUTH] Storage auth state changed:', authChange.newValue ? 'signed in' : 'signed out');
-
-      // If storage was cleared (sign-out from a page) and we have Firebase initialized, sign out
-      if (!authChange.newValue && this.libraries.firebaseAuth) {
-        this.logger.log('[AUTH] Signing out background Firebase...');
-        this.libraries.firebaseAuth.signOut();
-      }
-    });
-
-    this.logger.log('[AUTH] Auth storage listener set up');
-  }
-
-  // Restore auth state on startup
+  // Initialize Firebase auth on startup
   // Firebase Auth persists sessions in IndexedDB - we just need to initialize it
-  // and onAuthStateChanged will fire if there's a persisted session
-  async restoreAuthState() {
-    try {
-      // Check for existing auth state in storage (for logging purposes)
-      const result = await new Promise(resolve =>
-        this.extension.storage.local.get('bxm:authState', resolve)
-      );
-      const authState = result['bxm:authState'];
-
-      // Log existing storage state
-      if (authState) {
-        this.logger.log('[AUTH] Found existing auth state in storage on startup:', {
-          user: authState.user?.email || 'unknown',
-          timestamp: authState.timestamp,
-          age: authState.timestamp ? `${Math.round((Date.now() - authState.timestamp) / 1000 / 60)} minutes ago` : 'unknown',
-        });
-      } else {
-        this.logger.log('[AUTH] No existing auth state found in storage on startup');
-      }
-
-      // Get Firebase config
-      const firebaseConfig = this.config?.firebase?.app?.config;
-      if (!firebaseConfig) {
-        this.logger.log('[AUTH] Firebase config not available, skipping auth restore');
-        return;
-      }
-
-      // Initialize Firebase auth - it will auto-restore from IndexedDB if session exists
-      // onAuthStateChanged (set up in getFirebaseAuth) will fire and sync to storage
-      this.logger.log('[AUTH] Initializing Firebase Auth (will restore persisted session if any)...');
-      const auth = this.getFirebaseAuth();
+  initializeAuth() {
+    // Get Firebase config
+    const firebaseConfig = this.config?.firebase?.app?.config;
+    if (!firebaseConfig) {
+      this.logger.log('[AUTH] Firebase config not available, skipping auth initialization');
+      return;
+    }
 
-      // Check if already signed in (Firebase restored from IndexedDB)
-      if (auth.currentUser) {
-        this.logger.log('[AUTH] Firebase restored session from persistence:', auth.currentUser.email);
-      } else {
-        this.logger.log('[AUTH] No persisted Firebase session found');
+    // Initialize Firebase auth - it will auto-restore from IndexedDB if session exists
+    this.logger.log('[AUTH] Initializing Firebase Auth (will restore persisted session if any)...');
+    const auth = this.getFirebaseAuth();
 
-        // If storage has auth state but Firebase doesn't, storage is stale - clear it
-        if (authState) {
-          this.logger.log('[AUTH] Clearing stale auth state from storage');
-          await this.extension.storage.local.remove('bxm:authState');
-        }
-      }
-
-    } catch (error) {
-      this.logger.error('[AUTH] Error restoring auth state:', error.message);
+    // Check if already signed in (Firebase restored from IndexedDB)
+    if (auth.currentUser) {
+      this.logger.log('[AUTH] Firebase restored session from persistence:', auth.currentUser.email);
+    } else {
+      this.logger.log('[AUTH] No persisted Firebase session found');
     }
   }
 
@@ -385,31 +437,10 @@ class Manager {
   }
 
   // Handle Firebase auth state changes (source of truth for all contexts)
-  // Syncs user info to storage (NOT tokens - those are requested via messaging)
-  async handleAuthStateChange(user) {
+  // No storage operations - Web Manager handles auth state internally
+  handleAuthStateChange(user) {
     this.logger.log('[AUTH] Auth state changed:', user?.email || 'signed out');
-
-    if (user) {
-      // User is signed in - store user info only (no tokens, they expire)
-      // Other contexts will request fresh ID tokens via bxm:getIdToken message
-      const authState = {
-        user: {
-          uid: user.uid,
-          email: user.email,
-          displayName: user.displayName,
-          photoURL: user.photoURL,
-          emailVerified: user.emailVerified,
-        },
-        timestamp: Date.now(),
-      };
-
-      await this.extension.storage.local.set({ 'bxm:authState': authState });
-      this.logger.log('[AUTH] Auth state synced to storage (user info only)');
-    } else {
-      // User is signed out - clear storage
-      await this.extension.storage.local.remove('bxm:authState');
-      this.logger.log('[AUTH] Auth state cleared from storage');
-    }
+    // Nothing else to do - contexts sync via messages, WM handles UI
   }
 
   // Handle auth token from website (custom token from /token page)
@@ -422,8 +453,6 @@ class Manager {
       const auth = this.getFirebaseAuth();
 
       // Sign in with custom token
-      // Firebase Auth will persist the session - we don't store the custom token (it expires in 1 hour)
-      // Other contexts will request fresh ID tokens via bxm:getIdToken message
       this.logger.log('[AUTH] Calling signInWithCustomToken...');
       const userCredential = await signInWithCustomToken(auth, token);
       const user = userCredential.user;
@@ -431,7 +460,12 @@ class Manager {
       // Log
       this.logger.log('[AUTH] Signed in successfully:', user.email);
 
-      // Note: onAuthStateChanged will sync user info to storage automatically
+      // Broadcast token to all open extension contexts so they can sign in immediately
+      // Token is NOT stored - it expires in 1 hour and is only needed for initial sign-in
+      this.broadcastAuthToken(token);
+
+      // Note: onAuthStateChanged will fire and store user info (without token) in storage
+      // This allows UI to show auth state, but token is never persisted
 
       // Close the auth tab
       await this.extension.tabs.remove(tabId);
@@ -453,6 +487,29 @@ class Manager {
     }
   }
 
+  // Broadcast auth token to all open extension contexts
+  // Used during initial sign-in to immediately sync all open popups, pages, etc.
+  async broadcastAuthToken(token) {
+    try {
+      // Get all clients (extension pages, popups, etc.)
+      const clients = await self.clients.matchAll({ type: 'all' });
+
+      this.logger.log(`[AUTH] Broadcasting token to ${clients.length} clients...`);
+
+      // Send token to each client
+      for (const client of clients) {
+        client.postMessage({
+          command: 'bxm:signInWithToken',
+          token: token,
+        });
+      }
+
+      this.logger.log('[AUTH] Token broadcast complete');
+    } catch (error) {
+      this.logger.error('[AUTH] Error broadcasting token:', error.message);
+    }
+  }
+
   // Setup livereload
   setupLiveReload() {
     // Quit if not in dev mode

package/dist/lib/auth-helpers.js

@@ -2,120 +2,135 @@
 // Used by popup.js, options.js, sidepanel.js, page.js
 //
 // Architecture:
-// - Background.js is the source of truth for Firebase Auth (persists in IndexedDB)
-// - Storage (bxm:authState): Contains user info only, used for UI updates and signaling auth changes
-// - Messages (bxm:getIdToken): Request fresh ID token from background.js when needed
-//
-// Flow:
-// 1. Storage listener detects auth state change (user signed in/out)
-// 2. If signed in, request fresh ID token from background.js via message
-// 3. Sign in local Firebase with the ID token using signInWithCustomToken workaround
+// - Background.js is the SOURCE OF TRUTH for authentication
+// - On context load, contexts wait for WM auth to settle, then ask background if in sync
+// - If out of sync, background provides a fresh custom token (fetched from server)
+// - No BEM-specific storage - Web Manager handles auth state internally
 
 /**
- * Request fresh ID token from background.js
- * The ID token can be used for authenticated API calls
- * @param {Object} context - The manager instance
- * @returns {Promise<string|null>} The ID token or null if not signed in
+ * Sync auth state with background.js on context load
+ * Waits for WM auth to settle, then asks background if in sync
+ * @param {Object} context - The manager instance (must have extension, webManager, logger)
  */
-export async function getIdToken(context) {
-  const { extension, logger } = context;
+export async function syncWithBackground(context) {
+  const { extension, webManager, logger } = context;
 
   try {
-    logger.log('[AUTH-SYNC] Requesting fresh ID token from background...');
+    // Wait for WM auth state to settle FIRST (prevents race conditions)
+    const localState = await new Promise(resolve => {
+      webManager.auth().listen({ once: true }, resolve);
+    });
+
+    const localUid = localState.user?.uid || null;
+    logger.log('[AUTH-SYNC] Local auth state settled, UID:', localUid);
 
-    // Request fresh ID token from background.js
+    // Ask background for auth state comparison
     const response = await new Promise((resolve) => {
-      extension.runtime.sendMessage({ command: 'bxm:getIdToken' }, resolve);
+      extension.runtime.sendMessage(
+        { command: 'bxm:syncAuth', contextUid: localUid },
+        (res) => {
+          if (extension.runtime.lastError) {
+            logger.log('[AUTH-SYNC] Background not ready:', extension.runtime.lastError.message);
+            resolve({ needsSync: false });
+            return;
+          }
+          resolve(res || { needsSync: false });
+        }
+      );
     });
 
-    // Check response
-    if (!response?.success) {
-      logger.log('[AUTH-SYNC] Failed to get ID token:', response?.error || 'Unknown error');
-      return null;
+    // Already in sync
+    if (!response.needsSync) {
+      logger.log('[AUTH-SYNC] Already in sync with background');
+      return;
+    }
+
+    // Need to sign out (background is signed out, context is signed in)
+    if (response.signOut) {
+      logger.log('[AUTH-SYNC] Background signed out, signing out context...');
+      await webManager.auth().signOut();
+      return;
+    }
+
+    // Need to sign in with token
+    if (response.customToken) {
+      logger.log('[AUTH-SYNC] Syncing with background...', response.user?.email);
+      await webManager.auth().signInWithCustomToken(response.customToken);
+      logger.log('[AUTH-SYNC] Synced successfully');
     }
 
-    logger.log('[AUTH-SYNC] Got fresh ID token from background');
-    return response.idToken;
   } catch (error) {
-    logger.error('[AUTH-SYNC] Error getting ID token:', error.message);
-    return null;
+    logger.error('[AUTH-SYNC] Error syncing with background:', error.message);
   }
 }
 
 /**
- * Sync auth state from background.js
- * Fetches fresh ID token and stores for API calls
- * @param {Object} context - The manager instance
+ * Set up listener for auth token broadcasts from background.js
+ * Handles both sign-in broadcasts and sign-out broadcasts
+ * @param {Object} context - The manager instance (must have extension, webManager, logger)
  */
-async function syncAuthFromBackground(context) {
-  const idToken = await getIdToken(context);
+export function setupAuthBroadcastListener(context) {
+  const { webManager, logger } = context;
+
+  // Listen for messages from service worker (background.js)
+  navigator.serviceWorker?.addEventListener('message', async (event) => {
+    const { command, token } = event.data || {};
+
+    // Handle sign-in broadcast
+    if (command === 'bxm:signInWithToken' && token) {
+      logger.log('[AUTH-BROADCAST] Received sign-in broadcast');
+      try {
+        await webManager.auth().signInWithCustomToken(token);
+        logger.log('[AUTH-BROADCAST] Signed in via broadcast');
+      } catch (error) {
+        logger.error('[AUTH-BROADCAST] Error signing in:', error.message);
+      }
+      return;
+    }
 
-  if (idToken) {
-    // Store on context for API calls
-    context._idToken = idToken;
-    context.logger.log('[AUTH-SYNC] ID token synced and stored');
-  }
+    // Handle sign-out broadcast
+    if (command === 'bxm:signOut') {
+      // Skip if already signed out (prevents loops)
+      if (!webManager.auth().getUser()) {
+        logger.log('[AUTH-BROADCAST] Already signed out, ignoring broadcast');
+        return;
+      }
+      logger.log('[AUTH-BROADCAST] Received sign-out broadcast');
+      try {
+        await webManager.auth().signOut();
+        logger.log('[AUTH-BROADCAST] Signed out via broadcast');
+      } catch (error) {
+        logger.error('[AUTH-BROADCAST] Error signing out:', error.message);
+      }
+    }
+  });
+
+  logger.log('[AUTH-BROADCAST] Broadcast listener set up');
 }
 
 /**
- * Set up storage listener for cross-context auth sync
- * Listens for auth state changes from background.js and syncs Firebase auth
+ * Set up listener to notify background when user signs out from this context
  * @param {Object} context - The manager instance (must have extension, webManager, logger)
  */
-export function setupAuthStorageListener(context) {
+export function setupSignOutListener(context) {
   const { extension, webManager, logger } = context;
 
-  // Check existing auth state on load
-  extension.storage.local.get('bxm:authState', (result) => {
-    const authState = result['bxm:authState'];
-
-    if (authState?.user) {
-      logger.log('[AUTH-SYNC] Found existing auth state on load:', authState.user?.email);
-      // Request fresh ID token from background for any API calls
-      syncAuthFromBackground(context);
-    }
-  });
+  // Track previous user to detect sign-out
+  let previousUid = null;
 
-  // Listen for WM auth state changes and sync to storage
-  // When user signs out via WM, clear storage so background.js knows
   webManager.auth().listen((state) => {
-    if (!state.user) {
-      // User signed out - clear storage so all contexts sync
-      logger.log('[AUTH-SYNC] WM auth signed out, clearing storage...');
-      extension.storage.local.remove('bxm:authState');
-    }
-  });
-
-  // Listen for storage changes from background.js
-  extension.storage.onChanged.addListener((changes) => {
-    // Check for auth state change
-    const authChange = changes['bxm:authState'];
-    if (!authChange) {
-      return;
-    }
-
-    // Log
-    logger.log('[AUTH-SYNC] Auth state changed in storage:', authChange);
-
-    // Get the new auth state
-    const newAuthState = authChange.newValue;
+    const currentUid = state.user?.uid || null;
 
-    // If auth state was cleared (signed out)
-    if (!newAuthState) {
-      logger.log('[AUTH-SYNC] Auth state cleared, signing out...');
-      context._idToken = null;
-      webManager.auth().signOut();
-      return;
+    // Detect sign-out (had user, now don't)
+    if (previousUid && !currentUid) {
+      logger.log('[AUTH-SYNC] Detected sign-out, notifying background...');
+      extension.runtime.sendMessage({ command: 'bxm:signOut' });
     }
 
-    // User signed in - request fresh ID token from background
-    if (newAuthState?.user) {
-      syncAuthFromBackground(context);
-    }
+    previousUid = currentUid;
   });
 
-  // Log
-  logger.log('Auth storage listener set up');
+  logger.log('[AUTH-SYNC] Sign-out listener set up');
 }
 
 /**
@@ -186,22 +201,8 @@ export function setupAuthEventListeners(context) {
     openAuthPage(context);
   });
 
-  // Account button (.auth-account-btn) - opens account page on website
-  document.addEventListener('click', (event) => {
-    const $accountBtn = event.target.closest('.auth-account-btn');
-    if (!$accountBtn) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    openAuthPage(context, { path: '/account' });
-  });
-
   // Note: .auth-signout-btn is handled by web-manager's auth module
-  // BEM's storage listener will detect the sign-out via onAuthStateChanged in background.js
-  // If background hasn't initialized Firebase yet, stale storage is cleared on next auth attempt
+  // setupSignOutListener detects sign-out and notifies background
 
   // Log
   context.logger.log('Auth event listeners set up');

package/dist/options.js

@@ -2,7 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
-import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
+import { syncWithBackground, setupAuthBroadcastListener, setupSignOutListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -35,8 +35,14 @@ class Manager {
       this.logger.log('Auth state changed:', state);
     });
 
-    // Set up storage listener for cross-context auth sync
-    setupAuthStorageListener(this);
+    // Sync auth with background.js (waits for WM auth to settle first)
+    await syncWithBackground(this);
+
+    // Set up broadcast listener for sign-in/sign-out from background
+    setupAuthBroadcastListener(this);
+
+    // Set up sign-out listener to notify background when user signs out
+    setupSignOutListener(this);
 
     // Set up auth event listeners (sign in, account buttons)
     setupAuthEventListeners(this);

package/dist/page.js

@@ -2,7 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
-import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
+import { syncWithBackground, setupAuthBroadcastListener, setupSignOutListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -35,8 +35,14 @@ class Manager {
       this.logger.log('Auth state changed:', state);
     });
 
-    // Set up storage listener for cross-context auth sync
-    setupAuthStorageListener(this);
+    // Sync auth with background.js (waits for WM auth to settle first)
+    await syncWithBackground(this);
+
+    // Set up broadcast listener for sign-in/sign-out from background
+    setupAuthBroadcastListener(this);
+
+    // Set up sign-out listener to notify background when user signs out
+    setupSignOutListener(this);
 
     // Set up auth event listeners (sign in, account buttons)
     setupAuthEventListeners(this);

package/dist/popup.js

@@ -2,7 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
-import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
+import { syncWithBackground, setupAuthBroadcastListener, setupSignOutListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -35,8 +35,14 @@ class Manager {
       this.logger.log('Auth state changed:', state);
     });
 
-    // Set up storage listener for cross-context auth sync
-    setupAuthStorageListener(this);
+    // Sync auth with background.js (waits for WM auth to settle first)
+    await syncWithBackground(this);
+
+    // Set up broadcast listener for sign-in/sign-out from background
+    setupAuthBroadcastListener(this);
+
+    // Set up sign-out listener to notify background when user signs out
+    setupSignOutListener(this);
 
     // Set up auth event listeners (sign in, account buttons)
     setupAuthEventListeners(this);

package/dist/sidepanel.js

@@ -2,7 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
-import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
+import { syncWithBackground, setupAuthBroadcastListener, setupSignOutListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -35,8 +35,14 @@ class Manager {
       this.logger.log('Auth state changed:', state);
     });
 
-    // Set up storage listener for cross-context auth sync
-    setupAuthStorageListener(this);
+    // Sync auth with background.js (waits for WM auth to settle first)
+    await syncWithBackground(this);
+
+    // Set up broadcast listener for sign-in/sign-out from background
+    setupAuthBroadcastListener(this);
+
+    // Set up sign-out listener to notify background when user signs out
+    setupSignOutListener(this);
 
     // Set up auth event listeners (sign in, account buttons)
     setupAuthEventListeners(this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-manager",
-  "version": "1.3.16",
+  "version": "1.3.18",
   "description": "Browser Extension Manager dependency manager",
   "main": "dist/index.js",
   "exports": {