fix(ui): tokenInMemory not set after refreshing cookie (#15928)

Fixes #15926.

### What?

In the `AuthContext`, which can be consumed via the `useAuth` hook
imported from `@payloadcms/ui`, there is a `token` property which gets
set in the internal function `setFullUser`. This function assumes that
the `userResponse` argument passed to it always has the token on the
property `.token`, when in fact it exists on the property
`.refreshedToken` when the function is invoked after the auth cookie has
been refreshed. Because of this `useAuth().token` is often nullish when
it shouldn't be.

### Why?

I want to be able to rely on the `useAuth` hook. Now I can't (or at
least not on the `token` property), because there's a bug related to it.

### How?

I changed the type for the `userResponse` parameter (`UserWithToken`) to
convey that sometimes it's `.token` and sometimes it's
`.refreshedToken`. Then I set the `token` property (the `tokenInMemory`
state) to either `userResponse.token` or `userResponse.refreshedToken`
depending on which property exists on the object (`userResponse`).

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->

---------

Co-authored-by: German Jablonski <GermanJablo@users.noreply.github.com>

Author: DanielGiljam

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

@@ -18,7 +18,8 @@ import { useRouteTransition } from '../RouteTransition/index.js'
 export type UserWithToken<T = ClientUser> = {
   /** seconds until expiration */
   exp: number
-  token: string
+  refreshedToken?: string
+  token?: string
   user: T
 }
 
@@ -155,7 +156,7 @@ export function AuthProvider({
 
       if (userResponse?.user) {
         setUserInMemory(userResponse.user)
-        setTokenInMemory(userResponse.token)
+        setTokenInMemory(userResponse.token ?? userResponse.refreshedToken)
         setTokenExpirationMs(userResponse.exp * 1000)
 
         const expiresInMs = Math.max(

test/auth/AuthDebug.tsx

@@ -8,7 +8,8 @@ import React, { useEffect, useState } from 'react'
 
 export const AuthDebug: React.FC<UIField> = () => {
   const [state, setState] = useState<null | undefined | User>()
-  const { user } = useAuth()
+  const [refreshCount, setRefreshCount] = useState(0)
+  const { refreshCookieAsync, token, user } = useAuth()
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -30,6 +31,18 @@ export const AuthDebug: React.FC<UIField> = () => {
     <div id="auth-debug">
       <div id="use-auth-result">{user?.custom as string}</div>
       <div id="users-api-result">{state?.custom as string}</div>
+      <div id="use-auth-token">{token as string}</div>
+      <div id="refresh-count">{refreshCount}</div>
+      <button
+        id="refresh-auth-cookie"
+        onClick={async () => {
+          await refreshCookieAsync()
+          setRefreshCount((c) => c + 1)
+        }}
+        type="button"
+      >
+        Refresh auth cookie
+      </button>
     </div>
   )
 }

test/auth/e2e.spec.ts

@@ -311,6 +311,21 @@ describe('Auth', () => {
         await expect(page.locator('#use-auth-result')).toHaveText('Goodbye, world!')
       })
 
+      test('should keep token populated in `useAuth` after refreshing the cookie', async () => {
+        await page.goto(url.account)
+        const token = page.locator('#use-auth-token')
+        const refreshCount = page.locator('#refresh-count')
+
+        await expect(token).toHaveText(/.+/)
+        await expect(refreshCount).toHaveText('0')
+
+        await page.locator('#refresh-auth-cookie').click()
+
+        await expect(refreshCount).toHaveText('1')
+
+        await expect(token).toHaveText(/.+/)
+      })
+
       // Need to test unlocking documents on logout here as this test suite does not auto login users
       test('should unlock document on logout after editing without saving', async () => {
         await page.goto(url.list)