Skip to content

Commit 83332d6

Browse files
spacesailor24spacesailor24
committed
WIP PKP mint with Google auth. This commit has a bug using SDK v7
1 parent 14bce04 commit 83332d6

File tree

13 files changed

+2124
-778
lines changed

13 files changed

+2124
-778
lines changed

‎session-signatures/generating-a-session/using-pkp/auth-with-google-oauth/.env.example

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here
2+
VITE_LIT_NETWORK=DatilTest
3+
VITE_LIT_CAPACITY_CREDIT_TOKEN_ID=your_capacity_credit_token_id_here

‎session-signatures/generating-a-session/using-pkp/auth-with-google-oauth/index.html

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
8-
<style>
9-
body,
10-
html {
11-
margin: 0;
12-
height: 100%;
13-
display: flex;
14-
justify-content: center;
15-
align-items: center;
16-
}
17-
#root {
18-
width: 100%;
19-
text-align: center;
20-
}
21-
</style>
7+
<title>Google PKP Auth</title>
228
</head>
239
<body>
2410
<div id="root"></div>

‎session-signatures/generating-a-session/using-pkp/auth-with-google-oauth/package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,20 @@
1313
"dependencies": {
1414
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
1515
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
16-
"@lit-protocol/constants": "^7.0.0",
17-
"@lit-protocol/lit-auth-client": "^7.0.0",
18-
"@lit-protocol/lit-node-client": "^7.0.0",
16+
"@lit-protocol/auth-helpers": "^7.0.2",
17+
"@lit-protocol/constants": "^7.0.2",
18+
"@lit-protocol/contracts-sdk": "^7.0.2",
19+
"@lit-protocol/lit-auth-client": "^7.0.2",
20+
"@lit-protocol/lit-node-client": "^7.0.2",
21+
"@lit-protocol/types": "^7.0.2",
1922
"@react-oauth/google": "^0.12.1",
2023
"@simplewebauthn/browser": "^10.0.0",
2124
"@vitejs/plugin-react-swc": "^3.7.0",
2225
"jwt-decode": "^4.0.0",
2326
"react": "^18.3.1",
2427
"react-dom": "^18.3.1",
2528
"rollup-plugin-polyfill-node": "^0.13.0",
29+
"typestub-ipfs-only-hash": "^4.0.0",
2630
"vite-plugin-node-polyfills": "^0.22.0"
2731
},
2832
"devDependencies": {

‎session-signatures/generating-a-session/using-pkp/auth-with-google-oauth/src/App.css

Lines changed: 171 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,163 @@
1+
:root {
2+
--primary-color: #646cff;
3+
--primary-hover: #535bf2;
4+
--background-color: #1a1b26;
5+
--card-background: #24283b;
6+
--text-color: #c0caf5;
7+
--border-color: #414868;
8+
--code-background: #1f2335;
9+
--success-color: #9ece6a;
10+
--success-background: rgba(158, 206, 106, 0.2);
11+
--error-color: #f7768e;
12+
--error-background: rgba(247, 118, 142, 0.2);
13+
--card-width: 800px;
14+
--content-width: 100%;
15+
}
16+
17+
html {
18+
background-color: var(--background-color);
19+
}
20+
21+
body {
22+
background-color: var(--background-color);
23+
color: var(--text-color);
24+
margin: 0;
25+
min-height: 100vh;
26+
overflow-y: auto;
27+
}
28+
129
#root {
2-
max-width: 1280px;
30+
width: 100%;
31+
max-width: var(--card-width);
332
margin: 0 auto;
433
padding: 2rem;
534
text-align: center;
635
}
736

37+
.card {
38+
width: var(--card-width);
39+
min-height: 100px;
40+
padding: 2em;
41+
background: var(--card-background);
42+
border-radius: 8px;
43+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
44+
margin-bottom: 1.5rem;
45+
border: 1px solid var(--border-color);
46+
box-sizing: border-box;
47+
margin-left: auto;
48+
margin-right: auto;
49+
}
50+
51+
button {
52+
background-color: var(--primary-color);
53+
color: white;
54+
border: none;
55+
padding: 0.6em 1.2em;
56+
border-radius: 6px;
57+
font-weight: 500;
58+
cursor: pointer;
59+
transition: background-color 0.2s;
60+
}
61+
62+
button:hover:not(:disabled) {
63+
background-color: var(--primary-hover);
64+
}
65+
66+
button:disabled {
67+
background-color: #9ca3af;
68+
cursor: not-allowed;
69+
opacity: 0.7;
70+
}
71+
72+
input {
73+
width: 100%;
74+
max-width: 300px;
75+
background-color: var(--code-background);
76+
color: var(--text-color);
77+
border: 1px solid var(--border-color);
78+
border-radius: 6px;
79+
padding: 0.6em 1.2em;
80+
font-size: 1em;
81+
transition: border-color 0.2s;
82+
box-sizing: border-box;
83+
}
84+
85+
input:focus {
86+
outline: none;
87+
border-color: var(--primary-color);
88+
box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.1);
89+
}
90+
91+
input::placeholder {
92+
color: #565f89;
93+
}
94+
95+
.code-wrap {
96+
width: var(--content-width);
97+
min-height: 50px;
98+
max-height: 300px;
99+
overflow-y: auto;
100+
word-break: break-all;
101+
background: var(--code-background);
102+
color: #a9b1d6;
103+
padding: 1rem;
104+
border-radius: 8px;
105+
font-family: monospace;
106+
font-size: 0.9rem;
107+
text-align: left;
108+
margin: 0.5rem 0;
109+
white-space: pre-wrap;
110+
border: 1px solid var(--border-color);
111+
box-sizing: border-box;
112+
}
113+
114+
hr {
115+
border: none;
116+
border-top: 1px solid var(--border-color);
117+
margin: 1.5rem 0 1rem;
118+
}
119+
120+
h3,
121+
h4 {
122+
color: var(--text-color);
123+
margin-top: 0;
124+
}
125+
126+
.error-message {
127+
width: var(--content-width);
128+
min-height: 50px;
129+
display: flex;
130+
align-items: center;
131+
justify-content: center;
132+
padding: 0.75rem;
133+
border-radius: 6px;
134+
margin: 1rem 0;
135+
box-sizing: border-box;
136+
}
137+
138+
.card:last-child {
139+
margin-bottom: 2rem;
140+
}
141+
142+
/* Success message styling */
143+
.success-message {
144+
width: var(--content-width);
145+
min-height: 50px;
146+
display: flex;
147+
align-items: center;
148+
justify-content: center;
149+
padding: 0.75rem;
150+
border-radius: 6px;
151+
margin: 1rem 0;
152+
box-sizing: border-box;
153+
}
154+
155+
/* Add some spacing between elements */
156+
.card > div {
157+
width: var(--content-width);
158+
margin: 1rem 0;
159+
}
160+
8161
.logo {
9162
height: 6em;
10163
padding: 1.5em;
@@ -33,10 +186,23 @@
33186
}
34187
}
35188

36-
.card {
37-
padding: 2em;
38-
}
39-
40189
.read-the-docs {
41190
color: #888;
42191
}
192+
193+
/* Add container for input and button */
194+
.input-button-container {
195+
width: var(--content-width);
196+
display: flex;
197+
gap: 1rem;
198+
align-items: center;
199+
justify-content: center;
200+
margin-bottom: 1rem;
201+
}
202+
203+
.auth-container {
204+
display: flex;
205+
justify-content: center;
206+
align-items: center;
207+
margin: 1rem 0;
208+
}

0 commit comments

Comments
 (0)