diff --git a/examples/auth/payload/src/app/(app)/_components/Header/Nav/index.tsx b/examples/auth/payload/src/app/(app)/_components/Header/Nav/index.tsx
index 6ecc9537ca8..a97fe520bde 100644
--- a/examples/auth/payload/src/app/(app)/_components/Header/Nav/index.tsx
+++ b/examples/auth/payload/src/app/(app)/_components/Header/Nav/index.tsx
@@ -1,14 +1,15 @@
 'use client'
 
+import type { User } from '@/payload-types'
+
 import Link from 'next/link'
 import React from 'react'
 
-import { useAuth } from '../../../_providers/Auth'
 import classes from './index.module.scss'
 
-export const HeaderNav: React.FC = () => {
-  const { user } = useAuth()
-
+export const HeaderNav: React.FC<{
+  user?: User | null
+}> = ({ user }) => {
   return (
     <nav
       className={[
diff --git a/examples/auth/payload/src/app/(app)/_components/Header/index.tsx b/examples/auth/payload/src/app/(app)/_components/Header/index.tsx
index d7e4b748eb0..fee370a0051 100644
--- a/examples/auth/payload/src/app/(app)/_components/Header/index.tsx
+++ b/examples/auth/payload/src/app/(app)/_components/Header/index.tsx
@@ -1,12 +1,17 @@
+import { headers as getHeaders } from 'next/headers'
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
 
+import { getUser } from '../../_utilities/getUser'
 import { Gutter } from '../Gutter'
 import { HeaderNav } from './Nav'
 import classes from './index.module.scss'
 
-export function Header() {
+export async function Header() {
+  const headers = getHeaders()
+  const user = await getUser(headers)
+
   return (
     <header className={classes.header}>
       <Gutter className={classes.wrap}>
@@ -24,7 +29,7 @@ export function Header() {
             />
           </picture>
         </Link>
-        <HeaderNav />
+        <HeaderNav user={user} />
       </Gutter>
     </header>
   )
diff --git a/examples/auth/payload/src/app/(app)/_components/HydrateClientUser/index.tsx b/examples/auth/payload/src/app/(app)/_components/HydrateClientUser/index.tsx
deleted file mode 100644
index 6dca3e5632d..00000000000
--- a/examples/auth/payload/src/app/(app)/_components/HydrateClientUser/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import type { Permissions } from 'payload/auth'
-import type { PayloadRequestWithData } from 'payload/types'
-
-import { useEffect } from 'react'
-
-import { useAuth } from '../../_providers/Auth'
-
-export const HydrateClientUser: React.FC<{
-  permissions: Permissions
-  user: PayloadRequestWithData['user']
-}> = ({ permissions, user }) => {
-  const { setPermissions, setUser } = useAuth()
-
-  useEffect(() => {
-    setUser(user)
-    setPermissions(permissions)
-  }, [user, permissions, setUser, setPermissions])
-
-  return null
-}
diff --git a/examples/auth/payload/src/app/(app)/_providers/Auth/gql.ts b/examples/auth/payload/src/app/(app)/_providers/Auth/gql.ts
deleted file mode 100644
index b40f98728c7..00000000000
--- a/examples/auth/payload/src/app/(app)/_providers/Auth/gql.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const USER = `
-  id
-  email
-  firstName
-  lastName
-`
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const gql = async (query: string): Promise<any> => {
-  try {
-    const res = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/graphql`, {
-      body: JSON.stringify({
-        query,
-      }),
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    })
-
-    const { data, errors } = await res.json()
-
-    if (errors) {
-      throw new Error(errors[0].message)
-    }
-
-    if (res.ok && data) {
-      return data
-    }
-  } catch (e: unknown) {
-    throw new Error(e as string)
-  }
-}
diff --git a/examples/auth/payload/src/app/(app)/_providers/Auth/index.tsx b/examples/auth/payload/src/app/(app)/_providers/Auth/index.tsx
deleted file mode 100644
index a46a40676a8..00000000000
--- a/examples/auth/payload/src/app/(app)/_providers/Auth/index.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-'use client'
-
-import type { Permissions } from 'payload/auth'
-
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
-
-import type { User } from '../../../../payload-types'
-import type { AuthContext, Create, ForgotPassword, Login, Logout, ResetPassword } from './types'
-
-import { USER, gql } from './gql'
-import { rest } from './rest'
-
-const Context = createContext({} as AuthContext)
-
-export const AuthProvider: React.FC<{ api?: 'gql' | 'rest'; children: React.ReactNode }> = ({
-  api = 'rest',
-  children,
-}) => {
-  const [user, setUser] = useState<User | null>()
-  const [permissions, setPermissions] = useState<Permissions | null>(null)
-
-  const create = useCallback<Create>(
-    async (args) => {
-      if (api === 'rest') {
-        const user = await rest(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users`, args)
-        setUser(user)
-        return user
-      }
-
-      if (api === 'gql') {
-        const { createUser: user } = await gql(`mutation {
-        createUser(data: { email: "${args.email}", password: "${args.password}", firstName: "${args.firstName}", lastName: "${args.lastName}" }) {
-          ${USER}
-        }
-      }`)
-
-        setUser(user)
-        return user
-      }
-    },
-    [api],
-  )
-
-  const login = useCallback<Login>(
-    async (args) => {
-      if (api === 'rest') {
-        const user = await rest(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/login`, args)
-        setUser(user)
-        return user
-      }
-
-      if (api === 'gql') {
-        const { loginUser } = await gql(`mutation {
-        loginUser(email: "${args.email}", password: "${args.password}") {
-          user {
-            ${USER}
-          }
-          exp
-        }
-      }`)
-
-        setUser(loginUser?.user)
-        return loginUser?.user
-      }
-    },
-    [api],
-  )
-
-  const logout = useCallback<Logout>(async () => {
-    if (api === 'rest') {
-      await rest(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/logout`)
-      setUser(null)
-      return
-    }
-
-    if (api === 'gql') {
-      await gql(`mutation {
-        logoutUser
-      }`)
-
-      setUser(null)
-    }
-  }, [api])
-
-  // On mount, get user and set
-  useEffect(() => {
-    const fetchMe = async () => {
-      if (api === 'rest') {
-        const user = await rest(
-          `${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/me`,
-          {},
-          {
-            method: 'GET',
-          },
-        )
-        setUser(user)
-      }
-
-      if (api === 'gql') {
-        const { meUser } = await gql(`query {
-          meUser {
-            user {
-              ${USER}
-            }
-            exp
-          }
-        }`)
-
-        setUser(meUser.user)
-      }
-    }
-
-    void fetchMe()
-  }, [api])
-
-  const forgotPassword = useCallback<ForgotPassword>(
-    async (args) => {
-      if (api === 'rest') {
-        const user = await rest(
-          `${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/forgot-password`,
-          args,
-        )
-        setUser(user)
-        return user
-      }
-
-      if (api === 'gql') {
-        const { forgotPasswordUser } = await gql(`mutation {
-        forgotPasswordUser(email: "${args.email}")
-      }`)
-
-        return forgotPasswordUser
-      }
-    },
-    [api],
-  )
-
-  const resetPassword = useCallback<ResetPassword>(
-    async (args) => {
-      if (api === 'rest') {
-        const user = await rest(
-          `${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/reset-password`,
-          args,
-        )
-        setUser(user)
-        return user
-      }
-
-      if (api === 'gql') {
-        const { resetPasswordUser } = await gql(`mutation {
-        resetPasswordUser(password: "${args.password}", token: "${args.token}") {
-          user {
-            ${USER}
-          }
-        }
-      }`)
-
-        setUser(resetPasswordUser.user)
-        return resetPasswordUser.user
-      }
-    },
-    [api],
-  )
-
-  return (
-    <Context.Provider
-      value={{
-        create,
-        forgotPassword,
-        login,
-        logout,
-        permissions,
-        resetPassword,
-        setPermissions,
-        setUser,
-        user,
-      }}
-    >
-      {children}
-    </Context.Provider>
-  )
-}
-
-type UseAuth<T = User> = () => AuthContext // eslint-disable-line no-unused-vars
-
-export const useAuth: UseAuth = () => useContext(Context)
diff --git a/examples/auth/payload/src/app/(app)/_providers/Auth/rest.ts b/examples/auth/payload/src/app/(app)/_providers/Auth/rest.ts
deleted file mode 100644
index b7248354351..00000000000
--- a/examples/auth/payload/src/app/(app)/_providers/Auth/rest.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { User } from '../../../../payload-types'
-
-export const rest = async (
-  url: string,
-  args?: any, // eslint-disable-line @typescript-eslint/no-explicit-any
-  options?: RequestInit,
-): Promise<User | null | undefined> => {
-  const method = options?.method || 'POST'
-
-  try {
-    const res = await fetch(url, {
-      method,
-      ...(method === 'POST' ? { body: JSON.stringify(args) } : {}),
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        ...options?.headers,
-      },
-      ...options,
-    })
-
-    const { errors, user } = await res.json()
-
-    if (errors) {
-      throw new Error(errors[0].message)
-    }
-
-    if (res.ok) {
-      return user
-    }
-  } catch (e: unknown) {
-    throw new Error(e as string)
-  }
-}
diff --git a/examples/auth/payload/src/app/(app)/_providers/Auth/types.ts b/examples/auth/payload/src/app/(app)/_providers/Auth/types.ts
deleted file mode 100644
index bb8474cc081..00000000000
--- a/examples/auth/payload/src/app/(app)/_providers/Auth/types.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { Permissions } from 'payload/auth'
-
-import type { User } from '../../../../payload-types'
-
-// eslint-disable-next-line no-unused-vars
-export type ResetPassword = (args: {
-  password: string
-  passwordConfirm: string
-  token: string
-}) => Promise<User>
-
-export type ForgotPassword = (args: { email: string }) => Promise<User> // eslint-disable-line no-unused-vars
-
-export type Create = (args: {
-  email: string
-  firstName: string
-  lastName: string
-  password: string
-}) => Promise<User> // eslint-disable-line no-unused-vars
-
-export type Login = (args: { email: string; password: string }) => Promise<User> // eslint-disable-line no-unused-vars
-
-export type Logout = () => Promise<void>
-
-export interface AuthContext {
-  create: Create
-  forgotPassword: ForgotPassword
-  login: Login
-  logout: Logout
-  permissions?: Permissions | null
-  resetPassword: ResetPassword
-  setPermissions: (permissions: Permissions | null) => void
-  setUser: (user: User | null) => void // eslint-disable-line no-unused-vars
-  user?: User | null
-}
diff --git a/examples/auth/payload/src/app/(app)/_utilities/getUser.ts b/examples/auth/payload/src/app/(app)/_utilities/getUser.ts
new file mode 100644
index 00000000000..77731d189bc
--- /dev/null
+++ b/examples/auth/payload/src/app/(app)/_utilities/getUser.ts
@@ -0,0 +1,16 @@
+'use server'
+import type { User } from '@/payload-types'
+
+import { getPayloadHMR } from '@payloadcms/next/utilities'
+import { unstable_cache } from 'next/cache'
+
+import config from '../../../payload.config'
+
+export const getUser = unstable_cache(
+  async (headers: Headers): Promise<User | null> => {
+    const payload = await getPayloadHMR({ config })
+    const { user } = await payload.auth({ headers })
+    return user
+  },
+  ['payload-user'],
+)
diff --git a/examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx b/examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx
index 6999c1be8df..ec1cd30313e 100644
--- a/examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx
+++ b/examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import type { User } from '@/payload-types'
+
 import { useRouter } from 'next/navigation'
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -7,20 +9,20 @@ import { useForm } from 'react-hook-form'
 import { Button } from '../../_components/Button'
 import { Input } from '../../_components/Input'
 import { Message } from '../../_components/Message'
-import { useAuth } from '../../_providers/Auth'
+import { updateUser } from '../../actions/updateUser'
 import classes from './index.module.scss'
 
 type FormData = {
   email: string
-  name: string
   password: string
   passwordConfirm: string
 }
 
-export const AccountForm: React.FC = () => {
+export const AccountForm: React.FC<{
+  user: User
+}> = ({ user }) => {
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
-  const { setUser, user } = useAuth()
   const [changePassword, setChangePassword] = useState(false)
   const router = useRouter()
 
@@ -37,35 +39,26 @@ export const AccountForm: React.FC = () => {
 
   const onSubmit = useCallback(
     async (data: FormData) => {
-      if (user) {
-        const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/${user.id}`, {
-          // Make sure to include cookies with fetch
-          body: JSON.stringify(data),
-          credentials: 'include',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          method: 'PATCH',
+      try {
+        const result = await updateUser({
+          id: user.id,
+          data,
         })
 
-        if (response.ok) {
-          const json = await response.json()
-          setUser(json.doc)
-          setSuccess('Successfully updated account.')
-          setError('')
-          setChangePassword(false)
-          reset({
-            name: json.doc.name,
-            email: json.doc.email,
-            password: '',
-            passwordConfirm: '',
-          })
-        } else {
-          setError('There was a problem updating your account.')
-        }
+        setSuccess('Successfully updated account.')
+        setError('')
+        setChangePassword(false)
+
+        reset({
+          email: result?.email,
+          password: '',
+          passwordConfirm: '',
+        })
+      } catch {
+        setError('There was a problem updating your account.')
       }
     },
-    [user, setUser, reset],
+    [user, reset],
   )
 
   useEffect(() => {
@@ -136,7 +129,7 @@ export const AccountForm: React.FC = () => {
             register={register}
             required
             type="password"
-            validate={value => value === password.current || 'The passwords do not match'}
+            validate={(value) => value === password.current || 'The passwords do not match'}
           />
         </Fragment>
       )}
diff --git a/examples/auth/payload/src/app/(app)/account/page.tsx b/examples/auth/payload/src/app/(app)/account/page.tsx
index 21aab2d1e6b..bf397b92170 100644
--- a/examples/auth/payload/src/app/(app)/account/page.tsx
+++ b/examples/auth/payload/src/app/(app)/account/page.tsx
@@ -1,21 +1,18 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
+import { headers as getHeaders } from 'next/headers'
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
-import React, { Fragment } from 'react'
+import React from 'react'
 
-import config from '../../../payload.config'
 import { Button } from '../_components/Button'
 import { Gutter } from '../_components/Gutter'
-import { HydrateClientUser } from '../_components/HydrateClientUser'
 import { RenderParams } from '../_components/RenderParams'
+import { getUser } from '../_utilities/getUser'
 import { AccountForm } from './AccountForm'
 import classes from './index.module.scss'
 
 export default async function Account() {
   const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { permissions, user } = await payload.auth({ headers })
+  const user = await getUser(headers)
 
   if (!user) {
     redirect(
@@ -24,21 +21,18 @@ export default async function Account() {
   }
 
   return (
-    <Fragment>
-      <HydrateClientUser permissions={permissions} user={user} />
-      <Gutter className={classes.account}>
-        <RenderParams className={classes.params} />
-        <h1>Account</h1>
-        <p>
-          {`This is your account dashboard. Here you can update your account information and more. To manage all users, `}
-          <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/admin/collections/users`}>
-            login to the admin dashboard
-          </Link>
-          .
-        </p>
-        <AccountForm />
-        <Button appearance="secondary" href="/logout" label="Log out" />
-      </Gutter>
-    </Fragment>
+    <Gutter className={classes.account}>
+      <RenderParams className={classes.params} />
+      <h1>Account</h1>
+      <p>
+        {`This is your account dashboard. Here you can update your account information and more. To manage all users, `}
+        <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/admin/collections/users`}>
+          login to the admin dashboard
+        </Link>
+        .
+      </p>
+      <AccountForm user={user} />
+      <Button appearance="secondary" href="/logout" label="Log out" />
+    </Gutter>
   )
 }
diff --git a/examples/auth/payload/src/app/(app)/actions/login.ts b/examples/auth/payload/src/app/(app)/actions/login.ts
new file mode 100644
index 00000000000..98dccab7b9b
--- /dev/null
+++ b/examples/auth/payload/src/app/(app)/actions/login.ts
@@ -0,0 +1,28 @@
+'use server'
+import type { User } from '@/payload-types'
+
+import { getPayloadHMR } from '@payloadcms/next/utilities'
+import { revalidateTag } from 'next/cache'
+import { cookies as getCookies } from 'next/headers'
+
+import config from '../../../payload.config'
+
+export const login = async (data: { email: string; password: string }): Promise<User | null> => {
+  const cookies = getCookies()
+  const payload = await getPayloadHMR({ config })
+
+  const { token, user } = await payload.login({
+    collection: 'users',
+    data: {
+      email: data.email,
+      password: data.password,
+    },
+  })
+
+  if (token) cookies.set('payload-token', token)
+  else cookies.delete('payload-token')
+
+  revalidateTag('payload-user')
+
+  return user
+}
diff --git a/examples/auth/payload/src/app/(app)/actions/logout.ts b/examples/auth/payload/src/app/(app)/actions/logout.ts
new file mode 100644
index 00000000000..bf040b08822
--- /dev/null
+++ b/examples/auth/payload/src/app/(app)/actions/logout.ts
@@ -0,0 +1,9 @@
+'use server'
+import { revalidateTag } from 'next/cache'
+import { cookies as getCookies } from 'next/headers'
+
+export const logout = (): void => {
+  const cookies = getCookies()
+  cookies.delete('payload-token')
+  revalidateTag('payload-user')
+}
diff --git a/examples/auth/payload/src/app/(app)/actions/updateUser.ts b/examples/auth/payload/src/app/(app)/actions/updateUser.ts
new file mode 100644
index 00000000000..adcf04cb5e9
--- /dev/null
+++ b/examples/auth/payload/src/app/(app)/actions/updateUser.ts
@@ -0,0 +1,26 @@
+'use server'
+import type { User } from '@/payload-types'
+
+import { getPayloadHMR } from '@payloadcms/next/utilities'
+import { revalidateTag } from 'next/cache'
+
+import config from '../../../payload.config'
+
+export const updateUser = async (args: {
+  data: Partial<User>
+  id: string
+}): Promise<User | null> => {
+  const { id, data } = args
+
+  const payload = await getPayloadHMR({ config })
+
+  const user = await payload.update({
+    id,
+    collection: 'users',
+    data,
+  })
+
+  revalidateTag('payload-user')
+
+  return user
+}
diff --git a/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx b/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx
index d4757a0646d..cfcb1f2e5aa 100644
--- a/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx
+++ b/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx
@@ -8,7 +8,7 @@ import { useForm } from 'react-hook-form'
 import { Button } from '../../_components/Button'
 import { Input } from '../../_components/Input'
 import { Message } from '../../_components/Message'
-import { useAuth } from '../../_providers/Auth'
+import { login } from '../../actions/login'
 import classes from './index.module.scss'
 
 type FormData = {
@@ -20,7 +20,6 @@ type FormData = {
 export const CreateAccountForm: React.FC = () => {
   const searchParams = useSearchParams()
   const allParams = searchParams.toString() ? `?${searchParams.toString()}` : ''
-  const { login } = useAuth()
   const router = useRouter()
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<null | string>(null)
@@ -58,7 +57,11 @@ export const CreateAccountForm: React.FC = () => {
       }, 1000)
 
       try {
-        await login(data)
+        await login({
+          email: data.email,
+          password: data.password,
+        })
+
         clearTimeout(timer)
         if (redirect) router.push(redirect)
         else router.push(`/account?success=${encodeURIComponent('Account created successfully')}`)
@@ -67,7 +70,7 @@ export const CreateAccountForm: React.FC = () => {
         setError('There was an error with the credentials provided. Please try again.')
       }
     },
-    [login, router, searchParams],
+    [router, searchParams],
   )
 
   return (
@@ -103,7 +106,7 @@ export const CreateAccountForm: React.FC = () => {
         register={register}
         required
         type="password"
-        validate={value => value === password.current || 'The passwords do not match'}
+        validate={(value) => value === password.current || 'The passwords do not match'}
       />
       <Button
         appearance="primary"
diff --git a/examples/auth/payload/src/app/(app)/create-account/page.tsx b/examples/auth/payload/src/app/(app)/create-account/page.tsx
index cafe19da5b5..4ed1ce70d65 100644
--- a/examples/auth/payload/src/app/(app)/create-account/page.tsx
+++ b/examples/auth/payload/src/app/(app)/create-account/page.tsx
@@ -1,18 +1,16 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
+import { headers as getHeaders } from 'next/headers'
 import { redirect } from 'next/navigation'
 import React from 'react'
 
-import config from '../../../payload.config'
 import { Gutter } from '../_components/Gutter'
 import { RenderParams } from '../_components/RenderParams'
+import { getUser } from '../_utilities/getUser'
 import { CreateAccountForm } from './CreateAccountForm'
 import classes from './index.module.scss'
 
 export default async function CreateAccount() {
   const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { user } = await payload.auth({ headers })
+  const user = await getUser(headers)
 
   if (user) {
     redirect(
diff --git a/examples/auth/payload/src/app/(app)/layout.tsx b/examples/auth/payload/src/app/(app)/layout.tsx
index 9de389551d9..d8ffcce1b24 100644
--- a/examples/auth/payload/src/app/(app)/layout.tsx
+++ b/examples/auth/payload/src/app/(app)/layout.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 
 import { Header } from './_components/Header'
 import './_css/app.scss'
-import { AuthProvider } from './_providers/Auth'
 
 export const metadata = {
   description: 'An example of how to authenticate with Payload from a Next.js app.',
@@ -15,14 +14,8 @@ export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
-        <AuthProvider
-          // To toggle between the REST and GraphQL APIs,
-          // change the `api` prop to either `rest` or `gql`
-          api="rest" // change this to `gql` to use the GraphQL API
-        >
-          <Header />
-          <main>{children}</main>
-        </AuthProvider>
+        <Header />
+        <main>{children}</main>
       </body>
     </html>
   )
diff --git a/examples/auth/payload/src/app/(app)/login/LoginForm/index.tsx b/examples/auth/payload/src/app/(app)/login/LoginForm/index.tsx
index 40cf3ea2b8c..07e8528b1ca 100644
--- a/examples/auth/payload/src/app/(app)/login/LoginForm/index.tsx
+++ b/examples/auth/payload/src/app/(app)/login/LoginForm/index.tsx
@@ -8,7 +8,7 @@ import { useForm } from 'react-hook-form'
 import { Button } from '../../_components/Button'
 import { Input } from '../../_components/Input'
 import { Message } from '../../_components/Message'
-import { useAuth } from '../../_providers/Auth'
+import { login } from '../../actions/login'
 import classes from './index.module.scss'
 
 type FormData = {
@@ -20,7 +20,6 @@ export const LoginForm: React.FC = () => {
   const searchParams = useSearchParams()
   const allParams = searchParams.toString() ? `?${searchParams.toString()}` : ''
   const redirect = useRef(searchParams.get('redirect'))
-  const { login } = useAuth()
   const router = useRouter()
   const [error, setError] = React.useState<null | string>(null)
 
@@ -38,14 +37,18 @@ export const LoginForm: React.FC = () => {
   const onSubmit = useCallback(
     async (data: FormData) => {
       try {
-        await login(data)
+        await login({
+          email: data.email,
+          password: data.password,
+        })
+
         if (redirect?.current) router.push(redirect.current)
         else router.push('/account')
       } catch (_) {
         setError('There was an error with the credentials provided. Please try again.')
       }
     },
-    [login, router],
+    [router],
   )
 
   return (
diff --git a/examples/auth/payload/src/app/(app)/login/page.tsx b/examples/auth/payload/src/app/(app)/login/page.tsx
index 7f98d330941..6caa815e04b 100644
--- a/examples/auth/payload/src/app/(app)/login/page.tsx
+++ b/examples/auth/payload/src/app/(app)/login/page.tsx
@@ -1,18 +1,16 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
+import { headers as getHeaders } from 'next/headers'
 import { redirect } from 'next/navigation'
 import React from 'react'
 
-import config from '../../../payload.config'
 import { Gutter } from '../_components/Gutter'
 import { RenderParams } from '../_components/RenderParams'
+import { getUser } from '../_utilities/getUser'
 import { LoginForm } from './LoginForm'
 import classes from './index.module.scss'
 
 export default async function Login() {
   const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { user } = await payload.auth({ headers })
+  const user = await getUser(headers)
 
   if (user) {
     redirect(`/account?message=${encodeURIComponent('You are already logged in.')}`)
diff --git a/examples/auth/payload/src/app/(app)/logout/LogoutPage/index.tsx b/examples/auth/payload/src/app/(app)/logout/LogoutPage/index.tsx
index 84f0a39f225..5fe46b9ec82 100644
--- a/examples/auth/payload/src/app/(app)/logout/LogoutPage/index.tsx
+++ b/examples/auth/payload/src/app/(app)/logout/LogoutPage/index.tsx
@@ -3,25 +3,20 @@
 import Link from 'next/link'
 import React, { Fragment, useEffect, useState } from 'react'
 
-import { useAuth } from '../../_providers/Auth'
+import { logout } from '../../actions/logout'
 
 export const LogoutPage: React.FC = () => {
-  const { logout } = useAuth()
   const [success, setSuccess] = useState('')
   const [error, setError] = useState('')
 
   useEffect(() => {
-    const performLogout = async () => {
-      try {
-        await logout()
-        setSuccess('Logged out successfully.')
-      } catch (_) {
-        setError('You are already logged out.')
-      }
+    try {
+      logout()
+      setSuccess('Logged out successfully.')
+    } catch (_) {
+      setError('You are already logged out.')
     }
-
-    void performLogout()
-  }, [logout])
+  }, [])
 
   return (
     <Fragment>
diff --git a/examples/auth/payload/src/app/(app)/logout/page.tsx b/examples/auth/payload/src/app/(app)/logout/page.tsx
index 13a8cab86da..682232a89b6 100644
--- a/examples/auth/payload/src/app/(app)/logout/page.tsx
+++ b/examples/auth/payload/src/app/(app)/logout/page.tsx
@@ -1,17 +1,15 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
+import { headers as getHeaders } from 'next/headers'
 import Link from 'next/link'
 import React from 'react'
 
-import config from '../../../payload.config'
 import { Gutter } from '../_components/Gutter'
+import { getUser } from '../_utilities/getUser'
 import { LogoutPage } from './LogoutPage'
 import classes from './index.module.scss'
 
 export default async function Logout() {
   const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { user } = await payload.auth({ headers })
+  const user = await getUser(headers)
 
   if (!user) {
     return (
diff --git a/examples/auth/payload/src/app/(app)/page.tsx b/examples/auth/payload/src/app/(app)/page.tsx
index afd23fd1d45..aae9d70f767 100644
--- a/examples/auth/payload/src/app/(app)/page.tsx
+++ b/examples/auth/payload/src/app/(app)/page.tsx
@@ -1,57 +1,54 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
+import { headers as getHeaders } from 'next/headers'
 import Link from 'next/link'
-import React, { Fragment } from 'react'
+import React from 'react'
 
-import config from '../../payload.config'
 import { Gutter } from './_components/Gutter'
-import { HydrateClientUser } from './_components/HydrateClientUser'
+import { getUser } from './_utilities/getUser'
 
 export default async function HomePage() {
   const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { permissions, user } = await payload.auth({ headers })
+  await getUser(headers)
 
   return (
-    <Fragment>
-      <HydrateClientUser permissions={permissions} user={user} />
-      <Gutter>
-        <h1>Payload Auth Example</h1>
-        <p>
-          {'This is a '}
-          <Link href="https://payloadcms.com" rel="noopener noreferrer" target="_blank">
-            Payload
-          </Link>
-          {' + '}
-          <Link href="https://nextjs.org" rel="noopener noreferrer" target="_blank">
-            Next.js
-          </Link>
-          {' app using the '}
-          <Link href="https://nextjs.org/docs/app" rel="noopener noreferrer" target="_blank">
-            App Router
-          </Link>
-          {' made explicitly for the '}
-          <Link href="https://github.com/payloadcms/payload/tree/main/examples/auth">
-            Payload Auth Example
-          </Link>
-          {". This example demonstrates how to implement Payload's "}
-          <Link href="https://payloadcms.com/docs/authentication/overview">Authentication</Link>
-          {
-            ' strategies using the Local API, as well as through HTTP via the REST and GraphQL APIs. To toggle between these two HTTP APIs, see `_layout.tsx`.'
-          }
-        </p>
-        <p>
-          {'Visit the '}
-          <Link href="/login">login page</Link>
-          {' to start the authentication flow. Once logged in, you will be redirected to the '}
-          <Link href="/account">account page</Link>
-          {` which is restricted to users only. To manage all users, `}
-          <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/admin/collections/users`}>
-            login to the admin dashboard
-          </Link>
-          .
-        </p>
-      </Gutter>
-    </Fragment>
+    <Gutter>
+      <h1>Payload Auth Example</h1>
+      <p>
+        {'This is a '}
+        <Link href="https://payloadcms.com" rel="noopener noreferrer" target="_blank">
+          Payload
+        </Link>
+        {' + '}
+        <Link href="https://nextjs.org" rel="noopener noreferrer" target="_blank">
+          Next.js
+        </Link>
+        {' app using the '}
+        <Link href="https://nextjs.org/docs/app" rel="noopener noreferrer" target="_blank">
+          App Router
+        </Link>
+        {' made explicitly for the '}
+        <Link href="https://github.com/payloadcms/payload/tree/main/examples/auth">
+          Payload Auth Example
+        </Link>
+        {". This example demonstrates how to implement Payload's "}
+        <Link href="https://payloadcms.com/docs/authentication/overview">Authentication</Link>
+        {
+          ' strategies using the Local API. For examples on setting up auth using over HTTP, check out '
+        }
+        <Link href="https://github.com/payloadcms/payload/tree/main/examples/auth/next-app">
+          this example of the REST and GraphQL APIs.
+        </Link>
+      </p>
+      <p>
+        {'Visit the '}
+        <Link href="/login">login page</Link>
+        {' to start the authentication flow. Once logged in, you will be redirected to the '}
+        <Link href="/account">account page</Link>
+        {` which is restricted to users only. To manage all users, `}
+        <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/admin/collections/users`}>
+          login to the admin dashboard
+        </Link>
+        .
+      </p>
+    </Gutter>
   )
 }
diff --git a/examples/auth/payload/src/app/(app)/recover-password/page.tsx b/examples/auth/payload/src/app/(app)/recover-password/page.tsx
index 0750058ac9d..2228342d606 100644
--- a/examples/auth/payload/src/app/(app)/recover-password/page.tsx
+++ b/examples/auth/payload/src/app/(app)/recover-password/page.tsx
@@ -1,17 +1,15 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
+import { headers as getHeaders } from 'next/headers'
 import { redirect } from 'next/navigation'
 import React from 'react'
 
-import config from '../../../payload.config'
 import { Gutter } from '../_components/Gutter'
+import { getUser } from '../_utilities/getUser'
 import { RecoverPasswordForm } from './RecoverPasswordForm'
 import classes from './index.module.scss'
 
 export default async function RecoverPassword() {
   const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { user } = await payload.auth({ headers })
+  const user = await getUser(headers)
 
   if (user) {
     redirect(`/account?message=${encodeURIComponent('Cannot recover password while logged in.')}`)
diff --git a/examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.tsx b/examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.tsx
index 1f92c91d938..6377a5ad775 100644
--- a/examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.tsx
+++ b/examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.tsx
@@ -7,7 +7,7 @@ import { useForm } from 'react-hook-form'
 import { Button } from '../../_components/Button'
 import { Input } from '../../_components/Input'
 import { Message } from '../../_components/Message'
-import { useAuth } from '../../_providers/Auth'
+import { login } from '../../actions/login'
 import classes from './index.module.scss'
 
 type FormData = {
@@ -17,7 +17,6 @@ type FormData = {
 
 export const ResetPasswordForm: React.FC = () => {
   const [error, setError] = useState('')
-  const { login } = useAuth()
   const router = useRouter()
   const searchParams = useSearchParams()
   const token = searchParams.get('token')
@@ -54,7 +53,7 @@ export const ResetPasswordForm: React.FC = () => {
         setError('There was a problem while resetting your password. Please try again later.')
       }
     },
-    [router, login],
+    [router],
   )
 
   // when Next.js populates token within router,
diff --git a/examples/auth/payload/src/app/(app)/reset-password/page.tsx b/examples/auth/payload/src/app/(app)/reset-password/page.tsx
index 56075e0f9e9..2e248edfa3b 100644
--- a/examples/auth/payload/src/app/(app)/reset-password/page.tsx
+++ b/examples/auth/payload/src/app/(app)/reset-password/page.tsx
@@ -1,17 +1,15 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
+import { headers as getHeaders } from 'next/headers'
 import { redirect } from 'next/navigation'
 import React from 'react'
 
-import config from '../../../payload.config'
 import { Gutter } from '../_components/Gutter'
+import { getUser } from '../_utilities/getUser'
 import { ResetPasswordForm } from './ResetPasswordForm'
 import classes from './index.module.scss'
 
 export default async function ResetPassword() {
   const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { user } = await payload.auth({ headers })
+  const user = await getUser(headers)
 
   if (user) {
     redirect(`/account?message=${encodeURIComponent('Cannot reset password while logged in.')}`)
diff --git a/examples/auth/payload/src/collections/Users.ts b/examples/auth/payload/src/collections/Users.ts
index 96a8831d0f9..8c1bfb79b68 100644
--- a/examples/auth/payload/src/collections/Users.ts
+++ b/examples/auth/payload/src/collections/Users.ts
@@ -1,13 +1,62 @@
 import type { CollectionConfig } from 'payload/types'
 
+import { admins } from './access/admins'
+import adminsAndUser from './access/adminsAndUser'
+import { anyone } from './access/anyone'
+import { checkRole } from './access/checkRole'
+import { loginAfterCreate } from './hooks/loginAfterCreate'
+import { protectRoles } from './hooks/protectRoles'
+
 export const Users: CollectionConfig = {
   slug: 'users',
+  access: {
+    admin: ({ req: { user } }) => checkRole(['admin'], user),
+    create: anyone,
+    delete: admins,
+    read: adminsAndUser,
+    update: adminsAndUser,
+  },
   admin: {
     useAsTitle: 'email',
   },
-  auth: true,
+  auth: {
+    cookies: {
+      domain: process.env.COOKIE_DOMAIN,
+      sameSite: 'None',
+      secure: true,
+    },
+    tokenExpiration: 28800, // 8 hours
+  },
   fields: [
-    // Email added by default
-    // Add more fields as needed
+    {
+      name: 'firstName',
+      type: 'text',
+    },
+    {
+      name: 'lastName',
+      type: 'text',
+    },
+    {
+      name: 'roles',
+      type: 'select',
+      hasMany: true,
+      hooks: {
+        beforeChange: [protectRoles],
+      },
+      options: [
+        {
+          label: 'Admin',
+          value: 'admin',
+        },
+        {
+          label: 'User',
+          value: 'user',
+        },
+      ],
+      saveToJWT: true,
+    },
   ],
+  hooks: {
+    afterChange: [loginAfterCreate],
+  },
 }
diff --git a/examples/auth/payload/src/collections/access/checkRole.ts b/examples/auth/payload/src/collections/access/checkRole.ts
index ef31700b6bd..88b41fa019f 100644
--- a/examples/auth/payload/src/collections/access/checkRole.ts
+++ b/examples/auth/payload/src/collections/access/checkRole.ts
@@ -1,10 +1,10 @@
 import type { User } from '../../payload-types'
 
-export const checkRole = (allRoles: User['roles'] = [], user: User = undefined): boolean => {
+export const checkRole = (allRoles: User['roles'] = [], user: User | null): boolean => {
   if (user) {
     if (
-      allRoles.some(role => {
-        return user?.roles?.some(individualRole => {
+      allRoles?.some((role) => {
+        return user?.roles?.some((individualRole) => {
           return individualRole === role
         })
       })