changed the navbar to work.

frontend/src/stores/auth.js

@@ -44,26 +44,35 @@ export const useAuthStore = defineStore("auth", () => {
   const fetchUser = async () => {
     if (isLoading.value) return;
 
+    console.log("🔵 fetchUser called - fetching user from /api/auth/me");
     isLoading.value = true;
     try {
       const response = await axios.get("/api/auth/me", {
         withCredentials: true,
       });
 
+      console.log("✅ fetchUser response:", response.data);
+
       if (response.data.success && response.data.user) {
+        console.log("✅ Setting user in auth store:", response.data.user);
         setUser(response.data.user);
         return response.data.user;
       } else {
+        console.log("❌ No user in response, clearing auth");
         clearUser();
         return null;
       }
     } catch (error) {
-      console.error("Failed to fetch user:", error);
+      console.error("❌ Failed to fetch user:", error);
       clearUser();
       return null;
     } finally {
       isLoading.value = false;
       isInitialized.value = true;
+      console.log(
+        "🔵 fetchUser complete - isAuthenticated:",
+        isAuthenticated.value
+      );
     }
   };
 
@@ -229,6 +238,10 @@ export const useAuthStore = defineStore("auth", () => {
 
   // Initialize on store creation
   const initialize = async () => {
+    console.log(
+      "🔵 Auth store initialize called - isInitialized:",
+      isInitialized.value
+    );
     if (!isInitialized.value) {
       await fetchUser();
     }

frontend/src/stores/websocket.js

@@ -208,10 +208,16 @@ export const useWebSocketStore = defineStore("websocket", () => {
 
   const handleMessage = (data) => {
     const { type, data: payload, timestamp } = data;
+    const authStore = useAuthStore();
 
     switch (type) {
       case "connected":
-        console.log("Server confirmed connection:", payload);
+        console.log("🟢 WebSocket received 'connected' message:", payload);
+        // Fetch updated user data from the auth endpoint
+        console.log(
+          "🔵 Calling authStore.fetchUser() from WebSocket connected handler"
+        );
+        authStore.fetchUser();
         break;
 
       case "pong":
@@ -226,7 +232,6 @@ export const useWebSocketStore = defineStore("websocket", () => {
 
       case "balance_update":
         // Update user balance
-        const authStore = useAuthStore();
         if (payload?.balance !== undefined) {
           authStore.updateBalance(payload.balance);
         }