feat: adds and exports reusable auth server functions (#11900)

### What
Adds exportable server functions for `login`, `logout` and `refresh`
that are fully typed and ready to use.

### Why
Creating server functions for these auth operations require the
developer to manually set and handle the cookies / auth JWT. This can be
a complex and involved process - instead we want to provide an option
that will handle the cookies internally and simplify the process for the
user.

### How
Three re-usable functions can be exported from
`@payload/next/server-functions`:
- login
- logout
- refresh

Examples of how to use these functions will be added to the docs
shortly, along with more in-depth info on server functions.

Author: jessrynkar

docs/authentication/operations.mdx

@@ -158,14 +158,21 @@ mutation {
 
 ```ts
 const result = await payload.login({
-  collection: '[collection-slug]',
+  collection: 'collection-slug',
   data: {
     email: 'dev@payloadcms.com',
     password: 'get-out',
   },
 })
 ```
 
+<Banner type="success">
+  **Server Functions:** Payload offers a ready-to-use `login` server function
+  that utilizes the Local API. For integration details and examples, check out
+  the [Server Function
+  docs](../local-api/server-functions#reusable-payload-server-functions).
+</Banner>
+
 ## Logout
 
 As Payload sets HTTP-only cookies, logging out cannot be done by just removing a cookie in JavaScript, as HTTP-only cookies are inaccessible by JS within the browser. So, Payload exposes a `logout` operation to delete the token in a safe way.
@@ -189,6 +196,13 @@ mutation {
 }
 ```
 
+<Banner type="success">
+  **Server Functions:** Payload provides a ready-to-use `logout` server function
+  that manages the user's cookie for a seamless logout. For integration details
+  and examples, check out the [Server Function
+  docs](../local-api/server-functions#reusable-payload-server-functions).
+</Banner>
+
 ## Refresh
 
 Allows for "refreshing" JWTs. If your user has a token that is about to expire, but the user is still active and using the app, you might want to use the `refresh` operation to receive a new token by executing this operation via the authenticated user.
@@ -240,6 +254,13 @@ mutation {
 }
 ```
 
+<Banner type="success">
+  **Server Functions:** Payload exports a ready-to-use `refresh` server function
+  that automatically renews the user's token and updates the associated cookie.
+  For integration details and examples, check out the [Server Function
+  docs](../local-api/server-functions#reusable-payload-server-functions).
+</Banner>
+
 ## Verify by Email
 
 If your collection supports email verification, the Verify operation will be exposed which accepts a verification token and sets the user's `_verified` property to `true`, thereby allowing the user to authenticate with the Payload API.
@@ -270,7 +291,7 @@ mutation {
 
 ```ts
 const result = await payload.verifyEmail({
-  collection: '[collection-slug]',
+  collection: 'collection-slug',
   token: 'TOKEN_HERE',
 })
 ```
@@ -308,7 +329,7 @@ mutation {
 
 ```ts
 const result = await payload.unlock({
-  collection: '[collection-slug]',
+  collection: 'collection-slug',
 })
 ```
 
@@ -349,7 +370,7 @@ mutation {
 
 ```ts
 const token = await payload.forgotPassword({
-  collection: '[collection-slug]',
+  collection: 'collection-slug',
   data: {
     email: 'dev@payloadcms.com',
   },

docs/local-api/server-functions.mdx

@@ -310,7 +310,168 @@ export const PostForm: React.FC = () => {
 
 ## Reusable Payload Server Functions
 
-Coming soon…
+Managing authentication with the Local API can be tricky as you have to handle cookies and tokens yourself, and there aren't built-in logout or refresh functions since these only modify cookies. To make this easier, we provide `login`, `logout`, and `refresh` as ready-to-use server functions. They take care of the underlying complexity so you don't have to.
+
+### `login`
+
+Logs in a user by verifying credentials and setting the authentication cookie. This function allows login via username or email, depending on the collection auth configuration.
+
+#### Importing the `login` function
+
+```ts
+import { login } from '@payloadcms/next/auth'
+```
+
+The login function needs your Payload config, which cannot be imported in a client component. To work around this, create a simple server function like the one below, and call it from your client.
+
+```ts
+'use server'
+
+import { login } from '@payloadcms/next/auth'
+import config from '@payload-config'
+
+export async function loginAction({
+  email,
+  password,
+}: {
+  email: string
+  password: string
+}) {
+  try {
+    const result = await login({
+      collection: 'users',
+      config,
+      email,
+      password,
+    })
+    return result
+  } catch (error) {
+    throw new Error(
+      `Login failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+    )
+  }
+}
+```
+
+#### Login from the React Client Component
+
+```tsx
+'use client'
+import { useState } from 'react'
+import { loginAction } from '../loginAction'
+
+export default function LoginForm() {
+  const [email, setEmail] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+
+  return (
+    <form onSubmit={() => loginAction({ email, password })}>
+      <label htmlFor="email">Email</label>
+      <input
+        id="email"
+        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+          setEmail(e.target.value)
+        }
+        type="email"
+        value={email}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        id="password"
+        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+          setPassword(e.target.value)
+        }
+        type="password"
+        value={password}
+      />
+      <button type="submit">Login</button>
+    </form>
+  )
+}
+```
+
+### `logout`
+
+Logs out the current user by clearing the authentication cookie.
+
+#### Importing the `logout` function
+
+```ts
+import { logout } from '@payloadcms/next/auth'
+```
+
+Similar to the login function, you now need to pass your Payload config to this function and this cannot be done in a client component. Use a helper server function as shown below.
+
+```ts
+'use server'
+
+import { logout } from '@payloadcms/next/auth'
+import config from '@payload-config'
+
+export async function logoutAction() {
+  try {
+    return await logout({ config })
+  } catch (error) {
+    throw new Error(
+      `Logout failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+    )
+  }
+}
+```
+
+#### Logout from the React Client Component
+
+```tsx
+'use client'
+import { logoutAction } from '../logoutAction'
+
+export default function LogoutButton() {
+  return <button onClick={() => logoutFunction()}>Logout</button>
+}
+```
+
+### `refresh`
+
+Refreshes the authentication token for the logged-in user.
+
+#### Importing the `refresh` function
+
+```ts
+import { refresh } from '@payloadcms/next/auth'
+```
+
+As with login and logout, you need to pass your Payload config to this function. Create a helper server function like the one below. Passing the config directly to the client is not possible and will throw errors.
+
+```ts
+'use server'
+
+import { refresh } from '@payloadcms/next/auth'
+import config from '@payload-config'
+
+export async function refreshAction() {
+  try {
+    return await refresh({
+      collection: 'users', // update this to your collection slug
+      config,
+    })
+  } catch (error) {
+    throw new Error(
+      `Refresh failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+    )
+  }
+}
+```
+
+#### Using Refresh from the React Client Component
+
+```tsx
+'use client'
+import { refreshAction } from '../actions/refreshAction'
+
+export default function RefreshTokenButton() {
+  return <button onClick={() => refreshFunction()}>Refresh</button>
+}
+```
 
 ## Error Handling in Server Functions
 

packages/next/package.json

@@ -37,6 +37,11 @@
       "types": "./src/exports/routes.ts",
       "default": "./src/exports/routes.ts"
     },
+    "./auth": {
+      "import": "./src/exports/auth.ts",
+      "types": "./src/exports/auth.ts",
+      "default": "./src/exports/auth.ts"
+    },
     "./templates": {
       "import": "./src/exports/templates.ts",
       "types": "./src/exports/templates.ts",

packages/next/src/auth/login.ts

@@ -0,0 +1,87 @@
+'use server'
+
+import type { CollectionSlug } from 'payload'
+
+import { cookies as getCookies } from 'next/headers.js'
+import { generatePayloadCookie, getPayload } from 'payload'
+
+import { setPayloadAuthCookie } from '../utilities/setPayloadAuthCookie.js'
+
+type LoginWithEmail = {
+  collection: CollectionSlug
+  config: any
+  email: string
+  password: string
+  username?: never
+}
+
+type LoginWithUsername = {
+  collection: CollectionSlug
+  config: any
+  email?: never
+  password: string
+  username: string
+}
+type LoginArgs = LoginWithEmail | LoginWithUsername
+
+export async function login({ collection, config, email, password, username }: LoginArgs): Promise<{
+  token?: string
+  user: any
+}> {
+  const payload = await getPayload({ config })
+
+  const authConfig = payload.collections[collection]?.config.auth
+  if (!authConfig) {
+    throw new Error(`No auth config found for collection: ${collection}`)
+  }
+
+  const loginWithUsername = authConfig?.loginWithUsername ?? false
+
+  if (loginWithUsername) {
+    if (loginWithUsername.allowEmailLogin) {
+      if (!email && !username) {
+        throw new Error('Email or username is required.')
+      }
+    } else {
+      if (!username) {
+        throw new Error('Username is required.')
+      }
+    }
+  } else {
+    if (!email) {
+      throw new Error('Email is required.')
+    }
+  }
+
+  let loginData
+
+  if (loginWithUsername) {
+    loginData = username ? { password, username } : { email, password }
+  } else {
+    loginData = { email, password }
+  }
+
+  try {
+    const result = await payload.login({
+      collection,
+      data: loginData,
+    })
+
+    if (result.token) {
+      await setPayloadAuthCookie({
+        authConfig,
+        cookiePrefix: payload.config.cookiePrefix,
+        token: result.token,
+      })
+    }
+
+    if ('removeTokenFromResponses' in config && config.removeTokenFromResponses) {
+      delete result.token
+    }
+
+    return result
+  } catch (e) {
+    console.error('Login error:', e)
+    throw new Error(`${e}`)
+  }
+}

packages/next/src/auth/logout.ts

@@ -0,0 +1,29 @@
+'use server'
+
+import { cookies as getCookies, headers as nextHeaders } from 'next/headers.js'
+import { getPayload } from 'payload'
+
+import { getExistingAuthToken } from '../utilities/getExistingAuthToken.js'
+
+export async function logout({ config }: { config: any }) {
+  try {
+    const payload = await getPayload({ config })
+    const headers = await nextHeaders()
+    const result = await payload.auth({ headers })
+
+    if (!result.user) {
+      return { message: 'User already logged out', success: true }
+    }
+
+    const existingCookie = await getExistingAuthToken(payload.config.cookiePrefix)
+
+    if (existingCookie) {
+      const cookies = await getCookies()
+      cookies.delete(existingCookie.name)
+      return { message: 'User logged out successfully', success: true }
+    }
+  } catch (e) {
+    console.error('Logout error:', e)
+    throw new Error(`${e}`)
+  }
+}