chore(examples): updates auth example (#3100)

examples/auth/next-app/README.md

@@ -1,6 +1,6 @@
 # Payload Auth Example Front-End
 
-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/master/examples/auth). It 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/master/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/master/examples/auth/next-pages).
 
@@ -8,7 +8,7 @@ This is a [Payload](https://payloadcms.com) + [Next.js](https://nextjs.org) app
 
 ### Payload
 
-First you'll need a running Payload app. If you have not done so already, clone down the [`cms`](../cms) folder and follow the setup instructions there to get it up and running. This will provide all the necessary APIs that your Next.js app will be using for authentication.
+First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/master/examples/auth/payload). If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
 
 ### Next.js
 

examples/auth/next-app/app/logout/LogoutPage/index.tsx

@@ -32,7 +32,7 @@ export const LogoutPage: React.FC = props => {
             {'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>
+            <Link href="/login">click here</Link>
             {'.'}
           </p>
         </div>

examples/auth/next-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "payload-nextjs-auth-example-app",
+  "name": "payload-auth-next-app",
   "version": "0.1.0",
   "private": true,
   "scripts": {

examples/auth/next-pages/README.md

@@ -8,7 +8,7 @@ This is a [Payload](https://payloadcms.com) + [Next.js](https://nextjs.org) app
 
 ### Payload
 
-First you'll need a running Payload app. If you have not done so already, clone down the [`cms`](../cms) folder and follow the setup instructions there to get it up and running. This will provide all the necessary APIs that your Next.js app will be using for authentication.
+First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/master/examples/auth/payload). If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
 
 ### Next.js
 

examples/auth/next-pages/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "payload-nextjs-auth-example-pages",
+  "name": "payload-auth-next-pages",
   "version": "1.0.0",
   "scripts": {
     "dev": "next dev -p 3001",

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

@@ -33,7 +33,7 @@ const Logout: React.FC = () => {
             {'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>
+            <Link href="/login">click here</Link>
             {'.'}
           </p>
         </div>

examples/auth/payload/.env.example

@@ -3,5 +3,5 @@ PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
 MONGODB_URI=mongodb://127.0.0.1/payload-example-auth
 PAYLOAD_SECRET=PAYLOAD_AUTH_EXAMPLE_SECRET_KEY
 COOKIE_DOMAIN=localhost
-PAYLOAD_SEED=true
+PAYLOAD_PUBLIC_SEED=true
 PAYLOAD_DROP_DATABASE=true

examples/auth/payload/README.md

@@ -1,6 +1,6 @@
 # Payload Auth Example
 
-This example 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:
+The [Payload Auth Example](https://github.com/payloadcms/payload/tree/master/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)
@@ -11,11 +11,12 @@ Follow the instructions in each respective README to get started. If you are set
 
 To spin up this example locally, follow these steps:
 
-1. First clone the repo
+1. Clone this repo
-1. Then `cd YOUR_PROJECT_REPO && cp .env.example .env`
+2. `cd` into this directory and run `yarn` or `npm install`
-1. Next `yarn && yarn dev`
+3. `cp .env.example .env` to copy the example environment variables
-1. Now `open http://localhost:3000/admin` to access the admin panel
+4. `yarn dev` or `npm run dev` to start the server and seed the database
-1. Login with email `demo@payloadcms.com` and password `demo`
+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.
 

examples/auth/payload/package.json

@@ -5,7 +5,7 @@
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
+    "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",

examples/auth/payload/src/components/BeforeLogin/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const BeforeLogin: React.FC = () => {
+  if (process.env.PAYLOAD_PUBLIC_SEED === 'true') {
+    return (
+      <p>
+        {'Log in with the email '}
+        <strong>demo@payloadcms.com</strong>
+        {' and the password '}
+        <strong>demo</strong>.
+      </p>
+    )
+  }
+  return null
+}
+
+export default BeforeLogin

examples/auth/payload/src/payload.config.ts

@@ -2,9 +2,15 @@ import path from 'path'
 import { buildConfig } from 'payload/config'
 
 import { Users } from './collections/Users'
+import BeforeLogin from './components/BeforeLogin'
 
 export default buildConfig({
   collections: [Users],
+  admin: {
+    components: {
+      beforeLogin: [BeforeLogin],
+    },
+  },
   cors: [
     process.env.PAYLOAD_PUBLIC_SERVER_URL || '',
     process.env.PAYLOAD_PUBLIC_SITE_URL || '',

examples/auth/payload/src/server.ts

@@ -25,7 +25,7 @@ const start = async (): Promise<void> => {
     },
   })
 
-  if (process.env.PAYLOAD_SEED === 'true') {
+  if (process.env.PAYLOAD_PUBLIC_SEED === 'true') {
     payload.logger.info('---- SEEDING DATABASE ----')
     await seed(payload)
   }