Added beginning of login functionality

web/vue-app/src/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useBackendEvents } from './common/backendEvents'
+import { checkAuth } from '@/stores/auth'
 useBackendEvents('user123')
+checkAuth()
 </script>
 
 <template>

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

@@ -2,7 +2,7 @@
 import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { eventBus } from '@/common/eventBus'
-import { authenticateParent, isParentAuthenticated, logout } from '../stores/auth'
+import { authenticateParent, isParentAuthenticated, logoutParent } from '../stores/auth'
 
 const router = useRouter()
 const show = ref(false)
@@ -42,7 +42,7 @@ const submit = () => {
 }
 
 const handleLogout = () => {
-  logout()
+  logoutParent()
   router.push('/child')
 }
 

web/vue-app/src/components/auth/Login.vue

@@ -127,6 +127,7 @@ import {
   ALREADY_VERIFIED,
 } from '@/common/errorCodes'
 import { parseErrorResponse, isEmailValid } from '@/common/api'
+import { loginUser } from '@/stores/auth' // <-- add this import
 
 const router = useRouter()
 
@@ -185,6 +186,8 @@ async function submitForm() {
       return
     }
 
+    loginUser() // <-- set user as logged in
+
     await router.push({ path: '/' }).catch(() => (window.location.href = '/'))
   } catch (err) {
     loginError.value = 'Network error. Please try again.'

web/vue-app/src/router/index.ts

@@ -1,3 +1,4 @@
+import { watch } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import ChildLayout from '../layout/ChildLayout.vue'
 import ParentLayout from '../layout/ParentLayout.vue'
@@ -16,6 +17,7 @@ import AuthLayout from '@/layout/AuthLayout.vue'
 import Signup from '@/components/auth/Signup.vue'
 import AuthLanding from '@/components/auth/AuthLanding.vue'
 import Login from '@/components/auth/Login.vue'
+import { isUserLoggedIn, isParentAuthenticated, isAuthReady } from '../stores/auth'
 
 const routes = [
   {
@@ -147,7 +149,6 @@ const routes = [
     redirect: '/child',
   },
 ]
-import { isParentAuthenticated } from '../stores/auth'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -155,13 +156,40 @@ const router = createRouter({
 })
 
 // Auth guard
-router.beforeEach((to, from, next) => {
-  if (to.meta.requiresAuth && !isParentAuthenticated.value) {
-    // Redirect to /child if trying to access /parent without auth
-    next('/child')
-  } else {
-    next()
+router.beforeEach(async (to, from, next) => {
+  if (!isAuthReady.value) {
+    await new Promise((resolve) => {
+      const stop = watch(isAuthReady, (ready) => {
+        if (ready) {
+          stop()
+          resolve(true)
+        }
+      })
+    })
   }
+
+  console.log('Auth Guard:', {
+    to: to.fullPath,
+    isUserLoggedIn: isUserLoggedIn.value,
+    isParentAuthenticated: isParentAuthenticated.value,
+  })
+  // Always allow access to /auth routes
+  if (to.path.startsWith('/auth')) {
+    return next()
+  }
+
+  // If not logged in, redirect to /auth
+  if (!isUserLoggedIn.value) {
+    return next('/auth')
+  }
+
+  // If logged in but not parent-authenticated, redirect to /child (unless already there)
+  if (!isParentAuthenticated.value && !to.path.startsWith('/child')) {
+    return next('/child')
+  }
+
+  // Otherwise, allow navigation
+  next()
 })
 
 export default router

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

@@ -1,11 +1,31 @@
 import { ref } from 'vue'
 
 export const isParentAuthenticated = ref(false)
+export const isUserLoggedIn = ref(false)
+export const isAuthReady = ref(false)
 
 export function authenticateParent() {
   isParentAuthenticated.value = true
 }
 
-export function logout() {
+export function logoutParent() {
   isParentAuthenticated.value = false
 }
+
+export function loginUser() {
+  isUserLoggedIn.value = true
+}
+
+export function logoutUser() {
+  isUserLoggedIn.value = false
+}
+
+export async function checkAuth() {
+  try {
+    const res = await fetch('/api/me', { method: 'GET' })
+    isUserLoggedIn.value = res.ok
+  } catch {
+    isUserLoggedIn.value = false
+  }
+  isAuthReady.value = true
+}