added seperate users for backend events

web/vue-app/src/App.vue

@@ -1,14 +1,15 @@
-<script setup lang="ts">
-import { useBackendEvents } from './common/backendEvents'
-import { checkAuth } from '@/stores/auth'
-useBackendEvents('user123')
-checkAuth()
-</script>
-
 <template>
+  <BackendEventsListener />
   <router-view />
 </template>
 
+<script setup lang="ts">
+import BackendEventsListener from '@/components/BackendEventsListener.vue'
+import { checkAuth } from '@/stores/auth'
+
+checkAuth()
+</script>
+
 <style>
 body {
   margin: 0;

web/vue-app/src/common/backendEvents.ts

@@ -1,24 +1,30 @@
-import { onMounted, onBeforeUnmount } from 'vue'
+import { onMounted, onBeforeUnmount, watch } from 'vue'
+import type { Ref } from 'vue'
 import { eventBus } from './eventBus'
 
-export function useBackendEvents(userId: string) {
+export function useBackendEvents(userId: Ref<string>) {
   let eventSource: EventSource | null = null
 
-  onMounted(() => {
-    console.log('Connecting to backend events for user:', userId)
-    eventSource = new EventSource(`/events?user_id=${userId}`)
+  const connect = () => {
+    if (eventSource) eventSource.close()
+    if (userId.value) {
+      console.log('Connecting to backend events for user:', userId.value)
+      eventSource = new EventSource(`/events?user_id=${userId.value}`)
 
-    eventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data)
+      eventSource.onmessage = (event) => {
+        const data = JSON.parse(event.data)
 
-      // Emit globally for any component that cares
-      eventBus.emit(data.type, data)
-      eventBus.emit('sse', data) // optional: catch-all channel
+        // Emit globally for any component that cares
+        eventBus.emit(data.type, data)
+        eventBus.emit('sse', data) // optional: catch-all channel
+      }
     }
-  })
+  }
 
+  onMounted(connect)
+  watch(userId, connect)
   onBeforeUnmount(() => {
-    console.log('Disconnecting from backend events for user:', userId)
+    console.log('Disconnecting from backend events for user:', userId.value)
     eventSource?.close()
   })
 }

web/vue-app/src/components/BackendEventsListener.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useBackendEvents } from '@/common/backendEvents'
+import { currentUserId } from '@/stores/auth'
+
+const userId = ref(currentUserId.value)
+
+watch(currentUserId, (id) => {
+  userId.value = id
+})
+
+// Always call useBackendEvents in setup, passing the reactive userId
+useBackendEvents(userId)
+</script>
+
+<template>
+  <div></div>
+</template>

web/vue-app/src/stores/auth.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 export const isParentAuthenticated = ref(false)
 export const isUserLoggedIn = ref(false)
 export const isAuthReady = ref(false)
+export const currentUserId = ref('')
 
 export function authenticateParent() {
   isParentAuthenticated.value = true
@@ -23,9 +24,17 @@ export function logoutUser() {
 export async function checkAuth() {
   try {
     const res = await fetch('/api/me', { method: 'GET' })
-    isUserLoggedIn.value = res.ok
+    if (res.ok) {
+      const data = await res.json()
+      currentUserId.value = data.id
+      isUserLoggedIn.value = true
+    } else {
+      isUserLoggedIn.value = false
+      currentUserId.value = ''
+    }
   } catch {
     isUserLoggedIn.value = false
+    currentUserId.value = ''
   }
   isAuthReady.value = true
 }