chore(release): v3.0.0-alpha.61 [skip ci]

.eslintrc.cjs

@@ -8,7 +8,6 @@ module.exports = {
       plugins: ['payload'],
       rules: {
         'payload/no-jsx-import-statements': 'warn',
-        'payload/no-relative-monorepo-imports': 'error',
       },
     },
     {

.github/CODEOWNERS

@@ -1,33 +1,41 @@
 # Order matters. The last matching pattern takes precedence.
 
-### Package Exports ###
-/**/exports/ @denolfe @jmikrut
+### Core ###
+/packages/payload/src/uploads/ @denolfe
+/packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
 
 ### Adapters ###
-/packages/richtext-*/ @AlessioGr
+/packages/db-*/ @denolfe @jmikrut @DanRibbens
+/packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
 
 ### Plugins ###
+/packages/plugin-*/ @denolfe @jmikrut @DanRibbens
 /packages/plugin-cloud*/ @denolfe
+/packages/plugin-form-builder/ @jacobsfletch
+/packages/plugin-live-preview*/ @jacobsfletch
+/packages/plugin-nested-docs/ @jacobsfletch
+/packages/plugin-redirects/ @jacobsfletch
+/packages/plugin-search/ @jacobsfletch
+/packages/plugin-sentry/ @JessChowdhury
+/packages/plugin-seo/ @jacobsfletch
+/packages/plugin-stripe/ @jacobsfletch
+
+### Examples ###
+/examples/ @jacobsfletch
+/examples/testing/ @JarrodMFlesch
+/examples/email/ @JessChowdhury
+/examples/whitelabel/ @JessChowdhury
 
 ### Templates ###
 /templates/ @jacobsfletch @denolfe
 
 ### Misc ###
 /packages/create-payload-app/ @denolfe
-/packages/eslint-*/ @denolfe
-
-### Build Files ###
-/**/package.json @denolfe
-
-/tsconfig.json @denolfe
-/**/tsconfig*.json @denolfe
-
-/jest.config.js @denolfe
-/**/jest.config.js @denolfe
+/packages/eslint-config-payload/ @denolfe
+/packages/payload-admin-bar/ @jacobsfletch
 
 ### Root ###
 /package.json @denolfe
 /scripts/ @denolfe
-/.husky/ @denolfe
-/.vscode/ @denolfe
 /.github/ @denolfe
+/.github/CODEOWNERS @denolfe

.github/workflows/main.yml

@@ -4,18 +4,12 @@ on:
   pull_request:
     types: [opened, reopened, synchronize]
   push:
-    branches: ['main', 'beta']
+    branches: ['main', 'alpha']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
-env:
-  NODE_VERSION: 18.20.2
-  PNPM_VERSION: 8.15.7
-  DO_NOT_TRACK: 1 # Disable Turbopack telemetry
-  NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
-
 jobs:
   changes:
     runs-on: ubuntu-latest
@@ -25,10 +19,6 @@ jobs:
       needs_build: ${{ steps.filter.outputs.needs_build }}
       templates: ${{ steps.filter.outputs.templates }}
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
@@ -59,19 +49,15 @@ jobs:
         with:
           fetch-depth: 25
 
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: ${{ env.PNPM_VERSION }}
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory
@@ -91,8 +77,6 @@ jobs:
 
       - run: pnpm install
       - run: pnpm run build:all
-        env:
-          DO_NOT_TRACK: 1 # Disable Turbopack telemetry
 
       - name: Cache build
         uses: actions/cache@v4
@@ -104,21 +88,18 @@ jobs:
   tests-unit:
     runs-on: ubuntu-latest
     needs: build
+    if: false # Disable until tests are updated for 3.0
 
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: ${{ env.PNPM_VERSION }}
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -142,9 +123,9 @@ jobs:
         database:
           - mongodb
           - postgres
-          - postgres-custom-schema
-          - postgres-uuid
-          - supabase
+        #  - postgres-custom-schema
+        #  - postgres-uuid
+        #  - supabase
     env:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
@@ -155,19 +136,15 @@ jobs:
       AWS_REGION: us-east-1
 
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: ${{ env.PNPM_VERSION }}
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -241,38 +218,32 @@ jobs:
           - access-control
           - admin
           - auth
+          - email
           - field-error-states
           - fields-relationship
           - fields
           - fields__collections__Blocks
           - fields__collections__Array
           - fields__collections__Relationship
-          - fields__collections__RichText
           - fields__collections__Lexical
           - live-preview
           - localization
-          - plugin-cloud-storage
           - plugin-form-builder
           - plugin-nested-docs
           - plugin-seo
           - versions
           - uploads
-    env:
-      SUITE_NAME: ${{ matrix.suite }}
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
 
-      - name: Setup Node@${{ env.NODE_VERSION }}
+    steps:
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: ${{ env.PNPM_VERSION }}
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -282,116 +253,34 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
-      - name: Start LocalStack
-        run: pnpm docker:start
-        if: ${{ matrix.suite == 'plugin-cloud-storage' }}
-
-      - name: Store Playwright's Version
-        run: |
-          # Extract the version number using a more targeted regex pattern with awk
-          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --depth=0 | awk '/@playwright\/test/ {print $2}')
-          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
-          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
-
-      - name: Cache Playwright Browsers for Playwright's Version
-        id: cache-playwright-browsers
-        uses: actions/cache@v3
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
-
-      - name: Setup Playwright - Browsers and Dependencies
-        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install --with-deps chromium
-
-      - name: Setup Playwright - Dependencies-only
-        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
-        run: pnpm exec playwright install-deps chromium
+      - name: Install Playwright
+        run: pnpm exec playwright install --with-deps
 
       - name: E2E Tests
-        run: PLAYWRIGHT_JSON_OUTPUT_NAME=results_${{ matrix.suite }}.json pnpm test:e2e ${{ matrix.suite }}
-        env:
-          PLAYWRIGHT_JSON_OUTPUT_NAME: results_${{ matrix.suite }}.json
-          NEXT_TELEMETRY_DISABLED: 1
+        run: pnpm test:e2e ${{ matrix.suite }}
 
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: test-results-${{ matrix.suite }}
           path: test/test-results/
-          if-no-files-found: ignore
           retention-days: 1
 
-      # Disabled until this is fixed: https://github.com/daun/playwright-report-summary/issues/156
-      # - uses: daun/playwright-report-summary@v3
-      #   with:
-      #     report-file: results_${{ matrix.suite }}.json
-      #     report-tag: ${{ matrix.suite }}
-      #     job-summary: true
-
-  app-build-with-packed:
-    runs-on: ubuntu-latest
-    needs: build
-
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Start MongoDB
-        uses: supercharge/mongodb-github-action@1.10.0
-        with:
-          mongodb-version: 6.0
-
-      - name: Pack and build app
-        run: |
-          set -ex
-          pnpm run script:pack --dest templates/blank-3.0
-          cd templates/blank-3.0
-          cp .env.example .env
-          ls -la
-          pnpm add ./*.tgz
-          pnpm install --ignore-workspace
-          cat package.json
-          pnpm run build
-
   tests-type-generation:
     if: false # This should be replaced with gen on a real Payload project
     runs-on: ubuntu-latest
     needs: build
 
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: ${{ env.PNPM_VERSION }}
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -420,14 +309,11 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
 
-      - name: Setup Node@${{ env.NODE_VERSION }}
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: 18
 
       - name: Start MongoDB
         uses: supercharge/mongodb-github-action@1.10.0

.github/workflows/pr-title.yml

@@ -1,103 +0,0 @@
-name: pr-title
-
-on:
-  pull_request:
-    types:
-      - opened
-      - edited
-      - synchronize
-
-permissions:
-  pull-requests: write
-
-jobs:
-  main:
-    name: lint-pr-title
-    runs-on: ubuntu-latest
-    steps:
-      - uses: amannn/action-semantic-pull-request@v5
-        id: lint_pr_title
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          types: |
-            build
-            chore
-            ci
-            docs
-            feat
-            fix
-            perf
-            refactor
-            revert
-            style
-            test
-            types
-          scopes: |
-            cpa
-            db-\*
-            db-mongodb
-            db-postgres
-            email-nodemailer
-            eslint
-            graphql
-            live-preview
-            live-preview-react
-            next
-            payload
-            plugin-cloud
-            plugin-cloud-storage
-            plugin-form-builder
-            plugin-nested-docs
-            plugin-redirects
-            plugin-relationship-object-ids
-            plugin-search
-            plugin-sentry
-            plugin-seo
-            plugin-stripe
-            richtext-\*
-            richtext-lexical
-            richtext-slate
-            storage-\*
-            storage-azure
-            storage-gcs
-            storage-vercel-blob
-            storage-s3
-            translations
-            ui
-            templates
-            examples(\/(\w|-)+)?
-            deps
-
-          # Disallow uppercase letters at the beginning of the subject
-          subjectPattern: ^(?![A-Z]).+$
-          subjectPatternError: |
-            The subject "{subject}" found in the pull request title "{title}"
-            didn't match the configured pattern. Please ensure that the subject
-            doesn't start with an uppercase character.
-
-      - uses: marocchino/sticky-pull-request-comment@v2
-        # When the previous steps fails, the workflow would stop. By adding this
-        # condition you can continue the execution with the populated error message.
-        if: always() && (steps.lint_pr_title.outputs.error_message != null)
-        with:
-          header: pr-title-lint-error
-          message: |
-            Pull Request titles must follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and have valid scopes.
-
-            ${{ steps.lint_pr_title.outputs.error_message }}
-
-            ```
-            feat(ui): add Button component
-            ^    ^    ^
-            |    |    |__ Subject
-            |    |_______ Scope
-            |____________ Type
-            ```
-
-      # Delete a previous comment when the issue has been resolved
-      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@v2
-        with:
-          header: pr-title-lint-error
-          delete: true

.node-version

@@ -1 +1 @@
-v18.20.2
+v18.19.1

.nvmrc

@@ -1 +1 @@
-v18.20.2
+v18.19.1

.vscode/launch.json

@@ -41,13 +41,6 @@
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "node --no-deprecation test/dev.js auth",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Auth",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "pnpm run dev plugin-cloud-storage",
       "cwd": "${workspaceFolder}",
@@ -58,13 +51,6 @@
         "PAYLOAD_PUBLIC_CLOUD_STORAGE_ADAPTER": "s3"
       }
     },
-    {
-      "command": "node --no-deprecation test/dev.js collections-graphql",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev GraphQL",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "node --no-deprecation test/dev.js fields",
       "cwd": "${workspaceFolder}",
@@ -83,26 +69,36 @@
       }
     },
     {
-      "command": "node --no-deprecation test/dev.js versions",
+      "command": "pnpm run dev versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Versions",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js localization",
+      "command": "pnpm run dev localization",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Localization",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "node --no-deprecation test/dev.js uploads",
+      "command": "pnpm run dev uploads",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Uploads",
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "PAYLOAD_BUNDLER=vite pnpm run dev fields",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Fields (Vite)",
+      "request": "launch",
+      "type": "node-terminal",
+      "env": {
+        "NODE_ENV": "production"
+      }
+    },
     {
       "command": "pnpm run test:int live-preview",
       "cwd": "${workspaceFolder}",

.vscode/settings.json

@@ -40,6 +40,5 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  },
-  "files.insertFinalNewline": true
+  }
 }

app/(payload)/api/[...slug]/route.ts

@@ -1,10 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY it because it could be re-written at any time. */
 import config from '@payload-config'
-import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 
 export const GET = REST_GET(config)
 export const POST = REST_POST(config)
 export const DELETE = REST_DELETE(config)
 export const PATCH = REST_PATCH(config)
-export const OPTIONS = REST_OPTIONS(config)

changelog.config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  // gitRawCommitsOpts: {
+  //   from: 'v2.0.9',
+  //   path: 'packages/payload',
+  // },
+  // infile: 'CHANGELOG.md',
+  options: {
+    preset: {
+      name: 'conventionalcommits',
+      types: [
+        { section: 'Features', type: 'feat' },
+        { section: 'Features', type: 'feature' },
+        { section: 'Bug Fixes', type: 'fix' },
+        { section: 'Documentation', type: 'docs' },
+      ],
+    },
+  },
+  // outfile: 'NEW.md',
+  writerOpts: {
+    commitGroupsSort: (a, b) => {
+      const groupOrder = ['Features', 'Bug Fixes', 'Documentation']
+      return groupOrder.indexOf(a.title) - groupOrder.indexOf(b.title)
+    },
+
+    // Scoped commits at the end, alphabetical sort
+    commitsSort: (a, b) => {
+      if (a.scope || b.scope) {
+        if (!a.scope) return -1
+        if (!b.scope) return 1
+        return a.scope === b.scope
+          ? a.subject.localeCompare(b.subject)
+          : a.scope.localeCompare(b.scope)
+      }
+
+      // Alphabetical sort
+      return a.subject.localeCompare(b.subject)
+    },
+  },
+}

docs/configuration/localization.mdx

@@ -49,8 +49,7 @@ export default buildConfig({
       {
         label: 'Arabic',
         code: 'ar',
-        // opt-in to setting default text-alignment on Input fields to rtl (right-to-left)
-        // when current locale is rtl
+        // opt-in to setting default text-alignment on Input fields to rtl (right-to-left) when current locale is rtl
         rtl: true,
       },
     ],
@@ -135,9 +134,13 @@ to support localization, you need to specify each field that you would like to l
 ```js
 {
   name: 'title',
-  type: 'text',
-  // highlight-start
-  localized: true,
+    type
+:
+  'text',
+    // highlight-start
+    localized
+:
+  true,
   // highlight-end
 }
 ```

docs/database/transactions.mdx

@@ -20,8 +20,7 @@ The initial request made to Payload will begin a new transaction and attach it t
 
 ```ts
 const afterChange: CollectionAfterChangeHook = async ({ req }) => {
-  // because req.transactionID is assigned from Payload and passed through,
-  // my-slug will only persist if the entire request is successful
+  // because req.transactionID is assigned from Payload and passed through, my-slug will only persist if the entire request is successful
   await req.payload.create({
     req,
     collection: 'my-slug',

docs/fields/json.mdx

@@ -4,7 +4,7 @@ label: JSON
 order: 50
 desc: The JSON field type will store any string in the Database. Learn how to use JSON fields, see examples and options.
 
-keywords: json, jsonSchema, schema, validation, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+keywords: json, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
 <Banner>
@@ -30,7 +30,6 @@ This field uses the `monaco-react` editor syntax highlighting.
 | **`unique`**       | Enforce that each entry in the Collection has a unique value for this field.                                                                                                |
 | **`index`**        | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
 | **`validate`**     | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                |
-| **`jsonSchema`**   | Provide a JSON schema that will be used for validation. [JSON schemas](https://json-schema.org/learn/getting-started-step-by-step)
 | **`saveToJWT`**    | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                               |
 | **`hooks`**        | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                  |
 | **`access`**       | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                     |
@@ -53,7 +52,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 
 ### Example
 
-`collections/ExampleCollection.ts`
+`collections/ExampleCollection.ts
 
 ```ts
 import { CollectionConfig } from 'payload/types'
@@ -69,67 +68,3 @@ export const ExampleCollection: CollectionConfig = {
   ],
 }
 ```
-### JSON Schema Validation
-
-Payload JSON fields fully support the [JSON schema](https://json-schema.org/) standard. By providing a schema in your field config, the editor will be guided in the admin UI, getting typeahead for properties and their formats automatically. When the document is saved, the default validation will prevent saving any invalid data in the field according to the schema in your config.
-
-If you only provide a URL to a schema, Payload will fetch the desired schema if it is publicly available. If not, it is recommended to add the schema directly to your config or import it from another file so that it can be implemented consistently in your project.
-
-
-#### Local JSON Schema
-
-`collections/ExampleCollection.ts`
-
-```ts
-import { CollectionConfig } from 'payload/types'
-
-export const ExampleCollection: CollectionConfig = {
-  slug: 'example-collection',
-  fields: [
-    {
-      name: 'customerJSON', // required
-      type: 'json', // required
-      jsonSchema: {
-        uri: 'a://b/foo.json', // required
-        fileMatch: ['a://b/foo.json'], // required
-        schema: {
-          type: 'object',
-          properties: {
-            foo: {
-              enum: ['bar', 'foobar'],
-            }
-          },
-        },
-      },
-
-    },
-  ],
-}
-// {"foo": "bar"} or {"foo": "foobar"} - ok
-// Attempting to create {"foo": "not-bar"} will throw an error
-```
-
-#### Remote JSON Schema
-
-`collections/ExampleCollection.ts`
-
-```ts
-import { CollectionConfig } from 'payload/types'
-
-export const ExampleCollection: CollectionConfig = {
-  slug: 'example-collection',
-  fields: [
-    {
-      name: 'customerJSON', // required
-      type: 'json', // required
-      jsonSchema: {
-        uri: 'https://example.com/customer.schema.json', // required
-        fileMatch: ['https://example.com/customer.schema.json'], // required
-      },
-    },
-  ],
-}
-// If 'https://example.com/customer.schema.json' has a JSON schema
-// {"foo": "bar"} or {"foo": "foobar"} - ok
-// Attempting to create {"foo": "not-bar"} will throw an error
-```

docs/graphql/overview.mdx

@@ -42,12 +42,11 @@ export const PublicUser: CollectionConfig = {
 
 **Payload will automatically open up the following queries:**
 
-| Query Name              | Operation           |
-| ------------------      | ------------------- |
-| **`PublicUser`**        | `findByID`          |
-| **`PublicUsers`**       | `find`              |
-| **`countPublicUsers`**  | `count`             |
-| **`mePublicUser`**      | `me` auth operation |
+| Query Name         | Operation           |
+| ------------------ | ------------------- |
+| **`PublicUser`**   | `findByID`          |
+| **`PublicUsers`**  | `find`              |
+| **`mePublicUser`** | `me` auth operation |
 
 **And the following mutations:**
 

docs/live-preview/frontend.mdx

@@ -8,7 +8,7 @@ keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, us
 
 While using Live Preview, the Admin panel emits a new `window.postMessage` event every time a change is made to the document. Your front-end application can listen for these events and re-render accordingly.
 
-Wiring your front-end into Live Preview is easy. If your front-end application is built with React, Next.js, Vue or Nuxt.js, use the `useLivePreview` hook that Payload provides. In the future, all other major frameworks like Svelte will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own hook](#building-your-own-hook) for more information.
+Wiring your front-end into Live Preview is easy. If your front-end application is built with React or Next.js, use the [`useLivePreview`](#react) React hook that Payload provides. In the future, all other major frameworks like Vue, Svelte, etc will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own hook](#building-your-own-hook) for more information.
 
 By default, all hooks accept the following args:
 
@@ -36,10 +36,6 @@ And return the following values:
   For example, `data?.relatedPosts?.[0]?.title`.
 </Banner>
 
-<Banner type="info">
-  It is important that the `depth` argument matches exactly with the depth of your initial page request. The depth property is used to populated relationships and uploads beyond their IDs. See [Depth](../getting-started/concepts#depth) for more information.
-</Banner>
-
 ### React
 
 If your front-end application is built with React or Next.js, you can use the `useLivePreview` hook that Payload provides.
@@ -75,40 +71,11 @@ export const PageClient: React.FC<{
 }
 ```
 
-### Vue
-
-If your front-end application is built with Vue 3 or Nuxt 3, you can use the `useLivePreview` composable that Payload provides.
-
-First, install the `@payloadcms/live-preview-vue` package:
-
-```bash
-npm install @payloadcms/live-preview-vue
-```
-
-Then, use the `useLivePreview` hook in your Vue component:
-
-```vue
-<script setup lang="ts">
-import type { PageData } from '~/types';
-import { defineProps } from 'vue';
-import { useLivePreview } from '@payloadcms/live-preview-vue';
-
-// Fetch the initial data on the parent component or using async state
-const props = defineProps<{ initialData: PageData }>();
-
-// The hook will take over from here and keep the preview in sync with the changes you make.
-// The `data` property will contain the live data of the document only when viewed from the Preview view of the Admin UI.
-const { data } = useLivePreview<PageData>({
-  initialData: props.initialData,
-  serverURL: "<PAYLOAD_SERVER_URL>",
-  depth: 2,
-});
-</script>
-
-<template>
-  <h1>{{ data.title }}</h1>
-</template>
-```
+<Banner type="info">
+  If is important that the `depth` argument matches exactly with the depth of your initial page
+  request. The depth property is used to populated relationships and uploads beyond their IDs. See
+  [Depth](../getting-started/concepts#depth) for more information.
+</Banner>
 
 ## Building your own hook
 

docs/local-api/overview.mdx

@@ -164,22 +164,6 @@ const result = await payload.findByID({
 })
 ```
 
-#### Count
-
-```js
-// Result will be an object with:
-// {
-//   totalDocs: 10, // count of the documents satisfies query
-// }
-const result = await payload.count({
-  collection: 'posts', // required
-  locale: 'en',
-  where: {}, // pass a `where` query here
-  user: dummyUser,
-  overrideAccess: false,
-})
-```
-
 #### Update by ID
 
 ```js

docs/rest-api/overview.mdx

@@ -90,19 +90,6 @@ Note: Collection slugs must be formatted in kebab-case
         },
       },
     },
-    {
-      operation: "Count",
-      method: "GET",
-      path: "/api/{collection-slug}/count",
-      description: "Count the documents",
-      example: {
-        slug: "count",
-        req: true,
-        res: {
-         totalDocs: 10
-        },
-      },
-    },
     {
       operation: "Create",
       method: "POST",

docs/rich-text/lexical.mdx

@@ -138,7 +138,7 @@ import { CallToAction } from '../blocks/CallToAction'
 Here's an overview of all the included features:
 
 | Feature Name                   | Included by default | Description                                                                                                                                                                            |
-|--------------------------------|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ------------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`BoldTextFeature`**          | Yes                 | Handles the bold text format                                                                                                                                                           |
 | **`ItalicTextFeature`**        | Yes                 | Handles the italic text format                                                                                                                                                         |
 | **`UnderlineTextFeature`**     | Yes                 | Handles the underline text format                                                                                                                                                      |
@@ -157,8 +157,7 @@ Here's an overview of all the included features:
 | **`RelationshipFeature`**      | Yes                 | Allows you to create block-level (not inline) relationships to other documents                                                                                                         |
 | **`BlockQuoteFeature`**        | Yes                 | Allows you to create block-level quotes                                                                                                                                                |
 | **`UploadFeature`**            | Yes                 | Allows you to create block-level upload nodes - this supports all kinds of uploads, not just images                                                                                    |
-| **`HorizontalRuleFeature`**    | Yes                 | Horizontal rules / separators. Basically displays an <hr> element                                                                                                                      |
-| **`BlocksFeature`**            | No                  | Allows you to use Payload's [Blocks Field](/docs/fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field.                 |
+| **`BlocksFeature`**            | No                  | Allows you to use Payload's [Blocks Field](/docs/fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field. |
 | **`TreeViewFeature`**          | No                  | Adds a debug box under the editor, which allows you to see the current editor state live, the dom, as well as time travel. Very useful for debugging                                   |
 
 ## Creating your own, custom Feature
@@ -196,8 +195,7 @@ const Pages: CollectionConfig = {
       editor: lexicalEditor({
         features: ({ defaultFeatures }) => [
           ...defaultFeatures,
-          // The HTMLConverter Feature is the feature which manages the HTML serializers.
-          // If you do not pass any arguments to it, it will use the default serializers.
+          // The HTMLConverter Feature is the feature which manages the HTML serializers. If you do not pass any arguments to it, it will use the default serializers.
           HTMLConverterFeature({}),
         ],
       }),
@@ -236,19 +234,6 @@ This method employs `convertLexicalToHTML` from `@payloadcms/richtext-lexical`,
 
 Because every `Feature` is able to provide html converters, and because the `htmlFeature` can modify those or provide their own, we need to consolidate them with the default html Converters using the `consolidateHTMLConverters` function.
 
-#### CSS
-
-Payload's lexical HTML converter does not generate CSS for you, but it does add classes to the generated HTML. You can use these classes to style the HTML in your frontend.
-
-Here is some "base" CSS you can use to ensure that nested lists render correctly:
-
-```css
-/* Base CSS for Lexical HTML */
-.nestedListItem, .list-check {
-  list-style-type: none;
-}
-```
-
 #### Creating your own HTML Converter
 
 HTML Converters are typed as `HTMLConverter`, which contains the node type it should handle, and a function that accepts the serialized node from the lexical editor, and outputs the HTML string. Here's the HTML Converter of the Upload node as an example:

docs/upload/overview.mdx

@@ -40,22 +40,21 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl
 
 ### Collection Upload Options
 
-| Option                         | Description                                                                                                                                                                                                      |
-| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`staticURL`** \*             | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server.                          |
-| **`staticDir`** \*             | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                                            |
-| **`adminThumbnail`**           | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                                          |
-| **`crop`**                     | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                                               |
-| **`disableLocalStorage`**      | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                                                      |
-| **`externalFileHeaderFilter`** | Accepts existing headers and can filter/modify them.                                                                                                                                                             |
-| **`focalPoint`**               | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
-| **`formatOptions`**            | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                                          |
-| **`handlers`**                 | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                                             |
-| **`imageSizes`**               | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                                               |
-| **`mimeTypes`**                | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                                         |
-| **`staticOptions`**            | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)                                                                  |
-| **`resizeOptions`**            | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                  |
-| **`filesRequiredOnCreate`**    | Mandate file data on creation, default is true.                                                                                                                                                                  |
+| Option                      | Description                                                                                                                                                                                                      |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`staticURL`** \*          | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server.                          |
+| **`staticDir`** \*          | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                                            |
+| **`adminThumbnail`**        | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                                          |
+| **`crop`**                  | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                                               |
+| **`disableLocalStorage`**   | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                                                      |
+| **`focalPoint`**            | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
+| **`formatOptions`**         | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                                          |
+| **`handlers`**              | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                                             |
+| **`imageSizes`**            | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                                               |
+| **`mimeTypes`**             | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                                         |
+| **`staticOptions`**         | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)                                                                  |
+| **`resizeOptions`**         | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                  |
+| **`filesRequiredOnCreate`** | Mandate file data on creation, default is true.                                                                                                                                                                  |
 
 _An asterisk denotes that a property above is required._
 

emptyModule.js

@@ -0,0 +1 @@
+export default {}

examples/auth/next-app/README.md

@@ -1,11 +1,9 @@
 # Payload Auth Example Front-End
 
-This is a [Next.js](https://nextjs.org) [App Router](https://nextjs.org/docs/app) front-end made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). This example demonstrates how to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
+This is a [Payload](https://payloadcms.com) + [Next.js](https://nextjs.org) app using the [App Router](https://nextjs.org/docs/app) made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). It demonstrates how to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
 
 > This example uses the App Router, the latest API of Next.js. If your app is using the legacy [Pages Router](https://nextjs.org/docs/pages), check out the official [Pages Router Example](https://github.com/payloadcms/payload/tree/main/examples/auth/next-pages).
 
-**IMPORTANT—This application runs on a different server as Payload and establishes a connection from another domain or port over HTTP.** For an integrated setup that runs on a single server and uses the [Local API](https://payloadcms.com/docs/local-api/overview#local-api), check out [how to serve Payload alongside Next.js](https://github.com/payloadcms/payload/tree/main/examples/auth/payload). To learn more about this, check out [how Payload can be used in its various headless capacities](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload).
-
 ## Getting Started
 
 ### Payload
@@ -15,10 +13,9 @@ First you'll need a running Payload app. There is one made explicitly for this e
 ### Next.js
 
 1. Clone this repo
-2. `cd` into this directory and run `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
-   > \*If you are running using pnpm within the Payload Monorepo, the `--ignore-workspace` flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.
+2. `cd` into this directory and run `yarn` or `npm install`
 3. `cp .env.example .env` to copy the example environment variables
-4. `pnpm dev`, `yarn dev`, or `npm run dev` to start the server
+4. `yarn dev` or `npm run dev` to start the server
 5. `open http://localhost:3001` to see the result
 
 Once running, a user is automatically seeded in your local environment with some basic instructions. See the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) for full details.

examples/auth/next-app/app/page.tsx

@@ -26,7 +26,7 @@ export default function Home() {
         {". This example demonstrates how to implement Payload's "}
         <Link href="https://payloadcms.com/docs/authentication/overview">Authentication</Link>
         {
-          ' strategies through http using the REST and GraphQL APIs. To toggle between these two APIs, see `_layout.tsx`.'
+          ' strategies in both the REST and GraphQL APIs. To toggle between these APIs, see `_layout.tsx`.'
         }
       </p>
       <p>

examples/auth/next-app/app/recover-password/RecoverPasswordForm/index.tsx

@@ -54,7 +54,7 @@ export const RecoverPasswordForm: React.FC = () => {
           <div className={classes.formWrapper}>
             <p>
               {`Please enter your email below. You will receive an email message with instructions on
-              how to reset your password. To manage all of your users, `}
+              how to reset your password. To manage your all users, `}
               <Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
                 login to the admin dashboard
               </Link>

examples/auth/next-pages/README.md

@@ -1,10 +1,8 @@
 # Payload Auth Example Front-End
 
-This is a [Next.js](https://nextjs.org) [Pages Router](https://nextjs.org/docs/pages) front-end made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). This example demonstrates how to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
+This is a [Payload](https://payloadcms.com) + [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages) made explicitly for the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth). It demonstrates how  to authenticate your Next.js app using [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
 
-> This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/app), check out the official [App Router Example](https://github.com/payloadcms/payload/tree/main/examples/auth/next-app).
-
-**IMPORTANT—This application runs on a different server as Payload and establishes a connection from another domain or port over HTTP.** For an integrated setup that runs on a single server and uses the [Local API](https://payloadcms.com/docs/local-api/overview#local-api), check out [how to serve Payload alongside Next.js](https://github.com/payloadcms/payload/tree/main/examples/auth/payload). To learn more about this, check out [how Payload can be used in its various headless capacities](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload).
+> This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/pages), check out the official [App Router Example](https://github.com/payloadcms/payload/tree/main/examples/auth/next-app).
 
 ## Getting Started
 
@@ -15,10 +13,9 @@ First you'll need a running Payload app. There is one made explicitly for this e
 ### Next.js
 
 1. Clone this repo
-2. `cd` into this directory and run `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
-   > \*If you are running using pnpm within the Payload Monorepo, the `--ignore-workspace` flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.
+2. `cd` into this directory and run `yarn` or `npm install`
 3. `cp .env.example .env` to copy the example environment variables
-4. `pnpm i`, `yarn dev`, or `npm run dev` to start the server
+4. `yarn dev` or `npm run dev` to start the server
 5. `open http://localhost:3001` to see the result
 
 Once running, a user is automatically seeded in your local environment with some basic instructions. See the [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) for full details.

examples/auth/next-pages/src/pages/index.tsx

@@ -26,7 +26,7 @@ export default function Home() {
         {". This example demonstrates how to implement Payload's "}
         <Link href="https://payloadcms.com/docs/authentication/overview">Authentication</Link>
         {
-          ' strategies through HTTP using the REST and GraphQL APIs. To toggle between these two APIs, see `_app.tsx`.'
+          ' strategies in both the REST and GraphQL APIs. To toggle between these APIs, see `_app.tsx`.'
         }
       </p>
       <p>

examples/auth/next-pages/src/pages/recover-password/index.tsx

@@ -53,7 +53,7 @@ const RecoverPassword: React.FC = () => {
           <div className={classes.formWrapper}>
             <p>
               {`Please enter your email below. You will receive an email message with instructions on
-              how to reset your password. To manage all of your users, `}
+              how to reset your password. To manage your all users, `}
               <Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
                 login to the admin dashboard
               </Link>

examples/auth/payload/.env.example

@@ -1,7 +1,7 @@
-# NOTE: Change port of `PAYLOAD_PUBLIC_SITE_URL` if front-end is running on another server
-PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000
+PAYLOAD_PUBLIC_SITE_URL=http://localhost:3001
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
-NEXT_PUBLIC_SERVER_URL=http://localhost:3000
 DATABASE_URI=mongodb://127.0.0.1/payload-example-auth
 PAYLOAD_SECRET=PAYLOAD_AUTH_EXAMPLE_SECRET_KEY
 COOKIE_DOMAIN=localhost
+PAYLOAD_PUBLIC_SEED=true
+PAYLOAD_DROP_DATABASE=true

examples/auth/payload/.eslintignore

@@ -1,12 +0,0 @@
-.tmp
-**/.git
-**/.hg
-**/.pnp.*
-**/.svn
-**/.yarn/**
-**/build
-**/dist/**
-**/node_modules
-**/temp
-playwright.config.ts
-jest.config.js

examples/auth/payload/.eslintrc.cjs

@@ -1,15 +1,4 @@
 module.exports = {
-  extends: ['plugin:@next/next/core-web-vitals', '@payloadcms'],
-  ignorePatterns: ['**/payload-types.ts'],
-  overrides: [
-    {
-      extends: ['plugin:@typescript-eslint/disable-type-checked'],
-      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
-    },
-  ],
-  parserOptions: {
-    project: ['./tsconfig.json'],
-    tsconfigRootDir: __dirname,
-  },
   root: true,
+  extends: ['@payloadcms'],
 }

examples/auth/payload/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 100,
+  parser: 'typescript',
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'avoid',
+}

examples/auth/payload/README.md

@@ -1,103 +1,39 @@
 # Payload Auth Example
 
-This [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) demonstrates how to implement [Payload Authentication](https://payloadcms.com/docs/authentication/overview) into all types of applications. Follow the [Quick Start](#quick-start) to get up and running quickly.
-
-**IMPORTANT—This example includes a fully integrated Next.js App Router front-end that runs on the same server as Payload.** If you are working on an application running on an entirely separate server, there are various fully working, separately running front-ends made explicitly for this example, including:
+The [Payload Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth) demonstrates how to implement [Payload Authentication](https://payloadcms.com/docs/authentication/overview). Follow the [Quick Start](#quick-start) to get up and running quickly. There are various fully working front-ends made explicitly for this example, including:
 
 - [Next.js App Router](../next-app)
 - [Next.js Pages Router](../next-pages)
 
-Those applications run directly alongside this one. Follow the instructions in each respective README to get started. If you are setting up authentication for another front-end, please consider contributing to this repo with your own example!
-
-To learn more about this, [check out how Payload can be used in its various headless capacities](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload).
+Follow the instructions in each respective README to get started. If you are setting up authentication for another front-end, please consider contributing to this repo with your own example!
 
 ## Quick Start
 
 To spin up this example locally, follow these steps:
 
 1. Clone this repo
-1. `cd` into this directory and run `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
-
-   > \*If you are running using pnpm within the Payload Monorepo, the `--ignore-workspace` flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.
-
-1. `cp .env.example .env` to copy the example environment variables
-
-   > Adjust `PAYLOAD_PUBLIC_SITE_URL` in the `.env` if your front-end is running on a separate domain or port.
-
-1. `pnpm dev`, `yarn dev` or `npm run dev` to start the server
-   - Press `y` when prompted to seed the database
-1. `open http://localhost:3000` to access the home page
-1. `open http://localhost:3000/admin` to access the admin panel
-   - Login with email `demo@payloadcms.com` and password `demo`
+2. `cd` into this directory and run `yarn` or `npm install`
+3. `cp .env.example .env` to copy the example environment variables
+4. `yarn dev` or `npm run dev` to start the server and seed the database
+5. `open http://localhost:3000/admin` to access the admin panel
+6. Login with email `demo@payloadcms.com` and password `demo`
 
 That's it! Changes made in `./src` will be reflected in your app. See the [Development](#development) section for more details.
 
 ## How it works
 
-### Collections
+The `users` collection exposes all [auth-related operations](https://payloadcms.com/docs/authentication/operations) needed to create a fully custom workflow on your front-end using the REST or GraphQL APIs, including:
 
-See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend this functionality.
+- `Me`
+- `Login`
+- `Logout`
+- `Refresh Token`
+- `Verify Email`
+- `Unlock`
+- `Forgot Password`
+- `Reset Password`
 
-- #### Users (Authentication)
-
-  Users are auth-enabled and encompass both admins and regular users based on the value of their `roles` field. Only `admin` users can access your admin panel to manage your content whereas `user` can authenticate on your front-end and access-controlled interfaces. See [Access Control](#access-control) for more details.
-
-  **Local API**
-
-  On the server, Payload provides all operations needed to authenticate users server-side using the Local API. In Next.js that might look something like this:
-
-  ```ts
-    import { headers as getHeaders } from 'next/headers.js'
-    import { getPayloadHMR } from '@payloadcms/next'
-    import config from '../../payload.config'
-
-    export default async function AccountPage({ searchParams }) {
-      const headers = getHeaders()
-      const payload = await getPayloadHMR({ config: configPromise })
-      const { permissions, user } = await payload.auth({ headers })
-
-      if (!user) {
-        redirect(
-          `/login?error=${encodeURIComponent('You must be logged in to access your account.')}&redirect=/account`,
-        )
-      }
-
-      return ...
-    }
-  ```
-
-  **HTTP**
-
-  The `users` collection also opens an http-layer to expose all [auth-related operations](https://payloadcms.com/docs/authentication/operations) through the REST and GraphQL APIs, including:
-
-  - `Me`
-  - `Login`
-  - `Logout`
-  - `Refresh Token`
-  - `Verify Email`
-  - `Unlock`
-  - `Forgot Password`
-  - `Reset Password`
-
-  This might look something like this:
-
-  ```ts
-  await fetch('/api/users/me', {
-    method: 'GET',
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  })
-  ```
-
-  > NOTE: You can still use the HTTP APIs on the server if you don't have access to the Local API.
-
-### Security
-
-The [`cors`](https://payloadcms.com/docs/production/preventing-abuse#cross-origin-resource-sharing-cors), [`csrf`](https://payloadcms.com/docs/production/preventing-abuse#cross-site-request-forgery-csrf), and [`cookies`](https://payloadcms.com/docs/authentication/config#options) settings are all configured to ensure that the admin panel and front-end can communicate with each other securely.
-
-For additional help, see the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs.
+The [`cors`](https://payloadcms.com/docs/production/preventing-abuse#cross-origin-resource-sharing-cors), [`csrf`](https://payloadcms.com/docs/production/preventing-abuse#cross-site-request-forgery-csrf), and [`cookies`](https://payloadcms.com/docs/authentication/config#options) settings are also configured to ensure that the admin panel and front-end can communicate with each other securely.
 
 ### Access Control
 
@@ -114,7 +50,7 @@ To spin up this example locally, follow the [Quick Start](#quick-start).
 
 ### Seed
 
-On boot, a seed migration performed to create a user with email `demo@payloadcms.com`, password `demo`, the role `admin`.
+On boot, a seed script is included to create a user with email `demo@payloadcms.com`, password `demo`, the role `admin`.
 
 > NOTICE: seeding the database is destructive because it drops your current database to populate a fresh one from the seed template. Only run this command if you are starting a new project or can afford to lose your current data.
 
@@ -122,17 +58,14 @@ On boot, a seed migration performed to create a user with email `demo@payloadcms
 
 To run Payload in production, you need to build and serve the Admin panel. To do so, follow these steps:
 
-1. First invoke the `payload build` script by running `pnpm build`, `yarn build`, or `npm run build` in your project root. This creates a `./build` directory with a production-ready admin bundle.
-1. Then run `pnpm serve`, `yarn serve`, or `npm run serve` to run Node.js in production and serve Payload from the `./build` directory.
+1. First invoke the `payload build` script by running `yarn build` or `npm run build` in your project root. This creates a `./build` directory with a production-ready admin bundle.
+1. Then run `yarn serve` or `npm run serve` to run Node in production and serve Payload from the `./build` directory.
 
 ### Deployment
 
-If you are using an integrated Next.js setup, the easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js. Otherwise, easiest way to deploy your project is to use [Payload Cloud](https://payloadcms.com/new/import), a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the [deployment documentation](https://payloadcms.com/docs/production/deployment) for full details.
+The easiest way to deploy your project is to use [Payload Cloud](https://payloadcms.com/new/import), a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the [deployment documentation](https://payloadcms.com/docs/production/deployment) for full details.
 
 ## Questions
 
 If you have any issues or questions, reach out to us on [Discord](https://discord.com/invite/payload) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions).
 
-```
-
-```

examples/auth/payload/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/auth/payload/next.config.mjs

@@ -1,8 +0,0 @@
-import { withPayload } from '@payloadcms/next/withPayload'
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Your Next.js config here
-}
-
-export default withPayload(nextConfig)

examples/auth/payload/package.json

@@ -1,43 +1,48 @@
 {
   "name": "payload-example-auth",
-  "version": "1.0.0",
   "description": "Payload authentication example.",
-  "license": "MIT",
+  "version": "1.0.0",
   "main": "dist/server.js",
+  "license": "MIT",
   "scripts": {
-    "build": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts NODE_OPTIONS=--no-deprecation next build",
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts && pnpm seed && cross-env NODE_OPTIONS=--no-deprecation next dev",
-    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
+    "dev": "cross-env PAYLOAD_PUBLIC_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
+    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
+    "build:server": "tsc",
+    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
+    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
     "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
-    "lint:fix": "eslint --fix --ext .ts,.tsx src",
-    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload",
-    "seed": "npm run payload migrate:fresh",
-    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
+    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
+    "lint": "eslint src",
+    "lint:fix": "eslint --fix --ext .ts,.tsx src"
   },
   "dependencies": {
-    "@payloadcms/db-mongodb": "3.0.0-beta.24",
-    "@payloadcms/next": "3.0.0-beta.24",
-    "@payloadcms/richtext-slate": "3.0.0-beta.24",
-    "@payloadcms/ui": "3.0.0-beta.24",
-    "cross-env": "^7.0.3",
-    "next": "14.3.0-canary.7",
-    "payload": "3.0.0-beta.24",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.3"
+    "@payloadcms/bundler-webpack": "latest",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/richtext-slate": "latest",
+    "dotenv": "^8.2.0",
+    "express": "^4.17.1",
+    "payload": "latest"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.1.6",
-    "@payloadcms/eslint-config": "^1.1.1",
-    "@swc/core": "^1.4.14",
-    "@swc/types": "^0.1.6",
-    "@types/node": "^20.11.25",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
-    "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
-    "tsx": "^4.7.1",
-    "typescript": "5.4.4"
+    "@payloadcms/eslint-config": "^0.0.1",
+    "@types/express": "^4.17.9",
+    "@types/node": "18.11.3",
+    "@types/react": "18.0.21",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "nodemon": "^2.0.6",
+    "prettier": "^2.7.1",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.8.4"
   }
 }

examples/auth/payload/src/app/(app)/_components/Button/index.module.scss

@@ -1,40 +0,0 @@
-@import '../../_css/type.scss';
-
-.button {
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  background-color: transparent;
-  text-decoration: none;
-  display: inline-flex;
-  padding: 12px 24px;
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-
-.label {
-  @extend %label;
-  text-align: center;
-  display: flex;
-  align-items: center;
-}
-
-.appearance--primary {
-  background-color: var(--theme-elevation-1000);
-  color: var(--theme-elevation-0);
-}
-
-.appearance--secondary {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--theme-elevation-1000);
-}
-
-.appearance--default {
-  padding: 0;
-  color: var(--theme-text);
-}

examples/auth/payload/src/app/(app)/_components/Button/index.tsx

@@ -1,77 +0,0 @@
-'use client'
-
-import type { ElementType } from 'react';
-
-import Link from 'next/link'
-import React from 'react'
-
-import classes from './index.module.scss'
-
-export type Props = {
-  appearance?: 'default' | 'primary' | 'secondary'
-  className?: string
-  disabled?: boolean
-  el?: 'a' | 'button' | 'link'
-  href?: string
-  invert?: boolean
-  label?: string
-  newTab?: boolean
-  onClick?: () => void
-  type?: 'button' | 'submit'
-}
-
-export const Button: React.FC<Props> = ({
-  type = 'button',
-  appearance,
-  className: classNameFromProps,
-  disabled,
-  el: elFromProps = 'link',
-  href,
-  invert,
-  label,
-  newTab,
-  onClick,
-}) => {
-  let el = elFromProps
-  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
-
-  const className = [
-    classes.button,
-    classNameFromProps,
-    classes[`appearance--${appearance}`],
-    invert && classes[`${appearance}--invert`],
-  ]
-    .filter(Boolean)
-    .join(' ')
-
-  const content = (
-    <div className={classes.content}>
-      <span className={classes.label}>{label}</span>
-    </div>
-  )
-
-  if (onClick || type === 'submit') el = 'button'
-
-  if (el === 'link') {
-    return (
-      <Link className={className} href={href || ''} {...newTabProps} onClick={onClick}>
-        {content}
-      </Link>
-    )
-  }
-
-  const Element: ElementType = el
-
-  return (
-    <Element
-      className={className}
-      href={href}
-      type={type}
-      {...newTabProps}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {content}
-    </Element>
-  )
-}

examples/auth/payload/src/app/(app)/_components/Gutter/index.module.scss

@@ -1,13 +0,0 @@
-.gutter {
-  max-width: 1920px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.gutterLeft {
-  padding-left: var(--gutter-h);
-}
-
-.gutterRight {
-  padding-right: var(--gutter-h);
-}

examples/auth/payload/src/app/(app)/_components/Gutter/index.tsx

@@ -1,35 +0,0 @@
-import type { Ref } from 'react';
-
-import React, { forwardRef } from 'react'
-
-import classes from './index.module.scss'
-
-type Props = {
-  children: React.ReactNode
-  className?: string
-  left?: boolean
-  ref?: Ref<HTMLDivElement>
-  right?: boolean
-}
-
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
-
-  return (
-    <div
-      className={[
-        classes.gutter,
-        left && classes.gutterLeft,
-        right && classes.gutterRight,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      ref={ref}
-    >
-      {children}
-    </div>
-  )
-})
-
-Gutter.displayName = 'Gutter'

examples/auth/payload/src/app/(app)/_components/Header/Nav/index.module.scss

@@ -1,20 +0,0 @@
-@use '../../../_css/queries.scss' as *;
-
-.nav {
-  display: flex;
-  gap: calc(var(--base) / 4) var(--base);
-  align-items: center;
-  flex-wrap: wrap;
-  opacity: 1;
-  transition: opacity 100ms linear;
-  visibility: visible;
-
-  > * {
-    text-decoration: none;
-  }
-}
-
-.hide {
-  opacity: 0;
-  visibility: hidden;
-}

examples/auth/payload/src/app/(app)/_components/Header/Nav/index.tsx

@@ -1,37 +0,0 @@
-'use client'
-
-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()
-
-  return (
-    <nav
-      className={[
-        classes.nav,
-        // fade the nav in on user load to avoid flash of content and layout shift
-        // Vercel also does this in their own website header, see https://vercel.com
-        user === undefined && classes.hide,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {user && (
-        <React.Fragment>
-          <Link href="/account">Account</Link>
-          <Link href="/logout">Logout</Link>
-        </React.Fragment>
-      )}
-      {!user && (
-        <React.Fragment>
-          <Link href="/login">Login</Link>
-          <Link href="/create-account">Create Account</Link>
-        </React.Fragment>
-      )}
-    </nav>
-  )
-}

examples/auth/payload/src/app/(app)/_components/Header/index.module.scss

@@ -1,22 +0,0 @@
-@use '../../_css/queries.scss' as *;
-
-.header {
-  padding: var(--base) 0;
-}
-
-.wrap {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: calc(var(--base) / 2) var(--base);
-}
-
-.logo {
-  width: 150px;
-}
-
-:global([data-theme="light"]) {
-  .logo {
-    filter: invert(1);
-  }
-}

examples/auth/payload/src/app/(app)/_components/Header/index.tsx

@@ -1,33 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import React from 'react'
-
-import { Gutter } from '../Gutter'
-import { HeaderNav } from './Nav'
-import classes from './index.module.scss'
-
-export function Header() {
-  return (
-    <header className={classes.header}>
-      <Gutter className={classes.wrap}>
-        <Link className={classes.logo} href="/">
-          <picture>
-            <source
-              media="(prefers-color-scheme: dark)"
-              srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
-            />
-            <Image
-              alt="Payload Logo"
-              height={30}
-              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-dark.svg"
-              width={150}
-            />
-          </picture>
-        </Link>
-        <HeaderNav />
-      </Gutter>
-    </header>
-  )
-}
-
-export default Header

examples/auth/payload/src/app/(app)/_components/HydrateClientUser/index.tsx

@@ -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
-}

examples/auth/payload/src/app/(app)/_components/Input/index.module.scss

@@ -1,56 +0,0 @@
-@import '../../_css/common';
-
-.inputWrap {
-  width: 100%;
-}
-
-.input {
-  width: 100%;
-  font-family: system-ui;
-  border-radius: 0;
-  box-shadow: none;
-  border: none;
-  background: none;
-  background-color: var(--theme-elevation-100);
-  color: var(--theme-elevation-1000);
-  height: calc(var(--base) * 2);
-  line-height: calc(var(--base) * 2);
-  padding: 0 calc(var(--base) / 2);
-
-  &:focus {
-    border: none;
-    outline: none;
-  }
-
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus {
-    -webkit-text-fill-color: var(--theme-text);
-    -webkit-box-shadow: 0 0 0px 1000px var(--theme-elevation-150) inset;
-    transition: background-color 5000s ease-in-out 0s;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .input {
-    background-color: var(--theme-elevation-150);
-  }
-}
-
-.error {
-  background-color: var(--theme-error-150);
-}
-
-.label {
-  margin-bottom: 0;
-  display: block;
-  line-height: 1;
-  margin-bottom: calc(var(--base) / 2);
-}
-
-.errorMessage {
-  font-size: small;
-  line-height: 1.25;
-  margin-top: 4px;
-  color: red;
-}

examples/auth/payload/src/app/(app)/_components/Input/index.tsx

@@ -1,56 +0,0 @@
-import type { FieldValues, UseFormRegister } from 'react-hook-form'
-
-import React from 'react'
-
-import classes from './index.module.scss'
-
-type Props = {
-  error: any
-  label: string
-  name: string
-  register: UseFormRegister<FieldValues & any> // eslint-disable-line @typescript-eslint/no-redundant-type-constituents
-  required?: boolean
-  type?: 'email' | 'number' | 'password' | 'text'
-  validate?: (value: string) => boolean | string
-}
-
-export const Input: React.FC<Props> = ({
-  name,
-  type = 'text',
-  error,
-  label,
-  register,
-  required,
-  validate,
-}) => {
-  return (
-    <div className={classes.inputWrap}>
-      <label className={classes.label} htmlFor="name">
-        {`${label} ${required ? '*' : ''}`}
-      </label>
-      <input
-        className={[classes.input, error && classes.error].filter(Boolean).join(' ')}
-        {...{ type }}
-        {...register(name, {
-          required,
-          validate,
-          ...(type === 'email'
-            ? {
-                pattern: {
-                  message: 'Please enter a valid email',
-                  value: /\S[^\s@]*@\S+\.\S+/,
-                },
-              }
-            : {}),
-        })}
-      />
-      {error && (
-        <div className={classes.errorMessage}>
-          {!error?.message && error?.type === 'required'
-            ? 'This field is required'
-            : error?.message}
-        </div>
-      )}
-    </div>
-  )
-}

examples/auth/payload/src/app/(app)/_components/Message/index.module.scss

@@ -1,46 +0,0 @@
-@import '../../_css/common';
-
-.message {
-  padding: calc(var(--base) / 2) calc(var(--base) / 2);
-  line-height: 1.25;
-  width: 100%;
-}
-
-.default {
-  background-color: var(--theme-elevation-100);
-  color: var(--theme-elevation-1000);
-}
-
-.warning {
-  background-color: var(--theme-warning-500);
-  color: var(--theme-warning-900);
-}
-
-.error {
-  background-color: var(--theme-error-500);
-  color: var(--theme-error-900);
-}
-
-.success {
-  background-color: var(--theme-success-500);
-  color: var(--theme-success-900);
-}
-
-@media (prefers-color-scheme: dark) {
-  .default {
-    background-color: var(--theme-elevation-900);
-    color: var(--theme-elevation-100);
-  }
-
-  .warning {
-    color: var(--theme-warning-100);
-  }
-
-  .error {
-    color: var(--theme-error-100);
-  }
-
-  .success {
-    color: var(--theme-success-100);
-  }
-}

examples/auth/payload/src/app/(app)/_components/Message/index.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import classes from './index.module.scss'
-
-export const Message: React.FC<{
-  className?: string
-  error?: React.ReactNode
-  message?: React.ReactNode
-  success?: React.ReactNode
-  warning?: React.ReactNode
-}> = ({ className, error, message, success, warning }) => {
-  const messageToRender = message || error || success || warning
-
-  if (messageToRender) {
-    return (
-      <div
-        className={[
-          classes.message,
-          className,
-          error && classes.error,
-          success && classes.success,
-          warning && classes.warning,
-          !error && !success && !warning && classes.default,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {messageToRender}
-      </div>
-    )
-  }
-  return null
-}

examples/auth/payload/src/app/(app)/_components/RenderParams/index.tsx

@@ -1,29 +0,0 @@
-'use client'
-import { useSearchParams } from 'next/navigation'
-import React from 'react'
-
-import { Message } from '../Message'
-
-export const RenderParams: React.FC<{
-  className?: string
-  message?: string
-  params?: string[]
-}> = ({ className, message, params = ['error', 'message', 'success'] }) => {
-  const searchParams = useSearchParams()
-  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
-
-  if (paramValues.length) {
-    return (
-      <div className={className}>
-        {paramValues.map(paramValue => (
-          <Message
-            key={paramValue}
-            message={(message || 'PARAM')?.replace('PARAM', paramValue || '')}
-          />
-        ))}
-      </div>
-    )
-  }
-
-  return null
-}

examples/auth/payload/src/app/(app)/_components/RichText/index.module.scss

@@ -1,9 +0,0 @@
-.richText {
-  :first-child {
-    margin-top: 0;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-}

examples/auth/payload/src/app/(app)/_components/RichText/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import classes from './index.module.scss'
-import serialize from './serialize'
-
-const RichText: React.FC<{ className?: string; content: any }> = ({ className, content }) => {
-  if (!content) {
-    return null
-  }
-
-  return (
-    <div className={[classes.richText, className].filter(Boolean).join(' ')}>
-      {serialize(content)}
-    </div>
-  )
-}
-
-export default RichText

examples/auth/payload/src/app/(app)/_components/RichText/serialize.tsx

@@ -1,92 +0,0 @@
-import escapeHTML from 'escape-html'
-import React, { Fragment } from 'react'
-import { Text } from 'slate'
-
-// eslint-disable-next-line no-use-before-define
-type Children = Leaf[]
-
-type Leaf = {
-  [key: string]: unknown
-  children: Children
-  type: string
-  url?: string
-  value?: {
-    alt: string
-    url: string
-  }
-}
-
-const serialize = (children: Children): React.ReactNode[] =>
-  children.map((node, i) => {
-    if (Text.isText(node)) {
-      let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
-
-      if (node.bold) {
-        text = <strong key={i}>{text}</strong>
-      }
-
-      if (node.code) {
-        text = <code key={i}>{text}</code>
-      }
-
-      if (node.italic) {
-        text = <em key={i}>{text}</em>
-      }
-
-      if (node.underline) {
-        text = (
-          <span key={i} style={{ textDecoration: 'underline' }}>
-            {text}
-          </span>
-        )
-      }
-
-      if (node.strikethrough) {
-        text = (
-          <span key={i} style={{ textDecoration: 'line-through' }}>
-            {text}
-          </span>
-        )
-      }
-
-      return <Fragment key={i}>{text}</Fragment>
-    }
-
-    if (!node) {
-      return null
-    }
-
-    switch (node.type) {
-      case 'h1':
-        return <h1 key={i}>{serialize(node.children)}</h1>
-      case 'h2':
-        return <h2 key={i}>{serialize(node.children)}</h2>
-      case 'h3':
-        return <h3 key={i}>{serialize(node.children)}</h3>
-      case 'h4':
-        return <h4 key={i}>{serialize(node.children)}</h4>
-      case 'h5':
-        return <h5 key={i}>{serialize(node.children)}</h5>
-      case 'h6':
-        return <h6 key={i}>{serialize(node.children)}</h6>
-      case 'blockquote':
-        return <blockquote key={i}>{serialize(node.children)}</blockquote>
-      case 'ul':
-        return <ul key={i}>{serialize(node.children)}</ul>
-      case 'ol':
-        return <ol key={i}>{serialize(node.children)}</ol>
-      case 'li':
-        return <li key={i}>{serialize(node.children)}</li>
-      case 'link':
-        return (
-          <a href={escapeHTML(node.url)} key={i}>
-            {serialize(node.children)}
-          </a>
-        )
-
-      default:
-        return <p key={i}>{serialize(node.children)}</p>
-    }
-  })
-
-export default serialize

examples/auth/payload/src/app/(app)/_css/app.scss

@@ -1,117 +0,0 @@
-@use './queries.scss' as *;
-@use './colors.scss' as *;
-@use './type.scss' as *;
-@import './theme.scss';
-
-:root {
-  --base: 24px;
-  --font-body: system-ui;
-  --font-mono: 'Roboto Mono', monospace;
-
-  --gutter-h: 180px;
-  --block-padding: 120px;
-
-  @include large-break {
-    --gutter-h: 144px;
-    --block-padding: 96px;
-  }
-
-  @include mid-break {
-    --gutter-h: 24px;
-    --block-padding: 60px;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  @extend %body;
-  background: var(--theme-bg);
-  -webkit-font-smoothing: antialiased;
-}
-
-html,
-body,
-#app {
-  height: 100%;
-}
-
-body {
-  font-family: var(--font-body);
-  margin: 0;
-  color: var(--theme-text);
-}
-
-::selection {
-  background: var(--theme-success-500);
-  color: var(--color-base-800);
-}
-
-::-moz-selection {
-  background: var(--theme-success-500);
-  color: var(--color-base-800);
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-h1 {
-  @extend %h1;
-}
-
-h2 {
-  @extend %h2;
-}
-
-h3 {
-  @extend %h3;
-}
-
-h4 {
-  @extend %h4;
-}
-
-h5 {
-  @extend %h5;
-}
-
-h6 {
-  @extend %h6;
-}
-
-p {
-  margin: var(--base) 0;
-
-  @include mid-break {
-    margin: calc(var(--base) * 0.75) 0;
-  }
-}
-
-ul,
-ol {
-  padding-left: var(--base);
-  margin: 0 0 var(--base);
-}
-
-a {
-  color: currentColor;
-
-  &:focus {
-    opacity: 0.8;
-    outline: none;
-  }
-
-  &:active {
-    opacity: 0.7;
-    outline: none;
-  }
-}
-
-svg {
-  vertical-align: middle;
-}

examples/auth/payload/src/app/(app)/_css/colors.scss

@@ -1,83 +0,0 @@
-:root {
-  --color-base-0: rgb(255, 255, 255);
-  --color-base-50: rgb(245, 245, 245);
-  --color-base-100: rgb(235, 235, 235);
-  --color-base-150: rgb(221, 221, 221);
-  --color-base-200: rgb(208, 208, 208);
-  --color-base-250: rgb(195, 195, 195);
-  --color-base-300: rgb(181, 181, 181);
-  --color-base-350: rgb(168, 168, 168);
-  --color-base-400: rgb(154, 154, 154);
-  --color-base-450: rgb(141, 141, 141);
-  --color-base-500: rgb(128, 128, 128);
-  --color-base-550: rgb(114, 114, 114);
-  --color-base-600: rgb(101, 101, 101);
-  --color-base-650: rgb(87, 87, 87);
-  --color-base-700: rgb(74, 74, 74);
-  --color-base-750: rgb(60, 60, 60);
-  --color-base-800: rgb(47, 47, 47);
-  --color-base-850: rgb(34, 34, 34);
-  --color-base-900: rgb(20, 20, 20);
-  --color-base-950: rgb(7, 7, 7);
-  --color-base-1000: rgb(0, 0, 0);
-
-  --color-success-50: rgb(247, 255, 251);
-  --color-success-100: rgb(240, 255, 247);
-  --color-success-150: rgb(232, 255, 243);
-  --color-success-200: rgb(224, 255, 239);
-  --color-success-250: rgb(217, 255, 235);
-  --color-success-300: rgb(209, 255, 230);
-  --color-success-350: rgb(201, 255, 226);
-  --color-success-400: rgb(193, 255, 222);
-  --color-success-450: rgb(186, 255, 218);
-  --color-success-500: rgb(178, 255, 214);
-  --color-success-550: rgb(160, 230, 193);
-  --color-success-600: rgb(142, 204, 171);
-  --color-success-650: rgb(125, 179, 150);
-  --color-success-700: rgb(107, 153, 128);
-  --color-success-750: rgb(89, 128, 107);
-  --color-success-800: rgb(71, 102, 86);
-  --color-success-850: rgb(53, 77, 64);
-  --color-success-900: rgb(36, 51, 43);
-  --color-success-950: rgb(18, 25, 21);
-
-  --color-warning-50: rgb(255, 255, 246);
-  --color-warning-100: rgb(255, 255, 237);
-  --color-warning-150: rgb(254, 255, 228);
-  --color-warning-200: rgb(254, 255, 219);
-  --color-warning-250: rgb(254, 255, 210);
-  --color-warning-300: rgb(254, 255, 200);
-  --color-warning-350: rgb(254, 255, 191);
-  --color-warning-400: rgb(253, 255, 182);
-  --color-warning-450: rgb(253, 255, 173);
-  --color-warning-500: rgb(253, 255, 164);
-  --color-warning-550: rgb(228, 230, 148);
-  --color-warning-600: rgb(202, 204, 131);
-  --color-warning-650: rgb(177, 179, 115);
-  --color-warning-700: rgb(152, 153, 98);
-  --color-warning-750: rgb(127, 128, 82);
-  --color-warning-800: rgb(101, 102, 66);
-  --color-warning-850: rgb(76, 77, 49);
-  --color-warning-900: rgb(51, 51, 33);
-  --color-warning-950: rgb(25, 25, 16);
-
-  --color-error-50: rgb(255, 241, 241);
-  --color-error-100: rgb(255, 226, 228);
-  --color-error-150: rgb(255, 212, 214);
-  --color-error-200: rgb(255, 197, 200);
-  --color-error-250: rgb(255, 183, 187);
-  --color-error-300: rgb(255, 169, 173);
-  --color-error-350: rgb(255, 154, 159);
-  --color-error-400: rgb(255, 140, 145);
-  --color-error-450: rgb(255, 125, 132);
-  --color-error-500: rgb(255, 111, 118);
-  --color-error-550: rgb(230, 100, 106);
-  --color-error-600: rgb(204, 89, 94);
-  --color-error-650: rgb(179, 78, 83);
-  --color-error-700: rgb(153, 67, 71);
-  --color-error-750: rgb(128, 56, 59);
-  --color-error-800: rgb(102, 44, 47);
-  --color-error-850: rgb(77, 33, 35);
-  --color-error-900: rgb(51, 22, 24);
-  --color-error-950: rgb(25, 11, 12);
-}

examples/auth/payload/src/app/(app)/_css/common.scss

@@ -1 +0,0 @@
-@forward './queries.scss';

examples/auth/payload/src/app/(app)/_css/queries.scss

@@ -1,28 +0,0 @@
-$breakpoint-xs-width: 400px;
-$breakpoint-s-width: 768px;
-$breakpoint-m-width: 1024px;
-$breakpoint-l-width: 1440px;
-
-@mixin extra-small-break {
-  @media (max-width: #{$breakpoint-xs-width}) {
-    @content;
-  }
-}
-
-@mixin small-break {
-  @media (max-width: #{$breakpoint-s-width}) {
-    @content;
-  }
-}
-
-@mixin mid-break {
-  @media (max-width: #{$breakpoint-m-width}) {
-    @content;
-  }
-}
-
-@mixin large-break {
-  @media (max-width: #{$breakpoint-l-width}) {
-    @content;
-  }
-}

examples/auth/payload/src/app/(app)/_css/theme.scss

@@ -1,241 +0,0 @@
-@media (prefers-color-scheme: light) {
-  :root {
-    --theme-success-50: var(--color-success-50);
-    --theme-success-100: var(--color-success-100);
-    --theme-success-150: var(--color-success-150);
-    --theme-success-200: var(--color-success-200);
-    --theme-success-250: var(--color-success-250);
-    --theme-success-300: var(--color-success-300);
-    --theme-success-350: var(--color-success-350);
-    --theme-success-400: var(--color-success-400);
-    --theme-success-450: var(--color-success-450);
-    --theme-success-500: var(--color-success-500);
-    --theme-success-550: var(--color-success-550);
-    --theme-success-600: var(--color-success-600);
-    --theme-success-650: var(--color-success-650);
-    --theme-success-700: var(--color-success-700);
-    --theme-success-750: var(--color-success-750);
-    --theme-success-800: var(--color-success-800);
-    --theme-success-850: var(--color-success-850);
-    --theme-success-900: var(--color-success-900);
-    --theme-success-950: var(--color-success-950);
-
-    --theme-warning-50: var(--color-warning-50);
-    --theme-warning-100: var(--color-warning-100);
-    --theme-warning-150: var(--color-warning-150);
-    --theme-warning-200: var(--color-warning-200);
-    --theme-warning-250: var(--color-warning-250);
-    --theme-warning-300: var(--color-warning-300);
-    --theme-warning-350: var(--color-warning-350);
-    --theme-warning-400: var(--color-warning-400);
-    --theme-warning-450: var(--color-warning-450);
-    --theme-warning-500: var(--color-warning-500);
-    --theme-warning-550: var(--color-warning-550);
-    --theme-warning-600: var(--color-warning-600);
-    --theme-warning-650: var(--color-warning-650);
-    --theme-warning-700: var(--color-warning-700);
-    --theme-warning-750: var(--color-warning-750);
-    --theme-warning-800: var(--color-warning-800);
-    --theme-warning-850: var(--color-warning-850);
-    --theme-warning-900: var(--color-warning-900);
-    --theme-warning-950: var(--color-warning-950);
-
-    --theme-error-50: var(--color-error-50);
-    --theme-error-100: var(--color-error-100);
-    --theme-error-150: var(--color-error-150);
-    --theme-error-200: var(--color-error-200);
-    --theme-error-250: var(--color-error-250);
-    --theme-error-300: var(--color-error-300);
-    --theme-error-350: var(--color-error-350);
-    --theme-error-400: var(--color-error-400);
-    --theme-error-450: var(--color-error-450);
-    --theme-error-500: var(--color-error-500);
-    --theme-error-550: var(--color-error-550);
-    --theme-error-600: var(--color-error-600);
-    --theme-error-650: var(--color-error-650);
-    --theme-error-700: var(--color-error-700);
-    --theme-error-750: var(--color-error-750);
-    --theme-error-800: var(--color-error-800);
-    --theme-error-850: var(--color-error-850);
-    --theme-error-900: var(--color-error-900);
-    --theme-error-950: var(--color-error-950);
-
-    --theme-elevation-0: var(--color-base-0);
-    --theme-elevation-50: var(--color-base-50);
-    --theme-elevation-100: var(--color-base-100);
-    --theme-elevation-150: var(--color-base-150);
-    --theme-elevation-200: var(--color-base-200);
-    --theme-elevation-250: var(--color-base-250);
-    --theme-elevation-300: var(--color-base-300);
-    --theme-elevation-350: var(--color-base-350);
-    --theme-elevation-400: var(--color-base-400);
-    --theme-elevation-450: var(--color-base-450);
-    --theme-elevation-500: var(--color-base-500);
-    --theme-elevation-550: var(--color-base-550);
-    --theme-elevation-600: var(--color-base-600);
-    --theme-elevation-650: var(--color-base-650);
-    --theme-elevation-700: var(--color-base-700);
-    --theme-elevation-750: var(--color-base-750);
-    --theme-elevation-800: var(--color-base-800);
-    --theme-elevation-850: var(--color-base-850);
-    --theme-elevation-900: var(--color-base-900);
-    --theme-elevation-950: var(--color-base-950);
-    --theme-elevation-1000: var(--color-base-1000);
-
-    --theme-bg: var(--theme-elevation-0);
-    --theme-input-bg: var(--theme-elevation-50);
-    --theme-text: var(--theme-elevation-750);
-    --theme-border-color: var(--theme-elevation-150);
-
-    color-scheme: light;
-    color: var(--theme-text);
-
-    --highlight-default-bg-color: var(--theme-success-400);
-    --highlight-default-text-color: var(--theme-text);
-
-    --highlight-danger-bg-color: var(--theme-error-150);
-    --highlight-danger-text-color: var(--theme-text);
-  }
-
-  h1 a,
-  h2 a,
-  h3 a,
-  h4 a,
-  h5 a,
-  h6 a {
-    color: var(--theme-elevation-750);
-
-    &:hover {
-      color: var(--theme-elevation-800);
-    }
-
-    &:visited {
-      color: var(--theme-elevation-750);
-
-      &:hover {
-        color: var(--theme-elevation-800);
-      }
-    }
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --theme-elevation-0: var(--color-base-1000);
-    --theme-elevation-50: var(--color-base-950);
-    --theme-elevation-100: var(--color-base-900);
-    --theme-elevation-150: var(--color-base-850);
-    --theme-elevation-200: var(--color-base-800);
-    --theme-elevation-250: var(--color-base-750);
-    --theme-elevation-300: var(--color-base-700);
-    --theme-elevation-350: var(--color-base-650);
-    --theme-elevation-400: var(--color-base-600);
-    --theme-elevation-450: var(--color-base-550);
-    --theme-elevation-500: var(--color-base-500);
-    --theme-elevation-550: var(--color-base-450);
-    --theme-elevation-600: var(--color-base-400);
-    --theme-elevation-650: var(--color-base-350);
-    --theme-elevation-700: var(--color-base-300);
-    --theme-elevation-750: var(--color-base-250);
-    --theme-elevation-800: var(--color-base-200);
-    --theme-elevation-850: var(--color-base-150);
-    --theme-elevation-900: var(--color-base-100);
-    --theme-elevation-950: var(--color-base-50);
-    --theme-elevation-1000: var(--color-base-0);
-
-    --theme-success-50: var(--color-success-950);
-    --theme-success-100: var(--color-success-900);
-    --theme-success-150: var(--color-success-850);
-    --theme-success-200: var(--color-success-800);
-    --theme-success-250: var(--color-success-750);
-    --theme-success-300: var(--color-success-700);
-    --theme-success-350: var(--color-success-650);
-    --theme-success-400: var(--color-success-600);
-    --theme-success-450: var(--color-success-550);
-    --theme-success-500: var(--color-success-500);
-    --theme-success-550: var(--color-success-450);
-    --theme-success-600: var(--color-success-400);
-    --theme-success-650: var(--color-success-350);
-    --theme-success-700: var(--color-success-300);
-    --theme-success-750: var(--color-success-250);
-    --theme-success-800: var(--color-success-200);
-    --theme-success-850: var(--color-success-150);
-    --theme-success-900: var(--color-success-100);
-    --theme-success-950: var(--color-success-50);
-
-    --theme-warning-50: var(--color-warning-950);
-    --theme-warning-100: var(--color-warning-900);
-    --theme-warning-150: var(--color-warning-850);
-    --theme-warning-200: var(--color-warning-800);
-    --theme-warning-250: var(--color-warning-750);
-    --theme-warning-300: var(--color-warning-700);
-    --theme-warning-350: var(--color-warning-650);
-    --theme-warning-400: var(--color-warning-600);
-    --theme-warning-450: var(--color-warning-550);
-    --theme-warning-500: var(--color-warning-500);
-    --theme-warning-550: var(--color-warning-450);
-    --theme-warning-600: var(--color-warning-400);
-    --theme-warning-650: var(--color-warning-350);
-    --theme-warning-700: var(--color-warning-300);
-    --theme-warning-750: var(--color-warning-250);
-    --theme-warning-800: var(--color-warning-200);
-    --theme-warning-850: var(--color-warning-150);
-    --theme-warning-900: var(--color-warning-100);
-    --theme-warning-950: var(--color-warning-50);
-
-    --theme-error-50: var(--color-error-950);
-    --theme-error-100: var(--color-error-900);
-    --theme-error-150: var(--color-error-850);
-    --theme-error-200: var(--color-error-800);
-    --theme-error-250: var(--color-error-750);
-    --theme-error-300: var(--color-error-700);
-    --theme-error-350: var(--color-error-650);
-    --theme-error-400: var(--color-error-600);
-    --theme-error-450: var(--color-error-550);
-    --theme-error-500: var(--color-error-500);
-    --theme-error-550: var(--color-error-450);
-    --theme-error-600: var(--color-error-400);
-    --theme-error-650: var(--color-error-350);
-    --theme-error-700: var(--color-error-300);
-    --theme-error-750: var(--color-error-250);
-    --theme-error-800: var(--color-error-200);
-    --theme-error-850: var(--color-error-150);
-    --theme-error-900: var(--color-error-100);
-    --theme-error-950: var(--color-error-50);
-
-    --theme-bg: var(--theme-elevation-100);
-    --theme-text: var(--theme-elevation-900);
-    --theme-input-bg: var(--theme-elevation-150);
-    --theme-border-color: var(--theme-elevation-250);
-
-    color-scheme: dark;
-    color: var(--theme-text);
-
-    --highlight-default-bg-color: var(--theme-success-100);
-    --highlight-default-text-color: var(--theme-success-600);
-
-    --highlight-danger-bg-color: var(--theme-error-100);
-    --highlight-danger-text-color: var(--theme-error-550);
-  }
-
-  h1 a,
-  h2 a,
-  h3 a,
-  h4 a,
-  h5 a,
-  h6 a {
-    color: var(--theme-success-600);
-
-    &:hover {
-      color: var(--theme-success-400);
-    }
-
-    &:visited {
-      color: var(--theme-success-700);
-
-      &:hover {
-        color: var(--theme-success-500);
-      }
-    }
-  }
-}

examples/auth/payload/src/app/(app)/_css/type.scss

@@ -1,110 +0,0 @@
-@use 'queries' as *;
-
-%h1,
-%h2,
-%h3,
-%h4,
-%h5,
-%h6 {
-  font-weight: 700;
-}
-
-%h1 {
-  margin: 40px 0;
-  font-size: 64px;
-  line-height: 70px;
-  font-weight: bold;
-
-  @include mid-break {
-    margin: 24px 0;
-    font-size: 42px;
-    line-height: 42px;
-  }
-}
-
-%h2 {
-  margin: 28px 0;
-  font-size: 48px;
-  line-height: 54px;
-  font-weight: bold;
-
-  @include mid-break {
-    margin: 22px 0;
-    font-size: 32px;
-    line-height: 40px;
-  }
-}
-
-%h3 {
-  margin: 24px 0;
-  font-size: 32px;
-  line-height: 40px;
-  font-weight: bold;
-
-  @include mid-break {
-    margin: 20px 0;
-    font-size: 26px;
-    line-height: 32px;
-  }
-}
-
-%h4 {
-  margin: 20px 0;
-  font-size: 26px;
-  line-height: 32px;
-  font-weight: bold;
-
-  @include mid-break {
-    font-size: 22px;
-    line-height: 30px;
-  }
-}
-
-%h5 {
-  margin: 20px 0;
-  font-size: 22px;
-  line-height: 30px;
-  font-weight: bold;
-
-  @include mid-break {
-    font-size: 18px;
-    line-height: 24px;
-  }
-}
-
-%h6 {
-  margin: 20px 0;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: bold;
-}
-
-%body {
-  font-size: 18px;
-  line-height: 32px;
-
-  @include mid-break {
-    font-size: 15px;
-    line-height: 24px;
-  }
-}
-
-%large-body {
-  font-size: 25px;
-  line-height: 32px;
-
-  @include mid-break {
-    font-size: 22px;
-    line-height: 30px;
-  }
-}
-
-%label {
-  font-size: 16px;
-  line-height: 24px;
-  text-transform: uppercase;
-
-  @include mid-break {
-    font-size: 13px;
-  }
-}

examples/auth/payload/src/app/(app)/_providers/Auth/gql.ts

@@ -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)
-  }
-}

examples/auth/payload/src/app/(app)/_providers/Auth/index.tsx

@@ -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)

examples/auth/payload/src/app/(app)/_providers/Auth/rest.ts

@@ -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)
-  }
-}

examples/auth/payload/src/app/(app)/_providers/Auth/types.ts

@@ -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
-}

examples/auth/payload/src/app/(app)/account/AccountForm/index.module.scss

@@ -1,24 +0,0 @@
-@import "../../_css/common";
-
-.form {
-  margin-bottom: var(--base);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-  align-items: flex-start;
-  width: 66.66%;
-
-  @include mid-break {
-    width: 100%;
-  }
-}
-
-.changePassword {
-  all: unset;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.submit {
-  margin-top: calc(var(--base) / 2);
-}

examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx

@@ -1,151 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
-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 classes from './index.module.scss'
-
-type FormData = {
-  email: string
-  name: string
-  password: string
-  passwordConfirm: string
-}
-
-export const AccountForm: React.FC = () => {
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
-  const { setUser, user } = useAuth()
-  const [changePassword, setChangePassword] = useState(false)
-  const router = useRouter()
-
-  const {
-    formState: { errors, isLoading },
-    handleSubmit,
-    register,
-    reset,
-    watch,
-  } = useForm<FormData>()
-
-  const password = useRef({})
-  password.current = watch('password', '')
-
-  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',
-        })
-
-        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.')
-        }
-      }
-    },
-    [user, setUser, reset],
-  )
-
-  useEffect(() => {
-    if (user === null) {
-      router.push(`/login?unauthorized=account`)
-    }
-
-    // Once user is loaded, reset form to have default values
-    if (user) {
-      reset({
-        email: user.email,
-        password: '',
-        passwordConfirm: '',
-      })
-    }
-  }, [user, router, reset, changePassword])
-
-  return (
-    <form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
-      <Message className={classes.message} error={error} success={success} />
-      {!changePassword ? (
-        <Fragment>
-          <p>
-            {'To change your password, '}
-            <button
-              className={classes.changePassword}
-              onClick={() => setChangePassword(!changePassword)}
-              type="button"
-            >
-              click here
-            </button>
-            .
-          </p>
-          <Input
-            error={errors.email}
-            label="Email Address"
-            name="email"
-            register={register}
-            required
-            type="email"
-          />
-        </Fragment>
-      ) : (
-        <Fragment>
-          <p>
-            {'Change your password below, or '}
-            <button
-              className={classes.changePassword}
-              onClick={() => setChangePassword(!changePassword)}
-              type="button"
-            >
-              cancel
-            </button>
-            .
-          </p>
-          <Input
-            error={errors.password}
-            label="Password"
-            name="password"
-            register={register}
-            required
-            type="password"
-          />
-          <Input
-            error={errors.passwordConfirm}
-            label="Confirm Password"
-            name="passwordConfirm"
-            register={register}
-            required
-            type="password"
-            validate={value => value === password.current || 'The passwords do not match'}
-          />
-        </Fragment>
-      )}
-      <Button
-        appearance="primary"
-        className={classes.submit}
-        label={isLoading ? 'Processing' : changePassword ? 'Change password' : 'Update account'}
-        type="submit"
-      />
-    </form>
-  )
-}

examples/auth/payload/src/app/(app)/account/index.module.scss

@@ -1,7 +0,0 @@
-.account {
-  margin-bottom: var(--block-padding);
-}
-
-.params {
-  margin-top: var(--base);
-}

examples/auth/payload/src/app/(app)/account/page.tsx

@@ -1,44 +0,0 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
-import Link from 'next/link'
-import { redirect } from 'next/navigation'
-import React, { Fragment } 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 { 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 })
-
-  if (!user) {
-    redirect(
-      `/login?error=${encodeURIComponent('You must be logged in to access your account.')}&redirect=/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>
-  )
-}

examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.module.scss

@@ -1,22 +0,0 @@
-@import "../../_css/common";
-
-.form {
-  margin-bottom: var(--base);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-  align-items: flex-start;
-  width: 66.66%;
-
-  @include mid-break {
-    width: 100%;
-  }
-}
-
-.submit {
-  margin-top: calc(var(--base) / 2);
-}
-
-.message {
-  margin-bottom: var(--base);
-}

examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx

@@ -1,120 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
-import React, { useCallback, useRef, useState } from 'react'
-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 classes from './index.module.scss'
-
-type FormData = {
-  email: string
-  password: string
-  passwordConfirm: string
-}
-
-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)
-
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    watch,
-  } = useForm<FormData>()
-
-  const password = useRef({})
-  password.current = watch('password', '')
-
-  const onSubmit = useCallback(
-    async (data: FormData) => {
-      const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users`, {
-        body: JSON.stringify(data),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        method: 'POST',
-      })
-
-      if (!response.ok) {
-        const message = response.statusText || 'There was an error creating the account.'
-        setError(message)
-        return
-      }
-
-      const redirect = searchParams.get('redirect')
-
-      const timer = setTimeout(() => {
-        setLoading(true)
-      }, 1000)
-
-      try {
-        await login(data)
-        clearTimeout(timer)
-        if (redirect) router.push(redirect)
-        else router.push(`/account?success=${encodeURIComponent('Account created successfully')}`)
-      } catch (_) {
-        clearTimeout(timer)
-        setError('There was an error with the credentials provided. Please try again.')
-      }
-    },
-    [login, router, searchParams],
-  )
-
-  return (
-    <form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
-      <p>
-        {`This is where new customers can signup and create a new account. To manage all users, `}
-        <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/admin/collections/users`}>
-          login to the admin dashboard
-        </Link>
-        .
-      </p>
-      <Message className={classes.message} error={error} />
-      <Input
-        error={errors.email}
-        label="Email Address"
-        name="email"
-        register={register}
-        required
-        type="email"
-      />
-      <Input
-        error={errors.password}
-        label="Password"
-        name="password"
-        register={register}
-        required
-        type="password"
-      />
-      <Input
-        error={errors.passwordConfirm}
-        label="Confirm Password"
-        name="passwordConfirm"
-        register={register}
-        required
-        type="password"
-        validate={value => value === password.current || 'The passwords do not match'}
-      />
-      <Button
-        appearance="primary"
-        className={classes.submit}
-        label={loading ? 'Processing' : 'Create Account'}
-        type="submit"
-      />
-      <div>
-        {'Already have an account? '}
-        <Link href={`/login${allParams}`}>Login</Link>
-      </div>
-    </form>
-  )
-}

examples/auth/payload/src/app/(app)/create-account/index.module.scss

@@ -1,5 +0,0 @@
-@import "../_css/common";
-
-.createAccount {
-  margin-bottom: var(--block-padding);
-}

examples/auth/payload/src/app/(app)/create-account/page.tsx

@@ -1,32 +0,0 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
-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 { 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 })
-
-  if (user) {
-    redirect(
-      `/account?message=${encodeURIComponent(
-        'Cannot create a new account while logged in, please log out and try again.',
-      )}`,
-    )
-  }
-
-  return (
-    <Gutter className={classes.createAccount}>
-      <h1>Create Account</h1>
-      <RenderParams />
-      <CreateAccountForm />
-    </Gutter>
-  )
-}

examples/auth/payload/src/app/(app)/layout.tsx

@@ -1,29 +0,0 @@
-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.',
-  title: 'Payload Auth + Next.js App Router Example',
-}
-
-export default function RootLayout(props: { children: React.ReactNode }) {
-  const { children } = props
-
-  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>
-      </body>
-    </html>
-  )
-}

examples/auth/payload/src/app/(app)/login/LoginForm/index.module.scss

@@ -1,22 +0,0 @@
-@import "../../_css/common";
-
-.form {
-  margin-bottom: var(--base);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-  align-items: flex-start;
-  width: 66.66%;
-
-  @include mid-break {
-    width: 100%;
-  }
-}
-
-.submit {
-  margin-top: calc(var(--base) / 2);
-}
-
-.message {
-  margin-bottom: var(--base);
-}

examples/auth/payload/src/app/(app)/login/LoginForm/index.tsx

@@ -1,95 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
-import React, { useCallback, useRef } from 'react'
-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 classes from './index.module.scss'
-
-type FormData = {
-  email: string
-  password: string
-}
-
-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)
-
-  const {
-    formState: { errors, isLoading },
-    handleSubmit,
-    register,
-  } = useForm<FormData>({
-    defaultValues: {
-      email: 'demo@payloadcms.com',
-      password: 'demo',
-    },
-  })
-
-  const onSubmit = useCallback(
-    async (data: FormData) => {
-      try {
-        await login(data)
-        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],
-  )
-
-  return (
-    <form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
-      <p>
-        {'To log in, use the email '}
-        <b>demo@payloadcms.com</b>
-        {' with the password '}
-        <b>demo</b>
-        {'. To manage your users, '}
-        <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/admin/collections/users`}>
-          login to the admin dashboard
-        </Link>
-        .
-      </p>
-      <Message className={classes.message} error={error} />
-      <Input
-        error={errors.email}
-        label="Email Address"
-        name="email"
-        register={register}
-        required
-        type="email"
-      />
-      <Input
-        error={errors.password}
-        label="Password"
-        name="password"
-        register={register}
-        required
-        type="password"
-      />
-      <Button
-        appearance="primary"
-        className={classes.submit}
-        disabled={isLoading}
-        label={isLoading ? 'Processing' : 'Login'}
-        type="submit"
-      />
-      <div>
-        <Link href={`/create-account${allParams}`}>Create an account</Link>
-        <br />
-        <Link href={`/recover-password${allParams}`}>Recover your password</Link>
-      </div>
-    </form>
-  )
-}

examples/auth/payload/src/app/(app)/login/index.module.scss

@@ -1,9 +0,0 @@
-@import "../_css/common";
-
-.login {
-  margin-bottom: var(--block-padding);
-}
-
-.params {
-  margin-top: var(--base);
-}

examples/auth/payload/src/app/(app)/login/page.tsx

@@ -1,28 +0,0 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
-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 { 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 })
-
-  if (user) {
-    redirect(`/account?message=${encodeURIComponent('You are already logged in.')}`)
-  }
-
-  return (
-    <Gutter className={classes.login}>
-      <RenderParams className={classes.params} />
-      <h1>Log in</h1>
-      <LoginForm />
-    </Gutter>
-  )
-}

examples/auth/payload/src/app/(app)/logout/LogoutPage/index.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import React, { Fragment, useEffect, useState } from 'react'
-
-import { useAuth } from '../../_providers/Auth'
-
-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.')
-      }
-    }
-
-    void performLogout()
-  }, [logout])
-
-  return (
-    <Fragment>
-      {(error || success) && (
-        <div>
-          <h1>{error || success}</h1>
-          <p>
-            {'What would you like to do next? '}
-            <Link href="/">Click here</Link>
-            {` to go to the home page. To log back in, `}
-            <Link href="/login">click here</Link>.
-          </p>
-        </div>
-      )}
-    </Fragment>
-  )
-}

examples/auth/payload/src/app/(app)/logout/index.module.scss

@@ -1,3 +0,0 @@
-.logout {
-  margin-bottom: var(--block-padding);
-}

examples/auth/payload/src/app/(app)/logout/page.tsx

@@ -1,35 +0,0 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
-import Link from 'next/link'
-import React from 'react'
-
-import config from '../../../payload.config'
-import { Gutter } from '../_components/Gutter'
-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 })
-
-  if (!user) {
-    return (
-      <Gutter className={classes.logout}>
-        <h1>You are already logged out.</h1>
-        <p>
-          {'What would you like to do next? '}
-          <Link href="/">Click here</Link>
-          {` to go to the home page. To log back in, `}
-          <Link href="/login">click here</Link>.
-        </p>
-      </Gutter>
-    )
-  }
-
-  return (
-    <Gutter className={classes.logout}>
-      <LogoutPage />
-    </Gutter>
-  )
-}

examples/auth/payload/src/app/(app)/page.tsx

@@ -1,57 +0,0 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
-import Link from 'next/link'
-import React, { Fragment } from 'react'
-
-import config from '../../payload.config'
-import { Gutter } from './_components/Gutter'
-import { HydrateClientUser } from './_components/HydrateClientUser'
-
-export default async function HomePage() {
-  const headers = getHeaders()
-  const payload = await getPayloadHMR({ config })
-  const { permissions, user } = await payload.auth({ 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>
-  )
-}

examples/auth/payload/src/app/(app)/recover-password/RecoverPasswordForm/index.module.scss

@@ -1,23 +0,0 @@
-@import "../../_css/common";
-
-.error {
-  color: red;
-  margin-bottom: 15px;
-}
-
-.formWrapper {
-  width: 66.66%;
-
-  @include mid-break {
-    width: 100%;
-  }
-}
-
-.submit {
-  margin-top: var(--base);
-}
-
-.message {
-  margin-bottom: var(--base);
-}
-

examples/auth/payload/src/app/(app)/recover-password/RecoverPasswordForm/index.tsx

@@ -1,90 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import React, { Fragment, useCallback, useState } from 'react'
-import { useForm } from 'react-hook-form'
-
-import { Button } from '../../_components/Button'
-import { Input } from '../../_components/Input'
-import { Message } from '../../_components/Message'
-import classes from './index.module.scss'
-
-type FormData = {
-  email: string
-}
-
-export const RecoverPasswordForm: React.FC = () => {
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState(false)
-
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-  } = useForm<FormData>()
-
-  const onSubmit = useCallback(async (data: FormData) => {
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/forgot-password`,
-      {
-        body: JSON.stringify(data),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        method: 'POST',
-      },
-    )
-
-    if (response.ok) {
-      setSuccess(true)
-      setError('')
-    } else {
-      setError(
-        'There was a problem while attempting to send you a password reset email. Please try again.',
-      )
-    }
-  }, [])
-
-  return (
-    <Fragment>
-      {!success && (
-        <React.Fragment>
-          <h1>Recover Password</h1>
-          <div className={classes.formWrapper}>
-            <p>
-              {`Please enter your email below. You will receive an email message with instructions on
-              how to reset your password. To manage all of your users, `}
-              <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/admin/collections/users`}>
-                login to the admin dashboard
-              </Link>
-              .
-            </p>
-            <form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
-              <Message className={classes.message} error={error} />
-              <Input
-                error={errors.email}
-                label="Email Address"
-                name="email"
-                register={register}
-                required
-                type="email"
-              />
-              <Button
-                appearance="primary"
-                className={classes.submit}
-                label="Recover Password"
-                type="submit"
-              />
-            </form>
-          </div>
-        </React.Fragment>
-      )}
-      {success && (
-        <React.Fragment>
-          <h1>Request submitted</h1>
-          <p>Check your email for a link that will allow you to securely reset your password.</p>
-        </React.Fragment>
-      )}
-    </Fragment>
-  )
-}

examples/auth/payload/src/app/(app)/recover-password/index.module.scss

@@ -1,5 +0,0 @@
-@import "../_css/common";
-
-.recoverPassword {
-  margin-bottom: var(--block-padding);
-}

examples/auth/payload/src/app/(app)/recover-password/page.tsx

@@ -1,25 +0,0 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
-import { redirect } from 'next/navigation'
-import React from 'react'
-
-import config from '../../../payload.config'
-import { Gutter } from '../_components/Gutter'
-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 })
-
-  if (user) {
-    redirect(`/account?message=${encodeURIComponent('Cannot recover password while logged in.')}`)
-  }
-
-  return (
-    <Gutter className={classes.recoverPassword}>
-      <RecoverPasswordForm />
-    </Gutter>
-  )
-}

examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.module.scss

@@ -1,13 +0,0 @@
-@import "../../_css/common";
-
-.form {
-  width: 66.66%;
-
-  @include mid-break {
-    width: 100%;
-  }
-}
-
-.submit {
-  margin-top: var(--base);
-}

examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.tsx

@@ -1,86 +0,0 @@
-'use client'
-
-import { useRouter, useSearchParams } from 'next/navigation'
-import React, { useCallback, useEffect, useState } from 'react'
-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 classes from './index.module.scss'
-
-type FormData = {
-  password: string
-  token: string
-}
-
-export const ResetPasswordForm: React.FC = () => {
-  const [error, setError] = useState('')
-  const { login } = useAuth()
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const token = searchParams.get('token')
-
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    reset,
-  } = useForm<FormData>()
-
-  const onSubmit = useCallback(
-    async (data: FormData) => {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/reset-password`,
-        {
-          body: JSON.stringify(data),
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          method: 'POST',
-        },
-      )
-
-      if (response.ok) {
-        const json = await response.json()
-
-        // Automatically log the user in after they successfully reset password
-        await login({ email: json.user.email, password: data.password })
-
-        // Redirect them to `/account` with success message in URL
-        router.push('/account?success=Password reset successfully.')
-      } else {
-        setError('There was a problem while resetting your password. Please try again later.')
-      }
-    },
-    [router, login],
-  )
-
-  // when Next.js populates token within router,
-  // reset form with new token value
-  useEffect(() => {
-    reset({ token: token || undefined })
-  }, [reset, token])
-
-  return (
-    <form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
-      <Message className={classes.message} error={error} />
-      <Input
-        error={errors.password}
-        label="New Password"
-        name="password"
-        register={register}
-        required
-        type="password"
-      />
-      <input type="hidden" {...register('token')} />
-      <Button
-        appearance="primary"
-        className={classes.submit}
-        label="Reset Password"
-        type="submit"
-      />
-    </form>
-  )
-}

examples/auth/payload/src/app/(app)/reset-password/index.module.scss

@@ -1,3 +0,0 @@
-.resetPassword {
-  margin-bottom: var(--block-padding);
-}

examples/auth/payload/src/app/(app)/reset-password/page.tsx

@@ -1,27 +0,0 @@
-import { getPayloadHMR } from '@payloadcms/next/utilities'
-import { headers as getHeaders } from 'next/headers.js'
-import { redirect } from 'next/navigation'
-import React from 'react'
-
-import config from '../../../payload.config'
-import { Gutter } from '../_components/Gutter'
-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 })
-
-  if (user) {
-    redirect(`/account?message=${encodeURIComponent('Cannot reset password while logged in.')}`)
-  }
-
-  return (
-    <Gutter className={classes.resetPassword}>
-      <h1>Reset Password</h1>
-      <p>Please enter a new password below.</p>
-      <ResetPasswordForm />
-    </Gutter>
-  )
-}

examples/auth/payload/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,22 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import type { Metadata } from 'next'
-
-import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
-
-type Args = {
-  params: {
-    segments: string[]
-  }
-  searchParams: {
-    [key: string]: string | string[]
-  }
-}
-
-export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
-  generatePageMetadata({ config, params, searchParams })
-
-const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
-
-export default NotFound

examples/auth/payload/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,22 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import type { Metadata } from 'next'
-
-import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
-
-type Args = {
-  params: {
-    segments: string[]
-  }
-  searchParams: {
-    [key: string]: string | string[]
-  }
-}
-
-export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
-  generatePageMetadata({ config, params, searchParams })
-
-const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
-
-export default Page

examples/auth/payload/src/app/(payload)/api/[...slug]/route.ts

@@ -1,10 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
-import config from '@payload-config'
-import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
-
-export const GET = REST_GET(config)
-export const POST = REST_POST(config)
-export const DELETE = REST_DELETE(config)
-export const PATCH = REST_PATCH(config)
-export const OPTIONS = REST_OPTIONS(config)

examples/auth/payload/src/app/(payload)/api/graphql-playground/route.ts

@@ -1,6 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
-import config from '@payload-config'
-import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
-
-export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/auth/payload/src/app/(payload)/api/graphql/route.ts

@@ -1,6 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
-import config from '@payload-config'
-import { GRAPHQL_POST } from '@payloadcms/next/routes'
-
-export const POST = GRAPHQL_POST(config)

examples/auth/payload/src/app/(payload)/layout.tsx

@@ -1,16 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import configPromise from '@payload-config'
-import '@payloadcms/next/css'
-import { RootLayout } from '@payloadcms/next/layouts'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import React from 'react'
-
-import './custom.scss'
-
-type Args = {
-  children: React.ReactNode
-}
-
-const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
-
-export default Layout

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',
+  auth: {
+    tokenExpiration: 28800, // 8 hours
+    cookies: {
+      sameSite: 'none',
+      secure: true,
+      domain: process.env.COOKIE_DOMAIN,
+    },
+  },
   admin: {
     useAsTitle: 'email',
   },
-  auth: true,
+  access: {
+    read: adminsAndUser,
+    create: anyone,
+    update: adminsAndUser,
+    delete: admins,
+    admin: ({ req: { user } }) => checkRole(['admin'], user),
+  },
+  hooks: {
+    afterChange: [loginAfterCreate],
+  },
   fields: [
-    // Email added by default
-    // Add more fields as needed
+    {
+      name: 'firstName',
+      type: 'text',
+    },
+    {
+      name: 'lastName',
+      type: 'text',
+    },
+    {
+      name: 'roles',
+      type: 'select',
+      hasMany: true,
+      saveToJWT: true,
+      hooks: {
+        beforeChange: [protectRoles],
+      },
+      options: [
+        {
+          label: 'Admin',
+          value: 'admin',
+        },
+        {
+          label: 'User',
+          value: 'user',
+        },
+      ],
+    },
   ],
 }