fix: hard reload

Author: rrd108

docs/user-guide/authentication.md

@@ -389,6 +389,7 @@ The module automatically handles:
 - Token expiration validation
 - Automatic token cleanup
 - Token refresh on activity
+- **Hard reload persistence**: Users remain logged in after hard refresh (Ctrl+F5)
 
 ## Security Features
 

playground/pages/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useAuthentication } from '#imports'
 
-const { user, initializeUser } = useAuthentication()
+const { user } = useAuthentication()
 
-// Initialize user from localStorage on page load
-initializeUser()
+// User is automatically initialized by the client plugin
+// No need to manually call initializeUser() anymore
 </script>
 
 <template>

src/runtime/components/NUsersLoginForm.vue

@@ -56,7 +56,7 @@ const handleSubmit = async () => {
       }
     })
 
-    emit('success', response.user, formData.value.rememberMe)
+    emit('success', response.user, formData.value.rememberMe ?? false)
 
     // Redirect if specified
     if (props.redirectTo) {

src/runtime/composables/useAuthentication.ts

@@ -2,6 +2,9 @@ import { useState, useRuntimeConfig } from '#app'
 import { computed, readonly } from 'vue'
 import type { User, UserWithoutPassword } from 'nuxt-users/utils'
 
+// Global flag to track if initialization has been attempted
+let initializationPromise: Promise<void> | null = null
+
 export const useAuthentication = () => {
   const user = useState<UserWithoutPassword | null>('user', () => null)
   const { public: { nuxtUsers } } = useRuntimeConfig()
@@ -13,17 +16,18 @@ export const useAuthentication = () => {
     // Remove password from user data before storing
     const { password: _, ...userWithoutPassword } = userData
     user.value = userWithoutPassword
-    
+
     // Store user data based on rememberMe preference
     if (import.meta.client) {
       // Clear any existing user data from both storages
       localStorage.removeItem('user')
       sessionStorage.removeItem('user')
-      
+
       if (rememberMe) {
         // Store in localStorage for persistent login across browser sessions
         localStorage.setItem('user', JSON.stringify(userWithoutPassword))
-      } else {
+      }
+      else {
         // Store in sessionStorage for session-only login
         sessionStorage.setItem('user', JSON.stringify(userWithoutPassword))
       }
@@ -55,18 +59,20 @@ export const useAuthentication = () => {
     try {
       const response = await $fetch<{ user: UserWithoutPassword }>(`${apiBasePath}/me`, { method: 'GET' })
       user.value = response.user
-      
+
       // Update the appropriate storage with fresh user data
       if (import.meta.client) {
         // Determine which storage was being used and update it
         const wasInLocalStorage = localStorage.getItem('user') !== null
         const wasInSessionStorage = sessionStorage.getItem('user') !== null
-        
+
         if (wasInLocalStorage) {
           localStorage.setItem('user', JSON.stringify(response.user))
-        } else if (wasInSessionStorage) {
+        }
+        else if (wasInSessionStorage) {
           sessionStorage.setItem('user', JSON.stringify(response.user))
-        } else {
+        }
+        else {
           // Default to sessionStorage for new sessions without rememberMe
           sessionStorage.setItem('user', JSON.stringify(response.user))
         }
@@ -95,7 +101,7 @@ export const useAuthentication = () => {
     const storedUserLocal = localStorage.getItem('user')
     const storedUserSession = sessionStorage.getItem('user')
     const storedUser = storedUserLocal || storedUserSession
-    
+
     if (storedUser) {
       try {
         // First set the user from storage for immediate UI response
@@ -113,6 +119,14 @@ export const useAuthentication = () => {
     }
   }
 
+  // Auto-initialize user on first access (client-side only)
+  if (import.meta.client && !initializationPromise) {
+    initializationPromise = initializeUser().catch(() => {
+      // Silently handle initialization errors
+      // Don't prevent the composable from working
+    })
+  }
+
   return {
     user: readonly(user),
     isAuthenticated,

src/runtime/server/api/nuxt-users/session/index.post.ts

@@ -59,7 +59,8 @@ export default defineEventHandler(async (event) => {
     // For "remember me" sessions, use a longer expiration (30 days default)
     const longTermDays = options.auth.rememberMeExpiration || 30 // days
     expiresAt.setDate(expiresAt.getDate() + longTermDays)
-  } else {
+  }
+  else {
     // For regular sessions, use the configured token expiration
     expiresAt.setMinutes(expiresAt.getMinutes() + options.auth.tokenExpiration)
   }
@@ -72,22 +73,29 @@ export default defineEventHandler(async (event) => {
   `
 
   // Set the cookie with appropriate expiration based on rememberMe
-  const cookieOptions = {
+  const cookieOptions: {
+    httpOnly: boolean
+    secure: boolean
+    sameSite: 'lax'
+    path: string
+    maxAge?: number
+  } = {
     httpOnly: true,
     secure: process.env.NODE_ENV === 'production', // Use secure cookies in production
     sameSite: 'lax' as const, // Adjust as needed
     path: '/',
   }
-  
+
   if (rememberMe) {
     // For "remember me", set a long-term cookie
     const longTermDays = options.auth.rememberMeExpiration || 30
     cookieOptions.maxAge = 60 * 60 * 24 * longTermDays // Convert days to seconds
-  } else {
+  }
+  else {
     // For regular login, don't set maxAge to create a session cookie
     // Session cookies expire when the browser is closed
   }
-  
+
   setCookie(event, 'auth_token', token, cookieOptions)
 
   // Return user without password for security

test/test-setup.ts

@@ -63,6 +63,7 @@ export const getTestOptions = (dbType: DatabaseType, dbConfig: DatabaseConfig) =
   auth: {
     whitelist: [],
     tokenExpiration: 1440,
+    rememberMeExpiration: 30,
     permissions: { admin: ['*'] }
   },
   passwordValidation: {

test/unit/api.users-list.test.ts

@@ -58,6 +58,7 @@ const testOptions: ModuleOptions = {
   auth: {
     whitelist: [],
     tokenExpiration: 1440,
+    rememberMeExpiration: 30,
     permissions: {}
   },
   passwordValidation: {

test/unit/usePublicPaths.test.ts

@@ -42,6 +42,7 @@ describe('usePublicPaths', () => {
       auth: {
         whitelist: ['/about', '/contact'],
         tokenExpiration: 1440,
+        rememberMeExpiration: 30,
         permissions: {
           admin: ['*'],
           user: ['/profile', '/dashboard'],