From b84496e5dacb57fd2d8485ce1fa10f1e67b75f69 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Tue, 1 Aug 2023 16:53:31 -0400 Subject: [PATCH] chore(examples): updates auth example (#3100) --- examples/auth/next-app/README.md | 4 ++-- .../next-app/app/logout/LogoutPage/index.tsx | 2 +- examples/auth/next-app/package.json | 2 +- examples/auth/next-pages/README.md | 2 +- examples/auth/next-pages/package.json | 2 +- .../auth/next-pages/src/pages/logout/index.tsx | 2 +- examples/auth/{cms => payload}/.env.example | 2 +- examples/auth/{cms => payload}/.eslintrc.js | 0 examples/auth/{cms => payload}/.gitignore | 0 examples/auth/{cms => payload}/.prettierrc.js | 0 examples/auth/{cms => payload}/README.md | 13 +++++++------ examples/auth/{cms => payload}/nodemon.json | 0 examples/auth/{cms => payload}/package.json | 4 ++-- .../{cms => payload}/src/collections/Users.ts | 0 .../src/collections/access/admins.ts | 0 .../src/collections/access/adminsAndUser.ts | 0 .../src/collections/access/anyone.ts | 0 .../src/collections/access/checkRole.ts | 0 .../src/collections/hooks/loginAfterCreate.ts | 0 .../src/collections/hooks/protectRoles.ts | 0 .../src/components/BeforeLogin/index.tsx | 17 +++++++++++++++++ .../auth/{cms => payload}/src/payload-types.ts | 0 .../auth/{cms => payload}/src/payload.config.ts | 6 ++++++ .../auth/{cms => payload}/src/seed/index.ts | 0 examples/auth/{cms => payload}/src/server.ts | 2 +- examples/auth/{cms => payload}/tsconfig.json | 0 examples/auth/{cms => payload}/yarn.lock | 0 27 files changed, 41 insertions(+), 17 deletions(-) rename examples/auth/{cms => payload}/.env.example (90%) rename examples/auth/{cms => payload}/.eslintrc.js (100%) rename examples/auth/{cms => payload}/.gitignore (100%) rename examples/auth/{cms => payload}/.prettierrc.js (100%) rename examples/auth/{cms => payload}/README.md (82%) rename examples/auth/{cms => payload}/nodemon.json (100%) rename examples/auth/{cms => payload}/package.json (92%) rename examples/auth/{cms => payload}/src/collections/Users.ts (100%) rename examples/auth/{cms => payload}/src/collections/access/admins.ts (100%) rename examples/auth/{cms => payload}/src/collections/access/adminsAndUser.ts (100%) rename examples/auth/{cms => payload}/src/collections/access/anyone.ts (100%) rename examples/auth/{cms => payload}/src/collections/access/checkRole.ts (100%) rename examples/auth/{cms => payload}/src/collections/hooks/loginAfterCreate.ts (100%) rename examples/auth/{cms => payload}/src/collections/hooks/protectRoles.ts (100%) create mode 100644 examples/auth/payload/src/components/BeforeLogin/index.tsx rename examples/auth/{cms => payload}/src/payload-types.ts (100%) rename examples/auth/{cms => payload}/src/payload.config.ts (80%) rename examples/auth/{cms => payload}/src/seed/index.ts (100%) rename examples/auth/{cms => payload}/src/server.ts (92%) rename examples/auth/{cms => payload}/tsconfig.json (100%) rename examples/auth/{cms => payload}/yarn.lock (100%) diff --git a/examples/auth/next-app/README.md b/examples/auth/next-app/README.md index b6623743df..5c89830795 100644 --- a/examples/auth/next-app/README.md +++ b/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 diff --git a/examples/auth/next-app/app/logout/LogoutPage/index.tsx b/examples/auth/next-app/app/logout/LogoutPage/index.tsx index 6aca0f4b14..d11684fb4c 100644 --- a/examples/auth/next-app/app/logout/LogoutPage/index.tsx +++ b/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? '} Click here {` to go to the home page. To log back in, `} - click here + click here {'.'}

diff --git a/examples/auth/next-app/package.json b/examples/auth/next-app/package.json index 57bea86410..e28b51adfa 100644 --- a/examples/auth/next-app/package.json +++ b/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": { diff --git a/examples/auth/next-pages/README.md b/examples/auth/next-pages/README.md index a9e740f884..178e876793 100644 --- a/examples/auth/next-pages/README.md +++ b/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 diff --git a/examples/auth/next-pages/package.json b/examples/auth/next-pages/package.json index dbe6696525..310eb7b13a 100644 --- a/examples/auth/next-pages/package.json +++ b/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", diff --git a/examples/auth/next-pages/src/pages/logout/index.tsx b/examples/auth/next-pages/src/pages/logout/index.tsx index a02b79f424..8cab0b844c 100644 --- a/examples/auth/next-pages/src/pages/logout/index.tsx +++ b/examples/auth/next-pages/src/pages/logout/index.tsx @@ -33,7 +33,7 @@ const Logout: React.FC = () => { {'What would you like to do next? '} Click here {` to go to the home page. To log back in, `} - click here + click here {'.'}

diff --git a/examples/auth/cms/.env.example b/examples/auth/payload/.env.example similarity index 90% rename from examples/auth/cms/.env.example rename to examples/auth/payload/.env.example index fa72399827..e965cb408b 100644 --- a/examples/auth/cms/.env.example +++ b/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 diff --git a/examples/auth/cms/.eslintrc.js b/examples/auth/payload/.eslintrc.js similarity index 100% rename from examples/auth/cms/.eslintrc.js rename to examples/auth/payload/.eslintrc.js diff --git a/examples/auth/cms/.gitignore b/examples/auth/payload/.gitignore similarity index 100% rename from examples/auth/cms/.gitignore rename to examples/auth/payload/.gitignore diff --git a/examples/auth/cms/.prettierrc.js b/examples/auth/payload/.prettierrc.js similarity index 100% rename from examples/auth/cms/.prettierrc.js rename to examples/auth/payload/.prettierrc.js diff --git a/examples/auth/cms/README.md b/examples/auth/payload/README.md similarity index 82% rename from examples/auth/cms/README.md rename to examples/auth/payload/README.md index 54f62a4e0f..07007e2c9a 100644 --- a/examples/auth/cms/README.md +++ b/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. Then `cd YOUR_PROJECT_REPO && cp .env.example .env` -1. Next `yarn && yarn dev` -1. Now `open http://localhost:3000/admin` to access the admin panel -1. Login with email `demo@payloadcms.com` and password `demo` +1. Clone this repo +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. diff --git a/examples/auth/cms/nodemon.json b/examples/auth/payload/nodemon.json similarity index 100% rename from examples/auth/cms/nodemon.json rename to examples/auth/payload/nodemon.json diff --git a/examples/auth/cms/package.json b/examples/auth/payload/package.json similarity index 92% rename from examples/auth/cms/package.json rename to examples/auth/payload/package.json index 44b18c6509..9566eca35f 100644 --- a/examples/auth/cms/package.json +++ b/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", @@ -42,4 +42,4 @@ "ts-node": "^9.1.1", "typescript": "^4.8.4" } -} \ No newline at end of file +} diff --git a/examples/auth/cms/src/collections/Users.ts b/examples/auth/payload/src/collections/Users.ts similarity index 100% rename from examples/auth/cms/src/collections/Users.ts rename to examples/auth/payload/src/collections/Users.ts diff --git a/examples/auth/cms/src/collections/access/admins.ts b/examples/auth/payload/src/collections/access/admins.ts similarity index 100% rename from examples/auth/cms/src/collections/access/admins.ts rename to examples/auth/payload/src/collections/access/admins.ts diff --git a/examples/auth/cms/src/collections/access/adminsAndUser.ts b/examples/auth/payload/src/collections/access/adminsAndUser.ts similarity index 100% rename from examples/auth/cms/src/collections/access/adminsAndUser.ts rename to examples/auth/payload/src/collections/access/adminsAndUser.ts diff --git a/examples/auth/cms/src/collections/access/anyone.ts b/examples/auth/payload/src/collections/access/anyone.ts similarity index 100% rename from examples/auth/cms/src/collections/access/anyone.ts rename to examples/auth/payload/src/collections/access/anyone.ts diff --git a/examples/auth/cms/src/collections/access/checkRole.ts b/examples/auth/payload/src/collections/access/checkRole.ts similarity index 100% rename from examples/auth/cms/src/collections/access/checkRole.ts rename to examples/auth/payload/src/collections/access/checkRole.ts diff --git a/examples/auth/cms/src/collections/hooks/loginAfterCreate.ts b/examples/auth/payload/src/collections/hooks/loginAfterCreate.ts similarity index 100% rename from examples/auth/cms/src/collections/hooks/loginAfterCreate.ts rename to examples/auth/payload/src/collections/hooks/loginAfterCreate.ts diff --git a/examples/auth/cms/src/collections/hooks/protectRoles.ts b/examples/auth/payload/src/collections/hooks/protectRoles.ts similarity index 100% rename from examples/auth/cms/src/collections/hooks/protectRoles.ts rename to examples/auth/payload/src/collections/hooks/protectRoles.ts diff --git a/examples/auth/payload/src/components/BeforeLogin/index.tsx b/examples/auth/payload/src/components/BeforeLogin/index.tsx new file mode 100644 index 0000000000..5108a4fef6 --- /dev/null +++ b/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 ( +

+ {'Log in with the email '} + demo@payloadcms.com + {' and the password '} + demo. +

+ ) + } + return null +} + +export default BeforeLogin diff --git a/examples/auth/cms/src/payload-types.ts b/examples/auth/payload/src/payload-types.ts similarity index 100% rename from examples/auth/cms/src/payload-types.ts rename to examples/auth/payload/src/payload-types.ts diff --git a/examples/auth/cms/src/payload.config.ts b/examples/auth/payload/src/payload.config.ts similarity index 80% rename from examples/auth/cms/src/payload.config.ts rename to examples/auth/payload/src/payload.config.ts index c1a18603ff..5edda4e33c 100644 --- a/examples/auth/cms/src/payload.config.ts +++ b/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 || '', diff --git a/examples/auth/cms/src/seed/index.ts b/examples/auth/payload/src/seed/index.ts similarity index 100% rename from examples/auth/cms/src/seed/index.ts rename to examples/auth/payload/src/seed/index.ts diff --git a/examples/auth/cms/src/server.ts b/examples/auth/payload/src/server.ts similarity index 92% rename from examples/auth/cms/src/server.ts rename to examples/auth/payload/src/server.ts index 761ff9450b..685f1e468c 100644 --- a/examples/auth/cms/src/server.ts +++ b/examples/auth/payload/src/server.ts @@ -25,7 +25,7 @@ const start = async (): Promise => { }, }) - if (process.env.PAYLOAD_SEED === 'true') { + if (process.env.PAYLOAD_PUBLIC_SEED === 'true') { payload.logger.info('---- SEEDING DATABASE ----') await seed(payload) } diff --git a/examples/auth/cms/tsconfig.json b/examples/auth/payload/tsconfig.json similarity index 100% rename from examples/auth/cms/tsconfig.json rename to examples/auth/payload/tsconfig.json diff --git a/examples/auth/cms/yarn.lock b/examples/auth/payload/yarn.lock similarity index 100% rename from examples/auth/cms/yarn.lock rename to examples/auth/payload/yarn.lock