fix: authState getting wiped on page reload on static websites

src/runtime/composables/local/useAuth.ts

@@ -9,7 +9,7 @@ import { formatToken } from '../../utils/local'
 import { useAuthState } from './useAuthState'
 // @ts-expect-error - #auth not defined
 import type { SessionData } from '#auth'
-import { useNuxtApp, useRuntimeConfig, nextTick, navigateTo } from '#imports'
+import { useCookie, useNuxtApp, useRuntimeConfig, nextTick, navigateTo } from '#imports'
 
 type Credentials = { username?: string, email?: string, password?: string } & Record<string, any>
 
@@ -91,12 +91,21 @@ const getSession: GetSessionFunc<SessionData | null | void> = async (getSessionO
   if (getSessionConfig) {
     const headers = new Headers(token ? { [config.token.headerName]: token } as HeadersInit : undefined)
     const { path, method } = getSessionConfig
+    const sessionCookie = useCookie<Object | null>('auth:sessionCookie', {
+      default: () => null,
+      maxAge: config.token.maxAgeInSeconds,
+      sameSite: config.token.sameSiteAttribute
+    })
 
     loading.value = true
     try {
       const result = await _fetch<any>(nuxt, path, { method, headers })
       const { dataResponsePointer: sessionDataResponsePointer } = config.session
       data.value = jsonPointerGet<SessionData>(result, sessionDataResponsePointer)
+      sessionCookie.value = {
+        lastRefreshedAt: lastRefreshedAt.value,
+        data: data.value
+      }
     } catch (err) {
       if (!data.value && err instanceof Error) {
         console.error(`Session: unable to extract session, ${err.message}`)
@@ -105,6 +114,7 @@ const getSession: GetSessionFunc<SessionData | null | void> = async (getSessionO
       // Clear all data: Request failed so we must not be authenticated
       data.value = null
       rawToken.value = null
+      sessionCookie.value = null
     }
     loading.value = false
     lastRefreshedAt.value = new Date()

src/runtime/plugin.ts

@@ -1,11 +1,13 @@
 import { getHeader } from 'h3'
 import authMiddleware from './middleware/auth'
 import { getNitroRouteRules } from './utils/kit'
-import { addRouteMiddleware, defineNuxtPlugin, useRuntimeConfig, useAuth, useAuthState, _refreshHandler } from '#imports'
+import { useTypedBackendConfig } from './helpers'
+import type { SessionCookie } from './types'
+import { addRouteMiddleware, defineNuxtPlugin, useRuntimeConfig, useAuth, useAuthState, useCookie, _refreshHandler } from '#imports'
 
 export default defineNuxtPlugin(async (nuxtApp) => {
   // 1. Initialize authentication state, potentially fetch current session
-  const { data, lastRefreshedAt, loading } = useAuthState()
+  const { data, lastRefreshedAt, rawToken, loading } = useAuthState()
   const { getSession } = useAuth()
 
   // use runtimeConfig
@@ -31,7 +33,27 @@ export default defineNuxtPlugin(async (nuxtApp) => {
 
   // Only fetch session if it was not yet initialized server-side
   if (typeof data.value === 'undefined' && !nitroPrerender && !disableServerSideAuth) {
-    await getSession()
+    // Restore the session data from the cookie if it exists
+    const config = useTypedBackendConfig(useRuntimeConfig(), 'local')
+    const sessionCookie = useCookie<SessionCookie | null>('auth:sessionCookie')
+    const cookieToken = useCookie<string | null>(config.token.cookieName)
+    if (sessionCookie.value && !rawToken.value && cookieToken.value) {
+      try {
+        loading.value = true
+        const sessionData = sessionCookie.value
+        lastRefreshedAt.value = sessionData?.lastRefreshedAt
+        data.value = sessionData?.data
+        rawToken.value = cookieToken.value
+      } catch (error) {
+        console.error('Failed to parse session data from cookie:', error)
+      } finally {
+        loading.value = false
+      }
+    }
+
+    if (!data.value) {
+      await getSession()
+    }
   }
 
   // 2. Setup session maintanence, e.g., auto refreshing or refreshing on foux

src/runtime/types.ts

@@ -573,3 +573,14 @@ export interface ModuleOptionsNormalized extends ModuleOptions {
     fullBaseUrl: string
   }
 }
+export interface SessionCookie {
+  lastRefreshedAt?: SessionLastRefreshedAt
+  data?: SessionDataObject
+}
+
+// Augment types
+declare module 'nuxt/schema' {
+  interface PublicRuntimeConfig {
+    auth: ModuleOptionsNormalized
+  }
+}