add comment

frontend/src/App.jsx

@@ -11,9 +11,7 @@ import AlertHistory from "./pages/alertHistory/AlertHistory";
 import Account from "./pages/user_account/Account";
 
 export default function App() {
-  const { currentUser, isSubscribed, loading } = useAuth();
+  const { currentUser, isSubscribed } = useAuth();
-
-  if (loading) return null;
 
   if (!currentUser) {
     return (

frontend/src/contexts/AuthContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import {
   onAuthStateChanged,
   signInWithEmailAndPassword,
@@ -17,90 +17,98 @@ const DEFAULT_TIER_LIMITS = {
   allowed_channels: ["email"],
 };
 
-export function AuthProvider({ children }) {
+// External auth store - lives outside React
-  const [currentUser, setCurrentUser] = useState(null);
+const createAuthStore = () => {
-  const [userTier, setUserTier] = useState("free");
+  let state = {
-  const [tierLimits, setTierLimits] = useState(DEFAULT_TIER_LIMITS);
+    currentUser: null,
-  const [isSubscribed, setIsSubscribed] = useState(false);
+    userTier: "free",
-  const [loading, setLoading] = useState(true);
+    tierLimits: DEFAULT_TIER_LIMITS,
+    isSubscribed: false,
+    loading: true,
+  };
+  const listeners = new Set();
 
-  const fetchAccount = useCallback(async () => {
+  const notify = () => listeners.forEach((fn) => fn());
+
+  const setState = (partial) => {
+    state = { ...state, ...partial };
+    notify();
+  };
+
+  const fetchAccount = async () => {
     try {
       const data = await getAccount();
-      setUserTier(data.subscription_tier || "free");
+      setState({
-      setTierLimits(data.tier_limits || DEFAULT_TIER_LIMITS);
+        userTier: data.subscription_tier || "free",
-      setIsSubscribed(
+        tierLimits: data.tier_limits || DEFAULT_TIER_LIMITS,
+        isSubscribed:
           data.subscription_status === "active" ||
           data.subscription_status === "trialing",
-      );
+      });
     } catch {
-      setUserTier("free");
+      setState({ isSubscribed: false });
-      setTierLimits(DEFAULT_TIER_LIMITS);
-      setIsSubscribed(false);
     }
-  }, []);
+  };
 
-  useEffect(() => {
+  // Set up Firebase listener once, outside of React
-    const unsubscribe = onAuthStateChanged(auth, async (user) => {
+  onAuthStateChanged(auth, async (user) => {
+    setState({ loading: true, currentUser: user });
     if (user) {
-        setLoading(true);
-        setCurrentUser(user);
       await fetchAccount();
     } else {
-        setCurrentUser(null);
+      setState({ isSubscribed: false, userTier: "free", tierLimits: DEFAULT_TIER_LIMITS });
-        setUserTier("free");
-        setTierLimits(DEFAULT_TIER_LIMITS);
-        setIsSubscribed(false);
     }
-      setLoading(false);
+    setState({ loading: false });
   });
-    return unsubscribe;
-  }, [fetchAccount]);
 
-  async function signup(email, password) {
+  return {
-    const cred = await createUserWithEmailAndPassword(auth, email, password);
+    subscribe: (listener) => {
-    return cred.user;
+      listeners.add(listener);
-  }
+      return () => listeners.delete(listener);
+    },
+    getSnapshot: () => state,
+    refreshAccount: fetchAccount,
+  };
+};
 
-  async function login(email, password) {
+const authStore = createAuthStore();
-    const cred = await signInWithEmailAndPassword(auth, email, password);
-    return cred.user;
-  }
 
-  async function logout() {
+export function AuthProvider({ children }) {
-    await signOut(auth);
+  const state = useSyncExternalStore(authStore.subscribe, authStore.getSnapshot);
-  }
 
-  async function sendEmailVerification() {
+  const signup = (email, password) => createUserWithEmailAndPassword(auth, email, password);
+  const login = (email, password) => signInWithEmailAndPassword(auth, email, password);
+  const logout = () => signOut(auth);
+
+  const sendEmailVerification = () => {
     if (auth.currentUser) {
-      await firebaseSendEmailVerification(auth.currentUser);
+      return firebaseSendEmailVerification(auth.currentUser);
-    }
     }
+  };
 
-  async function reloadUser() {
+  const reloadUser = async () => {
     if (auth.currentUser) {
       await auth.currentUser.reload();
-      setCurrentUser({ ...auth.currentUser });
       return auth.currentUser;
     }
     return null;
-  }
+  };
 
   const value = {
-    currentUser,
+    ...state,
-    userTier,
-    tierLimits,
-    isSubscribed,
-    loading,
     signup,
     login,
     logout,
     sendEmailVerification,
     reloadUser,
-    refreshAccount: fetchAccount,
+    refreshAccount: authStore.refreshAccount,
   };
 
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={value}>
+      {!state.loading && children}
+    </AuthContext.Provider>
+  );
 }
 
 export function useAuth() {

frontend/src/index.css

@@ -82,10 +82,8 @@ button {
 
 .page {
   max-width: 800px;
-  height: 100%;
   margin: 0 auto;
   padding: 2rem;
-  background-color: red;
 }
 
 .page--wide {