Skip to content

Commit baa762d

Browse files
committed
example(with-payload-local-strategy-example): Add example for using payload local strategy
1 parent a8f43dd commit baa762d

File tree

29 files changed

+1337
-78
lines changed

29 files changed

+1337
-78
lines changed
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Payload
2+
DATABASE_URI=postgres://postgres:<password>@127.0.0.1:5432/your-database-name
3+
PAYLOAD_SECRET=YOUR_SECRET_HERE
4+
5+
# Auth.js
6+
AUTH_SECRET=YOUR_SECRET_HERE
7+
AUTH_GITHUB_ID=YOUR_GITHUB_ID
8+
AUTH_GITHUB_SECRET=YOUR_GITHUB_SECRET
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
/.idea/*
10+
!/.idea/runConfigurations
11+
12+
# testing
13+
/coverage
14+
15+
# next.js
16+
/.next/
17+
/out/
18+
19+
# production
20+
/build
21+
22+
# misc
23+
.DS_Store
24+
*.pem
25+
26+
# debug
27+
npm-debug.log*
28+
yarn-debug.log*
29+
yarn-error.log*
30+
31+
# local env files
32+
.env*.local
33+
34+
# vercel
35+
.vercel
36+
37+
# typescript
38+
*.tsbuildinfo
39+
next-env.d.ts
40+
41+
.env
42+
43+
/media
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# With Payload local-strategy Example
2+
3+
This example demonstrates how to use the `payload-authjs` plugin with the Payload [Local JWT Strategy](https://payloadcms.com/docs/authentication/jwt).
4+
5+
## Configuration
6+
7+
- The Auth.js configuration is located in `src/auth.config.ts` and the NextAuth instance is created in `src/auth.ts`.
8+
- In the Payload CMS configuration (`src/payload.config.ts`), we added the `payload-authjs` plugin.
9+
- The [Local JWT Strategy](https://payloadcms.com/docs/authentication/jwt) is enabled via the `enableLocalStrategy` option in the `payload-authjs` plugin.
10+
- And additionally, the [API Key Strategy](https://payloadcms.com/docs/authentication/api-keys) is enabled via the `auth.useAPIKey` option in `src/payload/collections/users.ts`.
11+
12+
## Setup
13+
14+
1. Rename the `.env.example` file to `.env` and update the values with your secrets.
15+
2. Install dependencies: `pnpm install`
16+
3. Start the development server: `pnpm run dev`
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { FlatCompat } from "@eslint/eslintrc";
2+
import { dirname } from "path";
3+
import { fileURLToPath } from "url";
4+
5+
const __filename = fileURLToPath(import.meta.url);
6+
const __dirname = dirname(__filename);
7+
8+
const compat = new FlatCompat({
9+
baseDirectory: __dirname,
10+
});
11+
12+
const eslintConfig = [
13+
...compat.extends("next/core-web-vitals", "next/typescript"),
14+
{
15+
ignores: ["src/app/(payload)/"],
16+
},
17+
{
18+
rules: {
19+
"@typescript-eslint/ban-ts-comment": "warn",
20+
"@typescript-eslint/no-empty-object-type": "warn",
21+
"@typescript-eslint/no-explicit-any": "warn",
22+
"@typescript-eslint/no-unused-vars": [
23+
"warn",
24+
{
25+
vars: "all",
26+
args: "after-used",
27+
ignoreRestSiblings: false,
28+
argsIgnorePattern: "^_",
29+
varsIgnorePattern: "^_",
30+
destructuredArrayIgnorePattern: "^_",
31+
caughtErrorsIgnorePattern: "^(_|ignore)",
32+
},
33+
],
34+
},
35+
},
36+
];
37+
38+
export default eslintConfig;
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { withPayload } from "@payloadcms/next/withPayload";
2+
3+
/** @type {import('next').NextConfig} */
4+
const nextConfig = {};
5+
6+
export default withPayload(nextConfig);
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "with-payload-local-strategy-example",
3+
"version": "1.0.0",
4+
"description": "An example of Payload CMS using payload-authjs plugin with the payload local strategy",
5+
"private": true,
6+
"type": "module",
7+
"scripts": {
8+
"build": "cross-env NODE_OPTIONS=--no-deprecation next build",
9+
"dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
10+
"devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
11+
"generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
12+
"generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
13+
"lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
14+
"payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
15+
"start": "cross-env NODE_OPTIONS=--no-deprecation next start"
16+
},
17+
"dependencies": {
18+
"@payloadcms/db-postgres": "^3.31.0",
19+
"@payloadcms/next": "^3.31.0",
20+
"@payloadcms/richtext-lexical": "^3.31.0",
21+
"cross-env": "^7.0.3",
22+
"graphql": "^16.10.0",
23+
"next": "15.2.4",
24+
"next-auth": "5.0.0-beta.25",
25+
"payload": "^3.31.0",
26+
"payload-authjs": "workspace:*",
27+
"react": "19.0.0",
28+
"react-dom": "19.0.0",
29+
"sharp": "0.33.5"
30+
},
31+
"devDependencies": {
32+
"@eslint/eslintrc": "^3.3.1",
33+
"@next/eslint-plugin-next": "^15.2.4",
34+
"@types/node": "^22.13.14",
35+
"@types/react": "19.0.12",
36+
"@types/react-dom": "19.0.4",
37+
"eslint": "^9.23.0",
38+
"eslint-config-next": "15.2.4",
39+
"eslint-plugin-react-hooks": "^5.2.0",
40+
"typescript": "5.8.2"
41+
},
42+
"engines": {
43+
"node": "^18.20.2 || >=20.9.0"
44+
}
45+
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
3+
"sourceRoot": "examples/with-payload-local-strategy/src",
4+
"projectType": "application",
5+
"targets": {}
6+
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { signIn } from "@/auth";
2+
3+
export function SignInButton() {
4+
return (
5+
<form
6+
action={async () => {
7+
"use server";
8+
await signIn("github");
9+
}}
10+
>
11+
<button type="submit">Sign In</button>
12+
</form>
13+
);
14+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
"use client";
2+
3+
import type { CollectionSlug } from "payload";
4+
5+
export function SignOutButton({
6+
userCollectionSlug = "users",
7+
}: {
8+
userCollectionSlug?: CollectionSlug;
9+
}) {
10+
return (
11+
<button
12+
type="button"
13+
onClick={async () => {
14+
await fetch(`/api/${userCollectionSlug}/logout`, {
15+
method: "POST",
16+
headers: {
17+
"Content-Type": "application/json",
18+
},
19+
});
20+
window.location.reload();
21+
}}
22+
>
23+
Sign Out
24+
</button>
25+
);
26+
}
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
html,
2+
body {
3+
font-family: "Roboto", "Inter", sans-serif;
4+
}
5+
6+
main {
7+
max-width: 37.5rem;
8+
margin-top: 5rem;
9+
margin-bottom: 5rem;
10+
margin-left: auto;
11+
margin-right: auto;
12+
}
13+
14+
button {
15+
cursor: pointer;
16+
background: #ededed;
17+
padding: 10px 25px;
18+
border-radius: 10px;
19+
border: 2px solid #ccc;
20+
}
21+
22+
pre {
23+
background: #ededed;
24+
padding: 15px;
25+
border-radius: 10px;
26+
overflow: auto;
27+
}

0 commit comments

Comments
 (0)