tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(examples/auth): migrates to 2.0 (#3506)

Browse Source
This commit is contained in:
Jacob Fletcher
2023-10-09 14:00:38 -04:00
committed by GitHub
parent 2de36550ae
commit 62679baa91
30 changed files with 2046 additions and 5851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/auth/next-app/.env.example
View File

@@ -1 +1 @@
NEXT_PUBLIC_CMS_URL=http://localhost:3000
NEXT_PUBLIC_PAYLOAD_URL=http://localhost:3000

2
examples/auth/next-app/app/_providers/Auth/gql.ts
View File

@@ -8,7 +8,7 @@ export const USER = `
// 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_CMS_URL}/api/graphql`, {
const res = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/graphql`, {
method: 'POST',
credentials: 'include',
headers: {

15
examples/auth/next-app/app/_providers/Auth/index.tsx
View File

@@ -18,7 +18,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const create = useCallback<Create>(
async args => {
if (api === 'rest') {
const user = await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users`, args)
const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, args)
setUser(user)
return user
}
@@ -40,7 +40,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const login = useCallback<Login>(
async args => {
if (api === 'rest') {
const user = await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/login`, args)
const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/login`, args)
setUser(user)
return user
}
@@ -64,7 +64,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const logout = useCallback<Logout>(async () => {
if (api === 'rest') {
await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/logout`)
await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/logout`)
setUser(null)
return
}
@@ -83,7 +83,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const fetchMe = async () => {
if (api === 'rest') {
const user = await rest(
`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/me`,
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/me`,
{},
{
method: 'GET',
@@ -113,7 +113,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
async args => {
if (api === 'rest') {
const user = await rest(
`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/forgot-password`,
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
args,
)
setUser(user)
@@ -134,7 +134,10 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const resetPassword = useCallback<ResetPassword>(
async args => {
if (api === 'rest') {
const user = await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/reset-password`, args)
const user = await rest(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,
args,
)
setUser(user)
return user
}

2
examples/auth/next-app/app/_utilities/getMeUser.ts
View File

@@ -14,7 +14,7 @@ export const getMeUser = async (args?: {
const cookieStore = cookies()
const token = cookieStore.get('payload-token')?.value
const meUserReq = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/me`, {
const meUserReq = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/me`, {
headers: {
Authorization: `JWT ${token}`,
},

19
examples/auth/next-app/app/account/AccountForm/index.tsx
View File

@@ -39,15 +39,18 @@ export const AccountForm: React.FC = () => {
const onSubmit = useCallback(
async (data: FormData) => {
if (user) {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/${user.id}`, {
// Make sure to include cookies with fetch
credentials: 'include',
method: 'PATCH',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
const response = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/${user.id}`,
{
// Make sure to include cookies with fetch
credentials: 'include',
method: 'PATCH',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
},
})
)
if (response.ok) {
const json = await response.json()

2
examples/auth/next-app/app/account/page.tsx
View File

@@ -22,7 +22,7 @@ export default async function Account() {
<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_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

4
examples/auth/next-app/app/create-account/CreateAccountForm/index.tsx
View File

@@ -38,7 +38,7 @@ export const CreateAccountForm: React.FC = () => {
const onSubmit = useCallback(
async (data: FormData) => {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users`, {
const response = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, {
method: 'POST',
body: JSON.stringify(data),
headers: {
@@ -75,7 +75,7 @@ export const CreateAccountForm: React.FC = () => {
<form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
<p>
{`This is where new customers can signup and create a new account. To manage all users, `}
<Link href={`${process.env.NEXT_PUBLIC_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

2
examples/auth/next-app/app/login/LoginForm/index.tsx
View File

@@ -57,7 +57,7 @@ export const LoginForm: React.FC = () => {
{' with the password '}
<b>demo</b>
{'. To manage your users, '}
<Link href={`${process.env.NEXT_PUBLIC_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
.

2
examples/auth/next-app/app/page.tsx
View File

@@ -35,7 +35,7 @@ export default function Home() {
{' 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_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

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

@@ -25,13 +25,16 @@ export const RecoverPasswordForm: React.FC = () => {
} = useForm<FormData>()
const onSubmit = useCallback(async (data: FormData) => {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/forgot-password`, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
const response = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
{
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
},
})
)
if (response.ok) {
setSuccess(true)
@@ -52,7 +55,7 @@ export const RecoverPasswordForm: React.FC = () => {
<p>
{`Please enter your email below. You will receive an email message with instructions on
how to reset your password. To manage your all users, `}
<Link href={`${process.env.NEXT_PUBLIC_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

15
examples/auth/next-app/app/reset-password/ResetPasswordForm/index.tsx
View File

@@ -32,13 +32,16 @@ export const ResetPasswordForm: React.FC = () => {
const onSubmit = useCallback(
async (data: FormData) => {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/reset-password`, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
const response = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,
{
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
},
})
)
if (response.ok) {
const json = await response.json()

2499
examples/auth/next-app/yarn.lock
View File

File diff suppressed because it is too large Load Diff

2
examples/auth/next-pages/.env.example
View File

@@ -1 +1 @@
NEXT_PUBLIC_CMS_URL=http://localhost:3000
NEXT_PUBLIC_PAYLOAD_URL=http://localhost:3000

21
examples/auth/next-pages/src/pages/account/index.tsx
View File

@@ -40,15 +40,18 @@ const Account: React.FC = () => {
const onSubmit = useCallback(
async (data: FormData) => {
if (user) {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/${user.id}`, {
// Make sure to include cookies with fetch
credentials: 'include',
method: 'PATCH',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
const response = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/${user.id}`,
{
// Make sure to include cookies with fetch
credentials: 'include',
method: 'PATCH',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
},
})
)
if (response.ok) {
const json = await response.json()
@@ -91,7 +94,7 @@ const Account: React.FC = () => {
<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_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

4
examples/auth/next-pages/src/pages/create-account/index.tsx
View File

@@ -38,7 +38,7 @@ const CreateAccount: React.FC = () => {
const onSubmit = useCallback(
async (data: FormData) => {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users`, {
const response = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, {
method: 'POST',
body: JSON.stringify(data),
headers: {
@@ -78,7 +78,7 @@ const CreateAccount: React.FC = () => {
<form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
<p>
{`This is where new customers can signup and create a new account. To manage all users, `}
<Link href={`${process.env.NEXT_PUBLIC_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

2
examples/auth/next-pages/src/pages/index.tsx
View File

@@ -35,7 +35,7 @@ export default function Home() {
{' 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_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

2
examples/auth/next-pages/src/pages/login/index.tsx
View File

@@ -60,7 +60,7 @@ const Login: React.FC = () => {
{' with the password '}
<b>demo</b>
{'. To manage your users, '}
<Link href={`${process.env.NEXT_PUBLIC_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
.

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

@@ -24,13 +24,16 @@ const RecoverPassword: React.FC = () => {
} = useForm<FormData>()
const onSubmit = useCallback(async (data: FormData) => {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/forgot-password`, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
const response = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
{
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
},
})
)
if (response.ok) {
setSuccess(true)
@@ -51,7 +54,7 @@ const RecoverPassword: React.FC = () => {
<p>
{`Please enter your email below. You will receive an email message with instructions on
how to reset your password. To manage your all users, `}
<Link href={`${process.env.NEXT_PUBLIC_CMS_URL}/admin/collections/users`}>
<Link href={`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/admin/collections/users`}>
login to the admin dashboard
</Link>
{'.'}

15
examples/auth/next-pages/src/pages/reset-password/index.tsx
View File

@@ -31,13 +31,16 @@ const ResetPassword: React.FC = () => {
const onSubmit = useCallback(
async (data: FormData) => {
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/reset-password`, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
const response = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,
{
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
},
})
)
if (response.ok) {
const json = await response.json()

2
examples/auth/next-pages/src/providers/Auth/gql.ts
View File

@@ -8,7 +8,7 @@ export const USER = `
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const gql = async (query): Promise<any> => {
try {
const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
const res = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/graphql`, {
method: 'POST',
credentials: 'include',
headers: {

15
examples/auth/next-pages/src/providers/Auth/index.tsx
View File

@@ -16,7 +16,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const create = useCallback<Create>(
async args => {
if (api === 'rest') {
const user = await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users`, args)
const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, args)
setUser(user)
return user
}
@@ -38,7 +38,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const login = useCallback<Login>(
async args => {
if (api === 'rest') {
const user = await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/login`, args)
const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/login`, args)
setUser(user)
return user
}
@@ -62,7 +62,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const logout = useCallback<Logout>(async () => {
if (api === 'rest') {
await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/logout`)
await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/logout`)
setUser(null)
return
}
@@ -81,7 +81,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const fetchMe = async () => {
if (api === 'rest') {
const user = await rest(
`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/me`,
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/me`,
{},
{
method: 'GET',
@@ -111,7 +111,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
async args => {
if (api === 'rest') {
const user = await rest(
`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/forgot-password`,
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
args,
)
setUser(user)
@@ -132,7 +132,10 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
const resetPassword = useCallback<ResetPassword>(
async args => {
if (api === 'rest') {
const user = await rest(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/reset-password`, args)
const user = await rest(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,
args,
)
setUser(user)
return user
}

1900
examples/auth/next-pages/yarn.lock
View File

File diff suppressed because it is too large Load Diff

2
examples/auth/payload/.env.example
View File

@@ -1,6 +1,6 @@
PAYLOAD_PUBLIC_SITE_URL=http://localhost:3001
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
MONGODB_URI=mongodb://127.0.0.1/payload-example-auth
DATABASE_URI=mongodb://127.0.0.1/payload-example-auth
PAYLOAD_SECRET=PAYLOAD_AUTH_EXAMPLE_SECRET_KEY
COOKIE_DOMAIN=localhost
PAYLOAD_PUBLIC_SEED=true

3
examples/auth/payload/package.json
View File

@@ -17,6 +17,9 @@
"lint:fix": "eslint --fix --ext .ts,.tsx src"
},
"dependencies": {
"@payloadcms/bundler-webpack": "^1.0.0-beta.5",
"@payloadcms/db-mongodb": "^1.0.0-beta.8",
"@payloadcms/richtext-slate": "^1.0.0-beta.4",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"payload": "latest"

3
examples/auth/payload/src/collections/hooks/protectRoles.ts
View File

@@ -1,6 +1,7 @@
import type { User } from 'payload/generated-types'
import type { FieldHook } from 'payload/types'
import type { User } from '../../payload-types'
// ensure there is always a `user` role
// do not let non-admins change roles
export const protectRoles: FieldHook<User & { id: string }> = async ({ req, data }) => {

72
examples/auth/payload/src/payload-types.ts
View File

@@ -8,23 +8,61 @@
export interface Config {
collections: {
users: User;
};
globals: {};
users: User
'payload-preferences': PayloadPreference
'payload-migrations': PayloadMigration
}
globals: {}
}
export interface User {
id: string;
firstName?: string;
lastName?: string;
roles?: ('admin' | 'user')[];
updatedAt: string;
createdAt: string;
email: string;
resetPasswordToken?: string;
resetPasswordExpiration?: string;
salt?: string;
hash?: string;
loginAttempts?: number;
lockUntil?: string;
password?: string;
id: string
firstName?: string
lastName?: string
roles?: ('admin' | 'user')[]
updatedAt: string
createdAt: string
email: string
resetPasswordToken?: string
resetPasswordExpiration?: string
salt?: string
hash?: string
loginAttempts?: number
lockUntil?: string
password?: string
}
export interface PayloadPreference {
id: string
user: {
relationTo: 'users'
value: string | User
}
key?: string
value?:
| {
[k: string]: unknown
}
| unknown[]
| string
| number
| boolean
| null
updatedAt: string
createdAt: string
}
export interface PayloadMigration {
id: string
name?: string
batch?: number
updatedAt: string
createdAt: string
}
declare module 'payload' {
export interface GeneratedTypes {
collections: {
users: User
'payload-preferences': PayloadPreference
'payload-migrations': PayloadMigration
}
}
}

8
examples/auth/payload/src/payload.config.ts
View File

@@ -1,3 +1,6 @@
import { webpackBundler } from '@payloadcms/bundler-webpack'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { slateEditor } from '@payloadcms/richtext-slate'
import path from 'path'
import { buildConfig } from 'payload/config'
@@ -7,10 +10,15 @@ import BeforeLogin from './components/BeforeLogin'
export default buildConfig({
collections: [Users],
admin: {
bundler: webpackBundler(),
components: {
beforeLogin: [BeforeLogin],
},
},
editor: slateEditor({}),
db: mongooseAdapter({
url: process.env.DATABASE_URI,
}),
cors: [
process.env.PAYLOAD_PUBLIC_SERVER_URL || '',
process.env.PAYLOAD_PUBLIC_SITE_URL || '',

1
examples/auth/payload/src/server.ts
View File

@@ -18,7 +18,6 @@ app.get('/', (_, res) => {
const start = async (): Promise<void> => {
await payload.init({
secret: process.env.PAYLOAD_SECRET,
mongoURL: process.env.MONGODB_URI,
express: app,
onInit: () => {
payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)

3
examples/auth/payload/tsconfig.json
View File

@@ -17,9 +17,6 @@
"moduleResolution": "node",
"resolveJsonModule": true,
"paths": {
"payload/generated-types": [
"./src/payload-types.ts"
],
"node_modules/*": [
"./node_modules/*"
]

3242
examples/auth/payload/yarn.lock
View File

File diff suppressed because it is too large Load Diff