✨ well this works at least

app/app.vue

@@ -32,7 +32,6 @@ useSeoMeta({
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-    <modal-login />
     <layout-confirm />
     <u-notifications>
       <template #title="{ title }">

app/components/header/HeaderAuth.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { user } = await useUserSession()
+const { user, clear } = await useUserSession()
 const items = [
   [
     {
@@ -27,7 +27,11 @@ const items = [
     {
       label: 'Logout',
       icon: 'i-mdi-logout',
-      click: () => useApi().logout(),
+      click: async () => {
+        clear()
+        useApi().fetch('/api/logout')
+        await navigateTo('/')
+      },
       shortcuts: ['L'],
     },
   ],

app/components/layout/LayoutLogin.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const emit = defineEmits(['login'])
+import type { User } from '~/types/models'
+
+const emit = defineEmits(['loggedin'])
 const loading = ref(false)
 interface Provider {
   name: string
@@ -57,9 +59,9 @@ function login(name: string): void {
 
 async function handleMessage(evt: { data: { user: User, token: string } }) {
   useApi().success('logged in')
-  emit('login')
+  emit('loggedin')
   await refreshNuxtData()
-  await navigateTo('/home')
+  setTimeout(async () => await navigateTo('/home'), 500)
 }
 
 function messageHandler(add: boolean): void {

app/components/modal/ModalLogin.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+const emit = defineEmits(['loggedin'])
 const { authModal } = useAuth()
+const loggedin = () => {
+  emit('loggedin')
+  authModal.value = false
+}
 </script>
 
 <template>
   <u-modal v-model="authModal" :ui="{ width: 'w-full sm:max-w-sm' }" @close="authModal = false">
     <div class="py-8 max-w-xs w-full mx-auto">
-      <layout-login @login="authModal = false" />
+      <layout-login @loggedin="loggedin" />
     </div>
   </u-modal>
 </template>

app/components/token/TokenCard.vue

@@ -14,7 +14,6 @@ const remove = () => confirm('Delete Token', 'Are you sure you want to delete th
   })
   emit('reload')
   success(meta.detail)
-  await useApi().checkUser()
 })
 </script>
 

app/composables/api.ts

@@ -22,7 +22,6 @@ export const useApi = () => {
         alert(`Field: ${issue.path} Error: ${issue.message}`), 100 * (index + 1)),
       )
   }
-
   const fetch = <T>(
     url: string | (() => string),
     options?: Omit<UseFetchOptions<T>, 'default'> & { default: () => T | Ref<T> },
@@ -50,15 +49,9 @@ export const useApi = () => {
     return { fetch }
   }
 
-  const logout = async () => {
-    await fetch('/api/logout')
-    await navigateTo('/')
-  }
-
   return {
     fetch,
     setForm,
-    logout,
     success,
   }
 }

app/pages/index.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 const { authModal } = useAuth()
 definePageMeta({ layout: 'bare' })
-const { user } = useApi()
+const { user } = useUserSession()
+const detected = () => {
+  if (import.meta.client) document.location.href = '/home'
+}
 </script>
 
 <template>
@@ -15,6 +18,7 @@ const { user } = useApi()
         <u-skeleton class="w-28 h-10" />
       </template>
     </client-only>
+    <modal-login @loggedin="detected" />
   </div>
 </template>
 

nuxt.config.ts

@@ -10,6 +10,11 @@ export default defineNuxtConfig({
     '@nuxt/image',
     'nuxt-auth-utils',
   ],
+  runtimeConfig: {
+    session: {
+      maxAge: 60 * 60 * 24 * 365, // 1 year
+    },
+  },
   eslint: {
     config: {
       standalone: false,