chore(examples): updates auth example to latest (#10090)

The auth example was still on `v3.0.0-beta.24`, was missing its users
collection config, and was not yet using the component paths pattern
established here: #7246. This updates to latest and fixes these issues.
This example can still use further improvements and housekeeping which
will come in future PRs.

Author: jacobsfletch

examples/auth/.env.example

@@ -1,7 +1,11 @@
-# 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_SERVER_URL=http://localhost:3000
+# Database connection string
+DATABASE_URI=mongodb://127.0.0.1/payload-draft-preview-example
+
+# Used to encrypt JWT tokens
+PAYLOAD_SECRET=YOUR_SECRET_HERE
+
+# Used to configure CORS, format links and more. No trailing slash
 NEXT_PUBLIC_SERVER_URL=http://localhost:3000
-DATABASE_URI=mongodb://127.0.0.1/payload-example-auth
-PAYLOAD_SECRET=PAYLOAD_AUTH_EXAMPLE_SECRET_KEY
+
+# Used to share cookies across subdomains
 COOKIE_DOMAIN=localhost

examples/auth/.eslintignore

@@ -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/.eslintrc.cjs

@@ -1,4 +1,5 @@
 build
 dist
 node_modules
-package - lock.json.env
+package-lock.json
+.env

examples/auth/.gitignore

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": true,
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

examples/auth/.swcrc

@@ -2,28 +2,27 @@
 
 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, the principals are generally the same. 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).
-
 ## Quick Start
 
-To spin up this example locally, follow these steps:
+To spin up this example locally, follow the steps below:
 
 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. Navigate into the project directory and install dependencies using your preferred package manager:
 
-1. `cp .env.example .env` to copy the example environment variables
+- `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
 
-   > Adjust `PAYLOAD_PUBLIC_SITE_URL` in the `.env` if your front-end is running on a separate domain or port.
+> \*NOTE: The --ignore-workspace flag is needed if you are running this example within the Payload monorepo to avoid workspace conflicts.
 
-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`
+1. Start the server:
+   - Depending on your package manager, run `pnpm dev`, `yarn dev` or `npm run dev`
+   - When prompted, type `y` then `enter` to seed the database with sample data
+1. Access the application:
+   - Open your browser and navigate to `http://localhost:3000` to access the homepage.
+   - Open `http://localhost:3000/admin` to access the admin panel.
+1. Login:
 
-That's it! Changes made in `./src` will be reflected in your app. See the [Development](#development) section for more details.
+- Use the following credentials to log into the admin panel:
+  > `Email: demo@payloadcms.com` > `Password: demo`
 
 ## How it works
 

examples/auth/README.md

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

examples/auth/next-env.d.ts

@@ -3,41 +3,39 @@
   "version": "1.0.0",
   "description": "Payload authentication example.",
   "license": "MIT",
+  "type": "module",
   "main": "dist/server.js",
   "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",
-    "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",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation && pnpm seed && next dev",
+    "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
+    "generate:schema": "payload-graphql generate:schema",
+    "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
     "seed": "npm run payload migrate:fresh",
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "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",
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/next": "latest",
+    "@payloadcms/richtext-slate": "latest",
+    "@payloadcms/ui": "latest",
     "cross-env": "^7.0.3",
-    "next": "14.3.0-canary.68",
-    "payload": "3.0.0-beta.24",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^15.0.0",
+    "payload": "latest",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.51.3"
   },
   "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",
+    "@payloadcms/graphql": "latest",
+    "@swc/core": "^1.6.13",
+    "@types/ejs": "^3.1.5",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "eslint": "^8.57.0",
-    "tsx": "^4.7.1",
-    "typescript": "5.4.4"
+    "eslint-config-next": "^15.0.0",
+    "tsx": "^4.16.2",
+    "typescript": "5.5.2"
   }
 }