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
-const createAuthStore = () => {
-  let state = {
-    currentUser: null,
-    userTier: "free",
-    tierLimits: DEFAULT_TIER_LIMITS,
-    isSubscribed: false,
-    loading: true,
-  };
-  const listeners = new Set();
+export function AuthProvider({ children }) {
+  const [currentUser, setCurrentUser] = useState(null);
+  const [userTier, setUserTier] = useState("free");
+  const [tierLimits, setTierLimits] = useState(DEFAULT_TIER_LIMITS);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [loading, setLoading] = useState(true);
 
-  const notify = () => listeners.forEach((fn) => fn());
-
-  const setState = (partial) => {
-    state = { ...state, ...partial };
-    notify();
-  };
-
-  const fetchAccount = async () => {
+  const fetchAccount = useCallback(async () => {
     try {
       const data = await getAccount();
-      setState({
-        userTier: data.subscription_tier || "free",
-        tierLimits: data.tier_limits || DEFAULT_TIER_LIMITS,
-        isSubscribed:
+      setUserTier(data.subscription_tier || "free");
+      setTierLimits(data.tier_limits || DEFAULT_TIER_LIMITS);
+      setIsSubscribed(
         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
-  onAuthStateChanged(auth, async (user) => {
-    setState({ loading: true, currentUser: user });
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (user) => {
       if (user) {
+        setLoading(true);
+        setCurrentUser(user);
         await fetchAccount();
       } else {
-      setState({ isSubscribed: false, userTier: "free", tierLimits: DEFAULT_TIER_LIMITS });
+        setCurrentUser(null);
+        setUserTier("free");
+        setTierLimits(DEFAULT_TIER_LIMITS);
+        setIsSubscribed(false);
       }
-    setState({ loading: false });
+      setLoading(false);
     });
+    return unsubscribe;
+  }, [fetchAccount]);
 
-  return {
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-    getSnapshot: () => state,
-    refreshAccount: fetchAccount,
-  };
-};
-
-const authStore = createAuthStore();
-
-export function AuthProvider({ children }) {
-  const state = useSyncExternalStore(authStore.subscribe, authStore.getSnapshot);
-
-  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) {
-      return firebaseSendEmailVerification(auth.currentUser);
+  async function signup(email, password) {
+    const cred = await createUserWithEmailAndPassword(auth, email, password);
+    return cred.user;
   }
-  };
 
-  const reloadUser = async () => {
+  async function login(email, password) {
+    const cred = await signInWithEmailAndPassword(auth, email, password);
+    return cred.user;
+  }
+
+  async function logout() {
+    await signOut(auth);
+  }
+
+  async function sendEmailVerification() {
+    if (auth.currentUser) {
+      await firebaseSendEmailVerification(auth.currentUser);
+    }
+  }
+
+  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 (
-    <AuthContext.Provider value={value}>
-      {!state.loading && children}
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={value}>{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 {