From ecb3ee12fc15bb487bb92ceccf23fe2a4b8bae30 Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 27 May 2026 12:36:58 -0500
Subject: [PATCH] fix(auth): wait for verify before scanner redirect; fix admin
 hooks (#36)

Scanner was sending logged-in users to /login while useAuth was still
loading. Admin card-editor/card-import crashed on login because hooks
ran after a mounted early return (Rules of Hooks violation).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 pages/admin/card-editor.js | 16 ----------------
 pages/admin/card-import.js | 15 ---------------
 pages/scanner.js           | 19 ++++++++++++++-----
 3 files changed, 14 insertions(+), 36 deletions(-)

diff --git a/pages/admin/card-editor.js b/pages/admin/card-editor.js
index d358ce8..fc93164 100644
--- a/pages/admin/card-editor.js
+++ b/pages/admin/card-editor.js
@@ -8,22 +8,6 @@ import AdminProtected from '../../components/AdminProtected';
 const CardEditor = () => {
   const router = useRouter();
   const { id } = router.query;
-  
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <Layout user={null}>
-        <div className="flex items-center justify-center min-h-screen">
-          <div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
-        </div>
-      </Layout>
-    );
-  }
 
   const [card, setCard] = useState(null);
   const [loading, setLoading] = useState(true);
diff --git a/pages/admin/card-import.js b/pages/admin/card-import.js
index a2a4f20..843dfe1 100644
--- a/pages/admin/card-import.js
+++ b/pages/admin/card-import.js
@@ -5,21 +5,6 @@ import Layout from '../../components/Layout';
 import AdminProtected from '../../components/AdminProtected';
 
 const CardImport = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <Layout user={null}>
-        <div className="flex items-center justify-center min-h-screen">
-          <div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
-        </div>
-      </Layout>
-    );
-  }
   const router = useRouter();
   const [importType, setImportType] = useState('mtg');
   const [setCode, setSetCode] = useState('');
diff --git a/pages/scanner.js b/pages/scanner.js
index 345a816..f5a1039 100644
--- a/pages/scanner.js
+++ b/pages/scanner.js
@@ -8,7 +8,7 @@ import ManaSymbolSettings from '../components/ManaSymbolSettings';
 import { useAuth } from '../lib/use-auth';
 
 export default function Scanner() {
-  const { user } = useAuth();
+  const { user, loading: authLoading } = useAuth();
   const router = useRouter();
   const [scannedCards, setScannedCards] = useState([]);
   const [collections, setCollections] = useState([]);
@@ -26,13 +26,12 @@ export default function Scanner() {
   // Mana symbol settings
   const [manaSymbolSettings, setManaSymbolSettings] = useState({ useSVG: false });
 
-  // Redirect to login if not authenticated
+  // Redirect to login if not authenticated (wait for verify to finish)
   useEffect(() => {
-    if (!user) {
+    if (!authLoading && !user) {
       router.push('/login');
-      return;
     }
-  }, [user, router]);
+  }, [authLoading, user, router]);
 
   // Load collections and decks
   useEffect(() => {
@@ -325,6 +324,16 @@ export default function Scanner() {
     setSelectedCards(new Set());
   };
 
+  if (authLoading) {
+    return (
+      <Layout user={null}>
+        <div className="flex items-center justify-center min-h-[50vh]">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--text-accent)' }} />
+        </div>
+      </Layout>
+    );
+  }
+
   if (!user) {
     return <div>Redirecting to login...</div>;
   }