added style, fixed login issue

frontend/src/App.jsx

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

frontend/src/contexts/AuthContext.jsx

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

frontend/src/index.css

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