fix: broken UI breaking e2e tests

Author: scottgerring

e2e/fixtures/post-login-validation.ts

@@ -63,9 +63,9 @@ export async function validateLoggedInState(page: Page): Promise<ValidationResul
   expect(userName.length).toBeGreaterThan(0);
   console.log(`[validateLoggedInState] User name: ${userName}`);
 
-  // 3. Verify "Sticker Collector" text is visible (sidebar user info)
-  const stickerCollectorText = page.getByText('Sticker Collector');
-  await expect(stickerCollectorText).toBeVisible({ timeout: 10000 });
+  // 3. Verify user role text is visible in sidebar (e.g. "user", "admin")
+  const userRoleText = page.locator('.text-sm.text-gray-600').filter({ hasNotText: '...' });
+  await expect(userRoleText).toBeVisible({ timeout: 10000 });
 
   // 4. Verify Sign Out is visible (indicates authenticated state)
   const signOut = page.getByText('Sign Out');

web-frontend/src/App.jsx

@@ -7,7 +7,7 @@ import { datadogRum } from '@datadog/browser-rum';
 import "./App.css";
 
 function App() {
-  const { isAuthenticated, isLoading, user } = useAuth();
+  const { isAuthenticated, user } = useAuth();
   const navigate = useNavigate();
 
   if (isAuthenticated) {
@@ -18,18 +18,10 @@ function App() {
   }
 
   useEffect(() => {
-    if (!isLoading && isAuthenticated) {
+    if (isAuthenticated) {
       navigate("/dashboard");
     }
-  }, [isAuthenticated, isLoading, navigate]);
-
-  if (isLoading) {
-    return (
-      <div style={{ textAlign: "center", padding: "50px" }}>
-        <h2>Loading...</h2>
-      </div>
-    );
-  }
+  }, [isAuthenticated, navigate]);
 
   return (
     <div className="isolate flex flex-auto flex-col bg-[--root-bg]">

web-frontend/src/components/StickerDetail.jsx

@@ -4,32 +4,20 @@ import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlin
 import HeaderBar from "./HeaderBar";
 import Sidebar from "./Sidebar";
 import { API_BASE_URL } from "../config";
-import AuthService from "../services/AuthService";
 import { useAuth } from "../context/AuthContext";
 import { authFetch } from "../utils/authFetch";
 import { getLastActiveEvent } from "../services/eventStorage";
 
 function StickerDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
-  const { user, isLoading: authLoading } = useAuth();
+  const { user } = useAuth();
   const [sticker, setSticker] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isOwned, setIsOwned] = useState(false);
 
   useEffect(() => {
-    const userId = user?.sub || user?.email;
-
-    // Validate userId before fetching
-    if (!userId) {
-      if (!authLoading) {
-        setError('Unable to identify user. Please log in again.');
-        setLoading(false);
-      }
-      return;
-    }
-
     const controller = new AbortController();
 
     const fetchSticker = async () => {
@@ -47,20 +35,14 @@ function StickerDetail() {
         }
 
         const data = await response.json();
-        setSticker(data);
-
-        // Check if user owns this sticker
-        const awardsResponse = await authFetch(
-          `${API_BASE_URL}/api/awards/v1/assignments/${encodeURIComponent(userId)}`
-        );
-        if (awardsResponse.ok) {
-          const awardsData = await awardsResponse.json();
-          const assignments = awardsData.stickers || [];
-          setIsOwned(assignments.some((a) => a.stickerId === id));
+        if (!controller.signal.aborted) {
+          setSticker(data);
         }
       } catch (err) {
         console.error("Error fetching sticker:", err);
-        setError(err.message);
+        if (!controller.signal.aborted) {
+          setError(err.message);
+        }
       } finally {
         if (!controller.signal.aborted) {
           setLoading(false);
@@ -69,8 +51,35 @@ function StickerDetail() {
     };
 
     fetchSticker();
+    return () => controller.abort();
   }, [id]);
 
+  // Check ownership when user context is available
+  useEffect(() => {
+    const userId = user?.sub || user?.email;
+    if (!userId || !sticker) return;
+
+    const controller = new AbortController();
+
+    const checkOwnership = async () => {
+      try {
+        const awardsResponse = await authFetch(
+          `${API_BASE_URL}/api/awards/v1/assignments/${encodeURIComponent(userId)}`
+        );
+        if (awardsResponse.ok && !controller.signal.aborted) {
+          const awardsData = await awardsResponse.json();
+          const assignments = awardsData.stickers || [];
+          setIsOwned(assignments.some((a) => a.stickerId === id));
+        }
+      } catch (err) {
+        console.error("Error checking ownership:", err);
+      }
+    };
+
+    checkOwnership();
+    return () => controller.abort();
+  }, [id, user, sticker]);
+
   const formatDate = (dateString) => {
     if (!dateString) return "Unknown";
     return new Date(dateString).toLocaleDateString("en-US", {

web-frontend/src/context/AuthContext.jsx

@@ -119,6 +119,14 @@ export const AuthProvider = ({ children }) => {
     clearLoginError
   }
 
+  if (isLoading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '50px' }}>
+        <h2>Loading...</h2>
+      </div>
+    )
+  }
+
   return (
     <AuthContext.Provider value={value}>
       {children}