Single Source of Truth Architecture - Complete authentication state management with storage-based getAuthState() as sole authoritative source

examples/button.html

@@ -35,7 +35,7 @@
     }
 
     #login-button:hover {
-      background: #0052a3;
+      opacity: 0.8;
     }
   </style>
 </head>
@@ -49,6 +49,9 @@
   <script src="../lite/nostr-lite.js"></script>
 
   <script>
+    let isAuthenticated = false;
+    let currentUser = null;
+
     document.addEventListener('DOMContentLoaded', async () => {
       await window.NOSTR_LOGIN_LITE.init({
 
@@ -65,10 +68,66 @@
         }
       });
 
-      document.getElementById('login-button').addEventListener('click', () => {
-        window.NOSTR_LOGIN_LITE.launch('login');
-      });
+      // Listen for authentication events
+      window.addEventListener('nlMethodSelected', handleAuthEvent);
+      window.addEventListener('nlLogout', handleLogoutEvent);
+
+      // Check for existing authentication state
+      checkAuthState();
+
+      // Initialize button
+      updateButtonState();
     });
+
+    function handleAuthEvent(event) {
+      const { pubkey, method } = event.detail;
+      console.log(`Authenticated with ${method}, pubkey: ${pubkey}`);
+      
+      isAuthenticated = true;
+      currentUser = event.detail;
+      updateButtonState();
+    }
+
+    function handleLogoutEvent() {
+      console.log('Logout event received');
+      
+      isAuthenticated = false;
+      currentUser = null;
+      updateButtonState();
+    }
+
+    function checkAuthState() {
+      // Check if user is already authenticated (from persistent storage)
+      try {
+        // Try to get public key - this will work if already authenticated
+        window.nostr.getPublicKey().then(pubkey => {
+          console.log('Found existing authentication, pubkey:', pubkey);
+          isAuthenticated = true;
+          currentUser = { pubkey, method: 'persistent' };
+          updateButtonState();
+        }).catch(error => {
+          console.log('No existing authentication found:', error.message);
+          // User is not authenticated, button stays in login state
+        });
+      } catch (error) {
+        console.log('No existing authentication found');
+        // User is not authenticated, button stays in login state
+      }
+    }
+
+    function updateButtonState() {
+      const button = document.getElementById('login-button');
+      
+      if (isAuthenticated) {
+        button.textContent = 'Logout';
+        button.onclick = () => window.NOSTR_LOGIN_LITE.logout();
+        button.style.background = '#dc3545'; // Red for logout
+      } else {
+        button.textContent = 'Login';
+        button.onclick = () => window.NOSTR_LOGIN_LITE.launch('login');
+        button.style.background = '#0066cc'; // Blue for login
+      }
+    }
   </script>
 </body>