fix: authState getting wiped on page reload on static websites

src/runtime/composables/local/useAuth.ts

@@ -10,7 +10,7 @@ import { type UseAuthStateReturn, useAuthState } from './useAuthState'
 import { callWithNuxt } from '#app/nuxt'
 // @ts-expect-error - #auth not defined
 import type { SessionData } from '#auth'
-import { navigateTo, nextTick, useNuxtApp, useRoute, useRuntimeConfig } from '#imports'
+import { navigateTo, nextTick, useCookie, useNuxtApp, useRoute, useRuntimeConfig } from '#imports'
 
 type Credentials = { username?: string, email?: string, password?: string } & Record<string, any>
 
@@ -132,11 +132,22 @@ async function getSession(getSessionOptions?: GetSessionOptions): Promise<Sessio
 
   const headers = new Headers(token ? { [config.token.headerName]: token } as HeadersInit : undefined)
 
+  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) {
@@ -146,6 +157,7 @@ async function getSession(getSessionOptions?: GetSessionOptions): Promise<Sessio
     // 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,13 +1,15 @@
 import { getHeader } from 'h3'
 import authMiddleware from './middleware/sidebase-auth'
 import { getNitroRouteRules } from './utils/kit'
+import type { ProviderLocal, SessionCookie } from './types'
+import type { CookieRef } from '#app'
 import { FetchConfigurationError } from './utils/fetch'
 import { resolveApiBaseURL } from './utils/url'
-import { _refreshHandler, addRouteMiddleware, defineNuxtPlugin, useAuth, useAuthState, useRuntimeConfig } from '#imports'
+import { _refreshHandler, addRouteMiddleware, defineNuxtPlugin, useAuth, useAuthState, useCookie, useRuntimeConfig } 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
@@ -48,14 +50,52 @@
     && !(isErrorUrl && requireAuthOnErrorPage)
 
   if (shouldFetchSession) {
-    try {
-      await getSession()
+    if (runtimeConfig.provider.type === 'local') {
+      handleLocalAuth(runtimeConfig.provider)
     }
-    catch (e) {
-      // Do not throw the configuration error as it can lead to infinite recursion
-      if (!(e instanceof FetchConfigurationError)) {
-        throw e
+
+    if (!data.value) {
+      try {
+        await getSession()
       }
+      catch (e) {
+        // Do not throw the configuration error as it can lead to infinite recursion
+        if (!(e instanceof FetchConfigurationError)) {
+          throw e
+        }
+      }
+    }
+  }
+
+  function handleLocalAuth(config: ProviderLocal): void {
+    const sessionCookie = useCookie<SessionCookie | null>(
+      'auth:sessionCookie'
+    )
+    const cookieToken = useCookie<string | null>(
+      config.token?.cookieName ?? 'auth.token'
+    )
+
+    if (sessionCookie?.value && !rawToken?.value && cookieToken?.value) {
+      restoreSessionFromCookie(sessionCookie, cookieToken)
+    }
+  }
+
+  function restoreSessionFromCookie(
+    sessionCookie: CookieRef<SessionCookie | null>,
+    cookieToken: CookieRef<string | null>
+  ): void {
+    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
     }
   }
 

src/runtime/types.ts

@@ -629,3 +629,14 @@ export interface ModuleOptionsNormalized extends ModuleOptions {
   globalAppMiddleware: NonNullable<ModuleOptions['globalAppMiddleware']>
   originEnvKey: string
 }
+export interface SessionCookie {
+  lastRefreshedAt?: SessionLastRefreshedAt
+  data?: SessionDataObject
+}
+
+// Augment types
+declare module 'nuxt/schema' {
+  interface PublicRuntimeConfig {
+    auth: ModuleOptionsNormalized
+  }
+}