/
page.tsx
125 lines (117 loc) · 3.57 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import Image from "next/image";
import { UserCard } from "@/components/UserCard";
import { createSaleorAuthClient } from "@saleor/auth-sdk";
import { getNextServerCookiesStorage } from "@saleor/auth-sdk/next/server";
import { saleorApiUrl } from "@/lib";
interface StorageRepository {
getItem(key: string): string | null;
removeItem(key: string): void;
setItem(key: string, value: string): void;
}
const nextServerCookiesStorage = getNextServerCookiesStorage();
const saleorAuthClient = createSaleorAuthClient({
saleorApiUrl,
refreshTokenStorage: nextServerCookiesStorage,
accessTokenStorage: nextServerCookiesStorage,
});
const CurrentUserDocument = /* graphql */ `
query CurrentUser {
me {
id
email
firstName
lastName
avatar {
url
alt
}
}
}
`;
export default async function PageSSR() {
const { data } = await saleorAuthClient
.fetchWithAuth(saleorApiUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ query: CurrentUserDocument }),
cache: 'no-store',
})
.then((res) => res.json());
return (
<>
<div className="rounded mb-8 w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
<div>
This example shows how to use Saleor Auth SDK with Next.js 13+ (App
Dir).
</div>
</div>
{data?.me ? (
<>
<UserCard {...data.me} />
<form
action={async () => {
"use server";
saleorAuthClient.signOut();
}}
>
<button
className="bg-slate-800 text-slate-200 hover:bg-slate-700 rounded py-2 px-4"
type="submit"
>
Log Out
</button>
</form>
</>
) : (
<div className="w-full max-w-lg mx-auto">
<div className="mb-10 flex justify-center">
<Image src={`/saleor.png`} alt="Saleor" width={75} height={75} />
</div>
<form
className="bg-white shadow-md rounded p-8"
action={async (formData) => {
"use server";
const email = formData.get("email");
const password = formData.get("password");
if (!email || !password) {
throw new Error("Email and password are required");
}
const response = await saleorAuthClient.signIn(
{
email: email.toString(),
password: password.toString(),
},
{ cache: "no-store" }
);
}}
>
<div className="mb-2">
<input
type="email"
name="email"
placeholder="Email"
className="border rounded bg-gray-50 px-4 py-2 w-full"
/>
</div>
<div className="mb-4">
<input
type="password"
name="password"
placeholder="Password"
className="border rounded bg-gray-50 px-4 py-2 w-full"
/>
</div>
<button
className="bg-slate-800 text-slate-200 hover:bg-slate-700 rounded py-2 px-4"
type="submit"
>
Log In
</button>
</form>
</div>
)}
</>
);
}