Redundant checkAuthentication call/event stack and isolated `isAuthenticated`

[A-lexisL]

frontend vue3 codes are under frontend/ directory.

Auth State Management Investigation

Current Architecture

Key Findings

1. Authentication State Management Issues

useAuth.js (src/composables/useAuth.js:35-214)

• will return a copy of isAuthenticated(multiple instances of isAuthenticated exist, not global singelon)
• checkAuthentication() makes API call to /api/user/status/ on every invocation
• Defines onMounted(() => checkAuthentication()) (duplicate)
• Custom event system: auth-state-changed event with listener setup

2. Auth State Change Mechanism

Event-Based System:

• notifyAuthStateChanged() dispatches auth-state-changed window event
• onAuthStateChanged() listens event and will call checkAuthentication() to update isAuthenticated

3. Identified Issues & Inefficiencies

1. No shared state: Each useAuth() call creates separate isAuthenticated
2. Complicate event system: use event to notify isAuthenticated change, but views still need to call checkAuthentication to get the updated value

5. Solutions

1. implment a global isAuthenticated in useAuth.js(views will not have copies of isAuthenticated)
2. auth related function in useAuth.js update isAuthenticated(only functions in useAuth.js could modify isAuthenticated. for all views/components, isAuthenticated is read-only )
3. remove custom event and its event stack(notifyAuthStateChanged() and onAuthStateChanged())
4. for normal views/components, remove watcher business that acts when isAuthenticated changes from false to true(keep from true to false) but keep checkAuthentication on Mount(in case session expire)