perf(module): do not call api on every visit for session validation

Author: farnabaz

src/module/src/runtime/server/routes/auth/github.get.ts

@@ -215,6 +215,10 @@ export default eventHandler(async (event: H3Event) => {
 
   const redirect = decodeURIComponent(getCookie(event, 'studio-redirect') || '')
   deleteCookie(event, 'studio-redirect')
+
+  // Set a cookie to indicate that the session is active
+  setCookie(event, 'studio-session-check', 'true', { httpOnly: false })
+
   // make sure the redirect is a valid relative path (avoid also // which is not a valid URL)
   if (redirect && redirect.startsWith('/') && !redirect.startsWith('//')) {
     return sendRedirect(event, redirect)

src/module/src/runtime/server/routes/auth/session.delete.ts

@@ -1,4 +1,4 @@
-import { eventHandler, useSession } from 'h3'
+import { eventHandler, useSession, deleteCookie } from 'h3'
 import { useRuntimeConfig } from '#imports'
 
 export default eventHandler(async (event) => {
@@ -9,5 +9,8 @@ export default eventHandler(async (event) => {
 
   await session.clear()
 
+  // Delete the cookie to indicate that the session is inactive
+  deleteCookie(event, 'studio-session-check')
+
   return { loggedOut: true }
 })

src/module/src/runtime/server/routes/auth/session.get.ts

@@ -1,4 +1,4 @@
-import { eventHandler, useSession } from 'h3'
+import { eventHandler, useSession, deleteCookie } from 'h3'
 import { useRuntimeConfig } from '#imports'
 
 export default eventHandler(async (event) => {
@@ -7,6 +7,11 @@ export default eventHandler(async (event) => {
     password: useRuntimeConfig(event).studio?.auth?.sessionSecret,
   })
 
+  if (!session.data) {
+    // Delete the cookie to indicate that the session is inactive
+    deleteCookie(event, 'studio-session-check')
+  }
+
   return {
     ...session.data,
     id: session.id!,

src/module/src/runtime/utils/activation.ts

@@ -1,9 +1,10 @@
-import { getAppManifest, useState, useRuntimeConfig } from '#imports'
+import { getAppManifest, useState, useRuntimeConfig, useCookie } from '#imports'
 import type { StudioUser } from 'nuxt-studio/app'
 
 export async function defineStudioActivationPlugin(onStudioActivation: (user: StudioUser) => Promise<void>) {
   const user = useState<StudioUser | null>('studio-session', () => null)
   const config = useRuntimeConfig().public.studio
+  const cookie = useCookie('studio-session-check')
 
   if (config.dev) {
     return await onStudioActivation({
@@ -16,9 +17,9 @@ export async function defineStudioActivationPlugin(onStudioActivation: (user: St
     })
   }
 
-  await $fetch<{ user: StudioUser }>('/__nuxt_studio/auth/session').then((session) => {
-    user.value = session?.user ?? null
-  })
+  user.value = String(cookie.value) === 'true'
+    ? await $fetch<{ user: StudioUser }>('/__nuxt_studio/auth/session').then(session => session?.user ?? null)
+    : null
 
   let mounted = false
   if (user.value?.email) {
@@ -36,7 +37,9 @@ export async function defineStudioActivationPlugin(onStudioActivation: (user: St
     // Listen to CMD + . to toggle the studio or redirect to the login page
     document.addEventListener('keydown', (event) => {
       if (event.metaKey && event.key === '.') {
-        window.location.href = config.route + '?redirect=' + encodeURIComponent(window.location.pathname)
+        setTimeout(() => {
+          window.location.href = config.route + '?redirect=' + encodeURIComponent(window.location.pathname)
+        })
       }
     })
   }