rough session timeout

Seasoned.Frontend/app/app.vue

@@ -43,6 +43,7 @@
 
     <v-main>
       <NuxtPage />
+      <SessionTimeout />
     </v-main>
   </v-app>
 </template>
@@ -50,6 +51,7 @@
 <script setup>
 import { onMounted } from 'vue'
 import '@/assets/css/app-theme.css'
+import SessionTimeout from './components/SessionTimeout.vue'
 const authCookie = useCookie('.AspNetCore.Identity.Application')
 const isLoggedIn = useState('isLoggedIn', () => false)
 

Seasoned.Frontend/app/components/SessionTimeout.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-dialog v-model="showTimeout" persistent max-width="450">
+    <v-card class="recipe-card pa-6 text-center" theme="light">
+      <div class="mb-4">
+        <v-icon color="#8c4a32" size="64">mdi-clock-outline</v-icon>
+      </div>
+      
+      <h2 class="auth-title mb-2">Session Expired</h2>
+      
+      <v-card-text class="text-body-1" style="font-family: 'Libre Baskerville', serif;">
+        Your kitchen session has timed out after 30 minutes of inactivity. 
+        Please sign back in to continue managing your recipes.
+      </v-card-text>
+
+      <v-divider class="my-4 separator"></v-divider>
+
+      <v-card-actions>
+        <v-btn 
+          block 
+          class="auth-btn" 
+          size="large"
+          @click="redirectToLogin"
+        >
+          Return to Sign In
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import '@/assets/css/app-theme.css'
+const showTimeout = useState('showSessionTimeout')
+
+const redirectToLogin = () => {
+  showTimeout.value = false
+  navigateTo('/login')
+}
+</script>

Seasoned.Frontend/app/pages/login.vue

@@ -127,6 +127,8 @@ const errorMessage = ref('')
 const authLoading = ref(false)
 const config = useRuntimeConfig()
 
+const isLoggedIn = useState('isLoggedIn', () => false)
+
 const toggleMode = () => {
   isLogin.value = !isLogin.value
   errorMessage.value = ''
@@ -144,7 +146,7 @@ const handleAuth = async () => {
   const endpoint = isLogin.value ? 'api/auth/login' : 'api/auth/register'
   
   const url = isLogin.value 
-    ? `${config.public.apiBase}${endpoint}?useCookies=true` 
+    ? `${config.public.apiBase}${endpoint}?useCookies=true&useSessionCookies=false` 
     : `${config.public.apiBase}${endpoint}`
 
   try {
@@ -153,28 +155,31 @@ const handleAuth = async () => {
       body: {
         email: email.value,
         password: password.value
-      }
+      },
+      credentials: 'include' 
     })
 
     if (isLogin.value) {
-      const isLoggedIn = useState('isLoggedIn')
       isLoggedIn.value = true
       navigateTo('/')
     } else {
       isLogin.value = true
       authLoading.value = false
       errorMessage.value = "Account created! Please sign in."
+      password.value = ''
+      confirmPassword.value = ''
     }
   } catch (err) {
     authLoading.value = false
     if (err.status === 401) {
       errorMessage.value = "Invalid email or password. Please try again."
+    } else if (err.status === 400) {
+      errorMessage.value = "Registration failed. Check your password length."
     } else if (err.status === 404) {
       errorMessage.value = "Account not found. Would you like to register?"
     } else {
-      errorMessage.value = "Something went wrong. Please check your connection."
+      errorMessage.value = "Something went wrong."
     }
-    
     console.error('Auth error:', err)
   }
 }

Seasoned.Frontend/app/plugins/auth-watch.ts

@@ -0,0 +1,15 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const showTimeout = useState('showSessionTimeout', () => false);
+  const isLoggedIn = useState('isLoggedIn');
+
+  nuxtApp.hooks.hook('app:suspense:resolve', () => {
+    globalThis.$fetch = $fetch.create({
+      onResponseError({ response }) {
+        if (response.status === 401 && isLoggedIn.value) {
+          isLoggedIn.value = false;
+          showTimeout.value = true;
+        }
+      }
+    });
+  });
+});