X Tutup
Skip to content

Commit c2d6698

Browse files
CrawlerCodeCrawlerCode
committed
chore(dev): Improve session overview and sign in/out buttons
- Add logos for buttons and tabs - Add payload session section for payload.auth function - Add authjs sign in button (client) - Add payload sign in button (client) - Add authjs sign out button (client) - Add payload sign out button (server action)
1 parent 912da9a commit c2d6698

26 files changed

+379
-167
lines changed

‎packages/dev/src/app/(app)/_components/auth/SessionOverview.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Badge from "@/components/general/Badge";
2+
import type { User as PayloadUser } from "@/payload-types";
3+
import type { User as AuthJsUser } from "next-auth";
4+
import type { ComponentProps } from "react";
5+
import { ExpiresBadge } from "./ExpiresBadge";
6+
import { StatusBadge } from "./StatusBadge";
7+
8+
export const SessionOverview = ({
9+
status,
10+
user,
11+
expires,
12+
collection,
13+
strategy,
14+
onSessionRefresh,
15+
}: {
16+
status?: ComponentProps<typeof StatusBadge>["status"];
17+
user?: null | PayloadUser | AuthJsUser;
18+
expires?: string;
19+
collection?: string;
20+
strategy?: string;
21+
onSessionRefresh?: () => unknown;
22+
}) => {
23+
return (
24+
<>
25+
<div className="mb-2 flex gap-1">
26+
<StatusBadge status={status ?? (user ? "authenticated" : "unauthenticated")} />
27+
{expires && (
28+
<ExpiresBadge title="Session Expires" expiresAt={expires} onClick={onSessionRefresh} />
29+
)}
30+
<ExpiresBadge title="Account Expires" expiresAt={user?.currentAccount?.expiresAt} />
31+
<ExpiresBadge
32+
title="Account Refresh Token Expires"
33+
expiresAt={user?.currentAccount?.refreshExpiresAt}
34+
/>
35+
{collection ? <Badge variant="dark">Collection: {collection}</Badge> : null}
36+
{strategy ? <Badge variant="dark">Strategy: {strategy}</Badge> : null}
37+
</div>
38+
<pre className="overflow-auto rounded-lg bg-gray-100 p-4">
39+
{JSON.stringify(user ?? null, null, 2)}
40+
</pre>
41+
</>
42+
);
43+
};

‎packages/dev/src/app/(app)/_components/auth/SignInOrOutButtons.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import { getPayloadSession } from "payload-authjs";
2-
import { SignInButtonAuthjs } from "./authjs/SignInButtonAuthjs";
3-
import { SignOutButtonAuthjs } from "./authjs/SignOutButtonAuthjs";
4-
import { SignOutButtonPayload } from "./payload/SignOutButtonPayload";
2+
import { AuthjsSignInButtonClient } from "./authjs/AuthjsSignInButtonClient";
3+
import { AuthjsSignInButtonServerAction } from "./authjs/AuthjsSignInButtonServerAction";
4+
import { AuthjsSignOutButtonClient } from "./authjs/AuthjsSignOutButtonClient";
5+
import { AuthjsSignOutButtonServerAction } from "./authjs/AuthjsSignOutButtonServerAction";
6+
import { PayloadSignInButtonClient } from "./payload/PayloadSignInButtonClient";
7+
import { PayloadSignOutButtonClient } from "./payload/PayloadSignOutButtonClient";
8+
import { PayloadSignOutButtonServerAction } from "./payload/PayloadSignOutButtonServerAction";
59

610
export const SignInOrOutButtons = async () => {
711
const session = await getPayloadSession();
812

913
return (
10-
<section>
14+
<section className="flex gap-2">
1115
{session ? (
12-
<div className="flex">
13-
<SignOutButtonAuthjs />
14-
<SignOutButtonPayload />
15-
</div>
16+
<>
17+
<PayloadSignOutButtonServerAction />
18+
<PayloadSignOutButtonClient />
19+
<AuthjsSignOutButtonServerAction />
20+
<AuthjsSignOutButtonClient />
21+
</>
1622
) : (
17-
<SignInButtonAuthjs />
23+
<>
24+
<AuthjsSignInButtonServerAction />
25+
<AuthjsSignInButtonClient />
26+
<PayloadSignInButtonClient />
27+
</>
1828
)}
1929
</section>
2030
);

‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSessionClient.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
"use client";
22

33
import { useSession } from "next-auth/react";
4-
import { ExpiresBadge } from "../ExpiresBadge";
5-
import { StatusBadge } from "../StatusBadge";
4+
import { SessionOverview } from "../SessionOverview";
65

6+
/**
7+
* Get the Auth.js session using useSession hook on the client
8+
*
9+
* @see https://authjs.dev/getting-started/session-management/get-session?framework=Next.js%2520%28Client%29
10+
*/
711
export const AuthjsSessionClient = () => {
812
const { status, data: session } = useSession();
913

10-
return (
11-
<>
12-
<div className="mb-2 flex gap-1">
13-
<StatusBadge status={status} />
14-
<ExpiresBadge title="Session Expires" expiresAt={session?.expires} />
15-
</div>
16-
<pre className="overflow-auto rounded-lg bg-gray-100 p-4">
17-
{JSON.stringify(session?.user ?? null, null, 2)}
18-
</pre>
19-
</>
20-
);
14+
return <SessionOverview status={status} user={session?.user} expires={session?.expires} />;
2115
};

‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSessionServer.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import { auth } from "@/auth";
2-
import { ExpiresBadge } from "../ExpiresBadge";
3-
import { StatusBadge } from "../StatusBadge";
2+
import { SessionOverview } from "../SessionOverview";
43

4+
/**
5+
* Get the Auth.js session using auth function on the server
6+
*
7+
* @see https://authjs.dev/getting-started/session-management/get-session?framework=Next.js
8+
*/
59
export const AuthjsSessionServer = async () => {
610
const session = await auth();
711

8-
return (
9-
<>
10-
<div className="mb-2 flex gap-1">
11-
<StatusBadge status={session ? "authenticated" : "unauthenticated"} />
12-
<ExpiresBadge title="Session Expires" expiresAt={session?.expires} />
13-
</div>
14-
<pre className="overflow-auto rounded-lg bg-gray-100 p-4">
15-
{JSON.stringify(session?.user ?? null, null, 2)}
16-
</pre>
17-
</>
18-
);
12+
return <SessionOverview user={session?.user} expires={session?.expires} />;
1913
};

‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSignInButtonClient.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
"use client";
2+
3+
import { Button } from "@/components/general/Button";
4+
import { AuthjsLogo } from "@/components/img/AuthjsLogo";
5+
import { signIn } from "next-auth/react";
6+
7+
/**
8+
* Sign in using Auth.js on the client
9+
*
10+
* @see https://authjs.dev/getting-started/session-management/login?framework=Next.js
11+
*/
12+
export function AuthjsSignInButtonClient() {
13+
return (
14+
<Button onClick={() => signIn()}>
15+
<AuthjsLogo />
16+
Sign In (client)
17+
</Button>
18+
);
19+
}

‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSignInButtonServerAction.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { signIn } from "@/auth";
2+
import { Button } from "@/components/general/Button";
3+
import { AuthjsLogo } from "@/components/img/AuthjsLogo";
4+
5+
/**
6+
* Sign in using Auth.js with a server action
7+
*
8+
* @see https://authjs.dev/getting-started/session-management/login?framework=Next.js
9+
*/
10+
export function AuthjsSignInButtonServerAction() {
11+
return (
12+
<form
13+
action={async () => {
14+
"use server";
15+
16+
await signIn();
17+
}}
18+
>
19+
<Button type="submit">
20+
<AuthjsLogo />
21+
Sign In (server action)
22+
</Button>
23+
</form>
24+
);
25+
}

‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSignOutButtonClient.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
"use client";
2+
3+
import { Button } from "@/components/general/Button";
4+
import { AuthjsLogo } from "@/components/img/AuthjsLogo";
5+
import { signOut } from "next-auth/react";
6+
7+
/**
8+
* Sign out using Auth.js on the client
9+
*
10+
* @see https://authjs.dev/getting-started/session-management/login?framework=Next.js
11+
*/
12+
export function AuthjsSignOutButtonClient() {
13+
return (
14+
<Button onClick={() => signOut()}>
15+
<AuthjsLogo />
16+
Sign Out (client)
17+
</Button>
18+
);
19+
}

‎packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSignOutButtonServerAction.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { signOut } from "@/auth";
2+
import { Button } from "@/components/general/Button";
3+
import { AuthjsLogo } from "@/components/img/AuthjsLogo";
4+
5+
/**
6+
* Sign out using Auth.js with a server action
7+
*
8+
* @see https://authjs.dev/getting-started/session-management/login?framework=Next.js
9+
*/
10+
export function AuthjsSignOutButtonServerAction() {
11+
return (
12+
<form
13+
action={async () => {
14+
"use server";
15+
16+
await signOut();
17+
}}
18+
>
19+
<Button type="submit">
20+
<AuthjsLogo />
21+
Sign Out (server action)
22+
</Button>
23+
</form>
24+
);
25+
}

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

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

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

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

0 commit comments

Comments
 (0)
X Tutup