Skip to content

Commit 2db3139

Browse files
CrawlerCodeCrawlerCode
committed
chore: Migrate to payload 3 stable version
1 parent 85a662e commit 2db3139

File tree

10 files changed

+1000
-989
lines changed

10 files changed

+1000
-989
lines changed

‎README.md‎

Lines changed: 159 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,159 @@
1-
# Payload CMS plugin for Auth.js
2-
3-
<a href="https://github.com/CrawlerCode/payload-authjs/actions/workflows/ci.yml"><img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/CrawlerCode/payload-authjs/ci.yml?style=flat-square&logo=github"></a>
4-
<a href="https://www.npmjs.com/package/payload-authjs"><img alt="NPM Version" src="https://img.shields.io/npm/v/payload-authjs?style=flat-square"></a>
5-
<a href="https://github.com/CrawlerCode/payload-authjs/blob/main/LICENSE"><img alt="NPM License" src="https://img.shields.io/npm/l/payload-authjs?style=flat-square"></a>
6-
<a href="https://www.npmjs.com/package/payload-authjs"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/payload-authjs?style=flat-square"></a>
7-
8-
A [Payload CMS 3 (beta)](https://payloadcms.com) plugin for integrating [Auth.js 5 (beta)](https://authjs.dev).
9-
10-
> ⚠ This plugin is in beta and under construction.
11-
> Payload CMS 3 and Auth.js 5 are also in beta.
12-
13-
## Installation
14-
15-
Install the plugin using any JavaScript package manager like PNPM, NPM, or Yarn:
16-
17-
```bash
18-
pnpm i payload-authjs
19-
```
20-
21-
Fist of all, setup Auth.js like you would do in a Next.js application. You can follow the [Auth.js documentation](https://authjs.dev/getting-started/installation?framework=Next.js).
22-
23-
> ⚠ Make sure you define your config in a separate file (e.g. `auth.config.ts`) than where you create the NextAuth instance (e.g. `auth.ts`) to avoid circular dependencies. ⚠
24-
25-
```ts
26-
// auth.config.ts
27-
import github from "next-auth/providers/github";
28-
29-
export const authConfig: NextAuthConfig = {
30-
providers: [
31-
github, // <-- Add your provider here
32-
],
33-
};
34-
```
35-
36-
Wrap your Auth.js configuration with the `withPayload` function before creating the NextAuth instance:
37-
38-
```ts
39-
// auth.ts
40-
import payloadConfig from "@payload-config";
41-
import NextAuth from "next-auth";
42-
import { withPayload } from "payload-authjs";
43-
import { authConfig } from "./auth.config"; // ⚠ Import the config from a separate file
44-
45-
export const { handlers, signIn, signOut, auth } = NextAuth(
46-
withPayload(authConfig, {
47-
payloadConfig,
48-
}),
49-
);
50-
```
51-
52-
Add the `authjsPlugin` in your Payload configuration file:
53-
54-
```ts
55-
// payload.config.ts
56-
import { authjsPlugin } from "payload-authjs";
57-
import { authConfig } from "./auth.config";
58-
59-
export const config = buildConfig({
60-
plugins: [
61-
authjsPlugin({
62-
authjsConfig: authConfig,
63-
}),
64-
],
65-
});
66-
```
67-
68-
**And that's it! Now you can sign-in via Auth.js and you are automatically authenticated in Payload CMS. Nice 🎉**
69-
70-
---
71-
72-
## Customizing
73-
74-
You don't need to create a collection for users. This plugin automatically creates a collection with the slug `users`.
75-
76-
But if you want to customize the users collection, you can create a collection with the slug `users` and add the fields you need.
77-
78-
```ts
79-
// users.ts
80-
import type { CollectionConfig } from "payload";
81-
82-
const Users: CollectionConfig = {
83-
slug: "users",
84-
fields: [
85-
{
86-
name: "roles",
87-
type: "json",
88-
},
89-
],
90-
};
91-
92-
export default Users;
93-
```
94-
95-
Next, you need to extend the user object returned by your Auth.js provider. You can do this like this example:
96-
97-
```ts
98-
const authConfig: NextAuthConfig = {
99-
providers: [
100-
github({
101-
profile(profile) {
102-
return {
103-
id: profile.id.toString(),
104-
name: profile.name,
105-
email: profile.email,
106-
image: profile.avatar_url,
107-
roles: ["user"], // <-- Extend the user object with a custom field
108-
};
109-
},
110-
}),
111-
],
112-
...
113-
};
114-
```
115-
116-
⚠ Keep in mind that Auth.js doesn't update the user after the first sign-in. If you want to update the user on every sign-in, you can use the `updateUserOnSignIn` option in the `withPayload` function:
117-
118-
```ts
119-
// auth.ts
120-
export const { handlers, signIn, signOut, auth } = NextAuth(
121-
withPayload(authConfig, {
122-
payloadConfig,
123-
updateUserOnSignIn: true, // <-- Update the user on every sign-in
124-
}),
125-
);
126-
```
127-
128-
Now you could access your custom field, e.g. in the access control operations:
129-
130-
```ts
131-
const Examples: CollectionConfig = {
132-
slug: "examples",
133-
access: {
134-
read: ({ req: { user } }) => {
135-
return user?.roles?.includes("user") ?? false; // <-- Check if the user has the role "user"
136-
},
137-
},
138-
fields: [
139-
...
140-
],
141-
};
142-
```
143-
144-
### Utility functions
145-
146-
This plugin also export a utility function to get the current payload user
147-
148-
```tsx
149-
// ServerComponentExample.tsx
150-
const ServerComponentExample = async () => {
151-
const payloadUser = await getPayloadUser();
152-
153-
return (
154-
<div>
155-
<h3>Payload CMS User</h3>
156-
<div>{JSON.stringify(payloadUser)}</div>
157-
</div>
158-
);
159-
};
160-
```
1+
# Payload CMS plugin for Auth.js/NextAuth
2+
3+
<a href="https://github.com/CrawlerCode/payload-authjs/actions/workflows/ci.yml"><img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/CrawlerCode/payload-authjs/ci.yml?style=flat-square&logo=github"></a>
4+
<a href="https://www.npmjs.com/package/payload-authjs"><img alt="NPM Version" src="https://img.shields.io/npm/v/payload-authjs?style=flat-square"></a>
5+
<a href="https://github.com/CrawlerCode/payload-authjs/blob/main/LICENSE"><img alt="NPM License" src="https://img.shields.io/npm/l/payload-authjs?style=flat-square"></a>
6+
<a href="https://www.npmjs.com/package/payload-authjs"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/payload-authjs?style=flat-square"></a>
7+
8+
A [Payload CMS 3](https://payloadcms.com) plugin for integrating [Auth.js 5 (beta)](https://authjs.dev).
9+
10+
> ⚠ This plugin and Auth.js is in beta and may have some bugs. Please report any issues you find.
11+
12+
## Installation
13+
14+
Install the plugin using any JavaScript package manager like PNPM, NPM, or Yarn:
15+
16+
```bash
17+
pnpm i payload-authjs
18+
```
19+
20+
Fist of all, setup Auth.js like you would do in a Next.js application. You can follow the [Auth.js documentation](https://authjs.dev/getting-started/installation?framework=Next.js).
21+
22+
> ⚠ Make sure you define your config in a separate file (e.g. `auth.config.ts`) than where you create the NextAuth instance (e.g. `auth.ts`) to avoid circular dependencies. ⚠
23+
24+
```ts
25+
// auth.config.ts
26+
import github from "next-auth/providers/github";
27+
28+
export const authConfig: NextAuthConfig = {
29+
providers: [
30+
github, // <-- Add your provider here
31+
],
32+
};
33+
```
34+
35+
Wrap your Auth.js configuration with the `withPayload` function before creating the NextAuth instance:
36+
37+
```ts
38+
// auth.ts
39+
import payloadConfig from "@payload-config";
40+
import NextAuth from "next-auth";
41+
import { withPayload } from "payload-authjs";
42+
import { authConfig } from "./auth.config"; // ⚠ Import the config from a separate file
43+
44+
export const { handlers, signIn, signOut, auth } = NextAuth(
45+
withPayload(authConfig, {
46+
payloadConfig,
47+
}),
48+
);
49+
```
50+
51+
Add the `authjsPlugin` in your Payload configuration file:
52+
53+
```ts
54+
// payload.config.ts
55+
import { authjsPlugin } from "payload-authjs";
56+
import { authConfig } from "./auth.config";
57+
58+
export const config = buildConfig({
59+
plugins: [
60+
authjsPlugin({
61+
authjsConfig: authConfig,
62+
}),
63+
],
64+
});
65+
```
66+
67+
**And that's it! Now you can sign-in via Auth.js and you are automatically authenticated in Payload CMS. Nice 🎉**
68+
69+
---
70+
71+
## Customizing
72+
73+
You don't need to create a collection for users. This plugin automatically creates a collection with the slug `users`.
74+
75+
But if you want to customize the users collection, you can create a collection with the slug `users` and add the fields you need.
76+
77+
```ts
78+
// users.ts
79+
import type { CollectionConfig } from "payload";
80+
81+
const Users: CollectionConfig = {
82+
slug: "users",
83+
fields: [
84+
{
85+
name: "roles",
86+
type: "json",
87+
},
88+
],
89+
};
90+
91+
export default Users;
92+
```
93+
94+
Next, you need to extend the user object returned by your Auth.js provider. You can do this like this example:
95+
96+
```ts
97+
const authConfig: NextAuthConfig = {
98+
providers: [
99+
github({
100+
profile(profile) {
101+
return {
102+
id: profile.id.toString(),
103+
name: profile.name,
104+
email: profile.email,
105+
image: profile.avatar_url,
106+
roles: ["user"], // <-- Extend the user object with a custom field
107+
};
108+
},
109+
}),
110+
],
111+
...
112+
};
113+
```
114+
115+
⚠ Keep in mind that Auth.js doesn't update the user after the first sign-in. If you want to update the user on every sign-in, you can use the `updateUserOnSignIn` option in the `withPayload` function:
116+
117+
```ts
118+
// auth.ts
119+
export const { handlers, signIn, signOut, auth } = NextAuth(
120+
withPayload(authConfig, {
121+
payloadConfig,
122+
updateUserOnSignIn: true, // <-- Update the user on every sign-in
123+
}),
124+
);
125+
```
126+
127+
Now you could access your custom field, e.g. in the access control operations:
128+
129+
```ts
130+
const Examples: CollectionConfig = {
131+
slug: "examples",
132+
access: {
133+
read: ({ req: { user } }) => {
134+
return user?.roles?.includes("user") ?? false; // <-- Check if the user has the role "user"
135+
},
136+
},
137+
fields: [
138+
...
139+
],
140+
};
141+
```
142+
143+
### Utility functions
144+
145+
This plugin also export a utility function to get the current payload user
146+
147+
```tsx
148+
// ServerComponentExample.tsx
149+
const ServerComponentExample = async () => {
150+
const payloadUser = await getPayloadUser();
151+
152+
return (
153+
<div>
154+
<h3>Payload CMS User</h3>
155+
<div>{JSON.stringify(payloadUser)}</div>
156+
</div>
157+
);
158+
};
159+
```

‎dev/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
"generate:importmap": "payload generate:importmap"
1616
},
1717
"dependencies": {
18-
"@payloadcms/db-postgres": "3.0.0-beta.120",
19-
"@payloadcms/next": "3.0.0-beta.120",
20-
"@payloadcms/ui": "3.0.0-beta.120",
18+
"@payloadcms/db-postgres": "3.0.0",
19+
"@payloadcms/next": "3.0.0",
20+
"@payloadcms/ui": "3.0.0",
2121
"jsonwebtoken": "^9.0.2",
22-
"next": "15.0.2",
22+
"next": "15.0.3",
2323
"next-auth": "5.0.0-beta.25",
2424
"nodemailer": "^6.9.16",
25-
"payload": "3.0.0-beta.120",
25+
"payload": "3.0.0",
2626
"react": "19.0.0-rc-02c0e824-20241028",
2727
"react-dom": "19.0.0-rc-02c0e824-20241028",
2828
"sharp": "^0.33.5",

‎dev/src/app/(app)/_components/ExampleList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import config from "@payload-config";
2-
import { getPayloadHMR } from "@payloadcms/next/utilities";
2+
import { getPayload } from "payload";
33
import { getPayloadUser } from "payload-authjs";
44

5-
const payload = await getPayloadHMR({ config });
5+
const payload = await getPayload({ config });
66

77
const ExampleList = async () => {
88
const payloadUser = await getPayloadUser();

‎dev/src/app/(payload)/layout.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
22
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
3-
import configPromise from '@payload-config'
3+
import config from '@payload-config'
44
import '@payloadcms/next/css'
5-
import { RootLayout } from '@payloadcms/next/layouts'
5+
import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
6+
import type { ServerFunctionClient } from 'payload'
67
import React from 'react'
78

9+
import { importMap } from './admin/importMap.js'
810
import './custom.scss'
9-
import { importMap } from './admin/importMap'
1011

1112
type Args = {
1213
children: React.ReactNode
1314
}
1415

16+
const serverFunction: ServerFunctionClient = async function (args) {
17+
'use server'
18+
return handleServerFunctions({
19+
...args,
20+
config,
21+
importMap,
22+
})
23+
}
24+
1525
const Layout = ({ children }: Args) => (
16-
<RootLayout importMap={importMap} config={configPromise}>
26+
<RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
1727
{children}
1828
</RootLayout>
1929
)
2030

21-
export default Layout
31+
export default Layout

0 commit comments

Comments
 (0)