fix: autoRefresh not working due to stale closure and missing in client config (#14612)

### What?

Fixes `autoRefresh` functionality that was causing "Stay logged in"
modal to appear instead of automatically refreshing the token.

### Why?

Two issues were preventing `autoRefresh` from working:

1. `autoRefresh` was not exposed in the client config, causing it to be
`undefined` in the browser
2. The Auth provider's reminder timeout callback was capturing a stale
`autoRefresh` value due to closure timing during initial component
render

### How?

- Added `autoRefresh` to client config creation to expose it to the
client
- Used `useEffectEvent` in Auth provider to ensure the reminder timeout
handler always captures the latest `autoRefresh` value

### Fixes

#14613

---------

Co-authored-by: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com>

Author: ZvonimirBusic

packages/payload/src/config/client.ts

@@ -4,7 +4,6 @@ import type { DeepPartial } from 'ts-essentials'
 import type { ImportMap } from '../bin/generateImportMap/index.js'
 import type { ClientBlock } from '../fields/config/types.js'
 import type { BlockSlug, TypedUser } from '../index.js'
-import type { PayloadRequest } from '../types/index.js'
 import type {
   RootLivePreviewConfig,
   SanitizedConfig,
@@ -164,6 +163,7 @@ export const createClientConfig = ({
       case 'admin':
         clientConfig.admin = {
           autoLogin: config.admin.autoLogin,
+          autoRefresh: config.admin.autoRefresh,
           avatar: config.admin.avatar,
           custom: config.admin.custom,
           dateFormat: config.admin.dateFormat,

packages/ui/src/providers/Auth/index.tsx

@@ -139,6 +139,15 @@ export function AuthProvider({
     clearTimeout(refreshTokenTimeoutRef.current)
   }, [])
 
+  // Handler for reminder timeout - uses useEffectEvent to capture latest autoRefresh value
+  const handleReminderTimeout = useEffectEvent(() => {
+    if (autoRefresh) {
+      refreshCookieEvent()
+    } else {
+      openModal(stayLoggedInModalSlug)
+    }
+  })
+
   const setNewUser = useCallback(
     (userResponse: null | UserWithToken) => {
       clearTimeout(reminderTimeoutRef.current)
@@ -159,13 +168,7 @@ export function AuthProvider({
           setForceLogoutBufferMs(nextForceLogoutBufferMs)
 
           reminderTimeoutRef.current = setTimeout(
-            () => {
-              if (autoRefresh) {
-                refreshCookieEvent()
-              } else {
-                openModal(stayLoggedInModalSlug)
-              }
-            },
+            handleReminderTimeout,
             Math.max(expiresInMs - nextForceLogoutBufferMs, 0),
           )
 
@@ -178,7 +181,7 @@ export function AuthProvider({
         revokeTokenAndExpire()
       }
     },
-    [autoRefresh, redirectToInactivityRoute, revokeTokenAndExpire, openModal],
+    [redirectToInactivityRoute, revokeTokenAndExpire],
   )
 
   const refreshCookie = useCallback(

test/auth/config.ts

@@ -21,6 +21,7 @@ export default buildConfigWithDefaults({
       password: devUser.password,
       prefillOnly: true,
     },
+    autoRefresh: true,
     components: {
       beforeDashboard: ['./BeforeDashboard.js#BeforeDashboard'],
       beforeLogin: ['./BeforeLogin.js#BeforeLogin'],

test/auth/e2e.spec.ts

@@ -497,4 +497,37 @@ describe('Auth', () => {
       })
     })
   })
+
+  describe('autoRefresh', () => {
+    beforeAll(async () => {
+      await reInitializeDB({
+        serverURL,
+        snapshotKey: 'auth',
+        deleteOnly: false,
+      })
+
+      await ensureCompilationIsDone({ page, serverURL, noAutoLogin: true })
+
+      url = new AdminUrlUtil(serverURL, slug)
+
+      // Install clock before login so token expiration and clock are in sync
+      await page.clock.install({ time: Date.now() })
+
+      await login({ page, serverURL })
+    })
+
+    test('should automatically refresh token without showing modal', async () => {
+      await expect(page.locator('.nav')).toBeVisible()
+
+      // Fast forward time to just past the reminder timeout
+      await page.clock.fastForward(7141000) // 1 hour 59 minutes + 1 second
+
+      // Resume clock so timers can execute
+      await page.clock.resume()
+
+      await expect(page.locator('.confirmation-modal')).toBeHidden()
+
+      await expect(page.locator('.nav')).toBeVisible()
+    })
+  })
 })

test/auth/payload-types.ts

@@ -79,6 +79,7 @@ export interface Config {
     'public-users': PublicUser;
     relationsCollection: RelationsCollection;
     'api-keys-with-field-read-access': ApiKeysWithFieldReadAccess;
+    'payload-kv': PayloadKv;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
     'payload-migrations': PayloadMigration;
@@ -92,13 +93,15 @@ export interface Config {
     'public-users': PublicUsersSelect<false> | PublicUsersSelect<true>;
     relationsCollection: RelationsCollectionSelect<false> | RelationsCollectionSelect<true>;
     'api-keys-with-field-read-access': ApiKeysWithFieldReadAccessSelect<false> | ApiKeysWithFieldReadAccessSelect<true>;
+    'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
     'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
   };
   db: {
     defaultIDType: string;
   };
+  fallbackLocale: null;
   globals: {};
   globalsSelect: {};
   locale: null;
@@ -392,6 +395,23 @@ export interface ApiKeysWithFieldReadAccess {
   apiKey?: string | null;
   apiKeyIndex?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv".
+ */
+export interface PayloadKv {
+  id: string;
+  key: string;
+  data:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-locked-documents".
@@ -653,6 +673,14 @@ export interface ApiKeysWithFieldReadAccessSelect<T extends boolean = true> {
   apiKey?: T;
   apiKeyIndex?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv_select".
+ */
+export interface PayloadKvSelect<T extends boolean = true> {
+  key?: T;
+  data?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-locked-documents_select".