web-manager 4.1.2 → 4.1.3

package/README.md

@@ -354,6 +354,35 @@ unsubscribe();
 Add these classes to elements for automatic auth functionality:
 - `.auth-signout-btn` - Sign out button (shows confirmation dialog)
 
+**⚠️ Auth State Timing**:
+
+On fresh page loads, Firebase Auth needs time to restore the user session from IndexedDB/localStorage. Methods like `auth.isAuthenticated()`, `auth.getUser()`, and `auth.getIdToken()` may return `null`/`false` if called before auth state is determined.
+
+**Problem:**
+```javascript
+// ❌ May fail on page load - auth state not yet determined
+await Manager.dom().ready();
+const token = await auth.getIdToken(); // Could throw if currentUser is null
+```
+
+**Solution:** Use `auth.listen({ once: true })` to wait for auth state:
+```javascript
+// ✅ Wait for auth state to be determined first
+auth.listen({ once: true }, async (result) => {
+  if (result.user) {
+    const token = await auth.getIdToken(); // Safe - user is authenticated
+  }
+});
+```
+
+**When this matters:**
+- Pages making authenticated API calls immediately on load
+- OAuth callback pages
+- Deep links requiring authentication
+
+**When NOT needed:**
+- User-triggered actions (button clicks) - auth state is always determined by then
+
 ### Data Binding System
 
 Reactive DOM updates with `data-wm-bind` attributes:

package/dist/modules/utilities.js

@@ -81,8 +81,8 @@ class Utilities {
     const timeout = options.timeout !== undefined ? options.timeout : 5000;
 
     const $notification = document.createElement('div');
-    $notification.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-5`;
-    $notification.style.zIndex = '9999';
+    $notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
+    $notification.style.cssText = 'z-index: 9999; top: 1rem; left: 50%; transform: translateX(-50%);';
     $notification.innerHTML = `
       ${text}
       <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@@ -137,22 +137,27 @@ class Utilities {
     if (/edg/i.test(ua)) {
       return 'edge';
     }
+
     // Opera before Chrome (Opera includes "Chrome" in UA)
     if (/opera|opr/i.test(ua)) {
       return 'opera';
     }
+
     // Brave before Chrome (Brave includes "Chrome" in UA)
     if (navigator.brave || /brave/i.test(ua)) {
       return 'brave';
     }
+
     // Chrome (including Chromium-based browsers)
     if (/chrome|chromium|crios/i.test(ua)) {
       return 'chrome';
     }
+
     // Firefox
     if (/firefox|fxios/i.test(ua)) {
       return 'firefox';
     }
+
     // Safari last (most browsers include "Safari" in UA)
     if (/safari/i.test(ua)) {
       return 'safari';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-manager",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Easily access important variables such as the query string, current domain, and current page in a single object.",
   "main": "dist/index.js",
   "module": "src/index.js",