Added beginning of login functionality

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