From 822582b1fde499c44d20df0ac4e5648b76d0d018 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 13 Feb 2026 11:54:22 -0700
Subject: [PATCH] feat: require EncryptID auth for wallet visualizations

Add requireAuth() gate to all visualization pages. Unauthenticated users
are redirected to the home page with a login prompt and auto-redirect
back after signing in.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html                           | 19 +++++++++++++++++++
 js/encryptid.js                      | 15 +++++++++++++++
 wallet-multichain-visualization.html |  2 ++
 wallet-timeline-visualization.html   |  2 ++
 wallet-visualization.html            |  2 ++
 5 files changed, 40 insertions(+)

diff --git a/index.html b/index.html
index a8f68d8..f08f5b9 100644
--- a/index.html
+++ b/index.html
@@ -757,6 +757,25 @@
         // ─── EncryptID Auth ────────────────────────────────────────
         EncryptID.renderAuthButton('encryptid-auth');
 
+        // If redirected from a visualization page that requires auth, show a message
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.get('login') === 'required') {
+            const returnUrl = urlParams.get('return');
+            const banner = document.createElement('div');
+            banner.style.cssText = 'background:#1e293b;border:1px solid var(--primary);border-radius:12px;padding:16px;margin-bottom:16px;text-align:center;color:#94a3b8;font-size:0.9rem;';
+            banner.innerHTML = 'Please sign in with EncryptID to access wallet visualizations.';
+            const authContainer = document.getElementById('encryptid-auth');
+            if (authContainer) authContainer.parentNode.insertBefore(banner, authContainer);
+
+            // After successful auth, redirect back
+            const checkAuth = setInterval(() => {
+                if (EncryptID.isAuthenticated() && returnUrl) {
+                    clearInterval(checkAuth);
+                    window.location.href = decodeURIComponent(returnUrl);
+                }
+            }, 500);
+        }
+
         // ─── Wallet Input Logic ────────────────────────────────────
         const DEMO_ADDRESS = '0x29567BdBcC92aCF37AC6B56B69180857bB69f7D1';
 
diff --git a/js/encryptid.js b/js/encryptid.js
index 2c5e0e5..a8abd8d 100644
--- a/js/encryptid.js
+++ b/js/encryptid.js
@@ -233,6 +233,20 @@ const EncryptID = (() => {
         render();
     }
 
+    // ─── Auth Gate ──────────────────────────────────────────────
+
+    /**
+     * Require authentication before accessing a page.
+     * If not authenticated, redirects to index.html with a return URL.
+     * Call at the top of visualization pages.
+     */
+    function requireAuth() {
+        if (isAuthenticated()) return true;
+        const returnUrl = encodeURIComponent(window.location.href);
+        window.location.replace(`/index.html?login=required&return=${returnUrl}`);
+        return false;
+    }
+
     // ─── Public API ──────────────────────────────────────────────
     return {
         authenticate,
@@ -241,5 +255,6 @@ const EncryptID = (() => {
         isAuthenticated,
         getUser,
         renderAuthButton,
+        requireAuth,
     };
 })();
diff --git a/wallet-multichain-visualization.html b/wallet-multichain-visualization.html
index 4b14734..f04e266 100644
--- a/wallet-multichain-visualization.html
+++ b/wallet-multichain-visualization.html
@@ -6,6 +6,8 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
     <title>Multi-Chain Flow | rWallet.online</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="js/encryptid.js"></script>
+    <script>if (!EncryptID.requireAuth()) throw new Error('redirect');</script>
     <script src="js/safe-api.js?v=4"></script>
     <script src="js/data-transform.js?v=2"></script>
     <script src="js/router.js?v=5"></script>
diff --git a/wallet-timeline-visualization.html b/wallet-timeline-visualization.html
index 05e4671..dd5f65d 100644
--- a/wallet-timeline-visualization.html
+++ b/wallet-timeline-visualization.html
@@ -6,6 +6,8 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
     <title>Balance River | rWallet.online</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="js/encryptid.js"></script>
+    <script>if (!EncryptID.requireAuth()) throw new Error('redirect');</script>
     <script src="js/safe-api.js?v=4"></script>
     <script src="js/data-transform.js?v=2"></script>
     <script src="js/router.js?v=5"></script>
diff --git a/wallet-visualization.html b/wallet-visualization.html
index 43f4d5a..b1e58f7 100644
--- a/wallet-visualization.html
+++ b/wallet-visualization.html
@@ -7,6 +7,8 @@
     <title>Single-Chain Flow | rWallet.online</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>
+    <script src="js/encryptid.js"></script>
+    <script>if (!EncryptID.requireAuth()) throw new Error('redirect');</script>
     <script src="js/safe-api.js?v=4"></script>
     <script src="js/data-transform.js?v=2"></script>
     <script src="js/router.js?v=5"></script>