Skip to content

Commit 57637ab

Browse files
CrawlerCodeCrawlerCode
committed
chore(dev): Added all different options to get the session & add tailwind
1 parent 146eebe commit 57637ab

23 files changed

+999
-340
lines changed

‎packages/dev/.prettierrc.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import baseConfig from "../../.prettierrc.json" assert { type: "json" };
2+
3+
/**
4+
* @type {import("prettier").Config}
5+
*/
6+
const config = {
7+
...baseConfig,
8+
plugins: ["prettier-plugin-tailwindcss"],
9+
tailwindStylesheet: "./src/app/(app)/globals.scss",
10+
};
11+
12+
export default config;

‎packages/dev/package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,22 @@
1414
"dependencies": {
1515
"@payloadcms/db-postgres": "3.21.0",
1616
"@payloadcms/next": "3.21.0",
17+
"@payloadcms/translations": "^3.21.0",
1718
"@payloadcms/ui": "3.21.0",
19+
"@tailwindcss/postcss": "^4.0.5",
20+
"clsx": "^2.1.1",
1821
"jsonwebtoken": "^9.0.2",
1922
"next": "15.1.6",
2023
"next-auth": "5.0.0-beta.25",
2124
"nodemailer": "^6.10.0",
2225
"payload": "3.21.0",
2326
"pino-pretty": "^13.0.0",
27+
"postcss": "^8.5.1",
28+
"prettier-plugin-tailwindcss": "^0.6.11",
2429
"react": "19.0.0",
2530
"react-dom": "19.0.0",
26-
"sharp": "^0.33.5"
31+
"sharp": "^0.33.5",
32+
"tailwindcss": "^4.0.5"
2733
},
2834
"devDependencies": {
2935
"@types/jsonwebtoken": "^9.0.8",

‎packages/dev/postcss.config.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const config = {
2+
plugins: {
3+
"@tailwindcss/postcss": {},
4+
},
5+
};
6+
export default config;

‎packages/dev/src/app/(app)/_components/AuthOverview.tsx

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎packages/dev/src/app/(app)/_components/SignInButtonAuthjs.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/dev/src/app/(app)/_components/SignOutButtonAuthjs.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/dev/src/app/(app)/globals.scss

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,6 @@
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-
}
1+
@import "tailwindcss";
212

22-
pre {
23-
background: #ededed;
24-
padding: 15px;
25-
border-radius: 10px;
26-
overflow: auto;
3+
@utility container {
4+
margin-inline: auto;
5+
padding-inline: 2rem;
276
}

‎packages/dev/src/app/(app)/page.tsx

Lines changed: 52 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,57 @@
1-
import AuthOverview from "./_components/AuthOverview";
2-
import ExampleList from "./_components/ExampleList";
1+
import { PayloadSessionProvider } from "payload-authjs";
2+
import { AuthjsProviders } from "../components/auth/authjs/AuthjsProviders";
3+
import { AuthjsSessionClient } from "../components/auth/authjs/AuthjsSessionClient";
4+
import { AuthjsSessionServer } from "../components/auth/authjs/AuthjsSessionServer";
5+
import { PayloadAuthProvider } from "../components/auth/payload/PayloadAuthProvider";
6+
import { PayloadSessionClientWithUseAuth } from "../components/auth/payload/PayloadSessionClientWithUseAuth";
7+
import { PayloadSessionClientWithUsePayloadSession } from "../components/auth/payload/PayloadSessionClientWithUsePayloadSession";
8+
import { PayloadSessionServer } from "../components/auth/payload/PayloadSessionServer";
9+
import { SignInOrOutButtons } from "../components/auth/SignInOrOutButtons";
10+
import ExampleList from "../components/ExampleList";
11+
import { Tabs } from "../components/general/Tabs";
312

4-
const Page = () => {
13+
const Page = async () => {
514
return (
6-
<main>
7-
<AuthOverview />
8-
<br />
15+
<main className="container mt-5">
16+
<SignInOrOutButtons />
17+
18+
<Tabs
19+
tabs={[
20+
{
21+
label: "Payload [getPayloadSession] (server)",
22+
content: <PayloadSessionServer />,
23+
},
24+
{
25+
label: "Payload [usePayloadSession] (client)",
26+
content: (
27+
<PayloadSessionProvider>
28+
<PayloadSessionClientWithUsePayloadSession />
29+
</PayloadSessionProvider>
30+
),
31+
},
32+
{
33+
label: "Payload [useAuth] (client)",
34+
content: (
35+
<PayloadAuthProvider>
36+
<PayloadSessionClientWithUseAuth />
37+
</PayloadAuthProvider>
38+
),
39+
},
40+
{
41+
label: "Auth.js [auth] (server)",
42+
content: <AuthjsSessionServer />,
43+
},
44+
{
45+
label: "Auth.js [useSession] (client)",
46+
content: (
47+
<AuthjsProviders>
48+
<AuthjsSessionClient />
49+
</AuthjsProviders>
50+
),
51+
},
52+
]}
53+
/>
54+
955
<ExampleList />
1056
</main>
1157
);

‎packages/dev/src/app/(app)/_components/ExampleList.tsx renamed to ‎packages/dev/src/app/components/ExampleList.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import config from "@payload-config";
22
import { getPayload } from "payload";
3-
import { getPayloadUser } from "payload-authjs";
3+
import { getPayloadSession } from "payload-authjs";
44

55
const payload = await getPayload({ config });
66

77
const ExampleList = async () => {
8-
const payloadUser = await getPayloadUser();
9-
if (!payloadUser) {
8+
const session = await getPayloadSession();
9+
10+
if (!session) {
1011
return <p>Sign in to see examples</p>;
1112
}
1213

@@ -16,25 +17,25 @@ const ExampleList = async () => {
1617
collection: "examples",
1718
// Use the current user's access level
1819
overrideAccess: false,
19-
user: payloadUser,
20+
user: session.user,
2021
});
2122
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2223
} catch (error: any) {
2324
return <p>Failed to load examples: {error.message}</p>;
2425
}
2526

2627
return (
27-
<div>
28-
<h1>Examples</h1>
29-
<ul>
28+
<section>
29+
<h1 className="text-xl font-bold">Examples</h1>
30+
<ul className="list-disc pl-7">
3031
{examples.docs.map(example => (
3132
<li key={example.id}>
3233
<p>{JSON.stringify(example)}</p>
3334
</li>
3435
))}
3536
{examples.docs.length === 0 && <p>No examples found</p>}
3637
</ul>
37-
</div>
38+
</section>
3839
);
3940
};
4041

‎packages/dev/src/app/components/auth/SignInOrOutButtons.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { getPayloadSession } from "payload-authjs";
2+
import { SignInButtonAuthjs } from "./authjs/SignInButtonAuthjs";
3+
import { SignOutButtonAuthjs } from "./authjs/SignOutButtonAuthjs";
4+
import { SignOutButtonPayload } from "./payload/SignOutButtonPayload";
5+
6+
export const SignInOrOutButtons = async () => {
7+
const session = await getPayloadSession();
8+
9+
return (
10+
<section>
11+
{session ? (
12+
<div className="flex">
13+
<SignOutButtonAuthjs />
14+
<SignOutButtonPayload />
15+
</div>
16+
) : (
17+
<SignInButtonAuthjs />
18+
)}
19+
</section>
20+
);
21+
};

0 commit comments

Comments
 (0)