Skip to content

Commit 193e8c3

Browse files
jnsdlsjnsdls
committed
add JWT signing and redirect for login flow
1 parent 2405456 commit 193e8c3

File tree

12 files changed

+450
-235
lines changed

12 files changed

+450
-235
lines changed

‎apps/login/next.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const nextConfig: NextConfig = {
55
async headers() {
66
return [
77
{
8-
source: "/api/request",
8+
source: "/api/:path*",
99
headers: [
1010
{
1111
key: "Access-Control-Allow-Origin",

‎apps/login/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"next": "15.1.6",
1818
"react": "19.0.0",
1919
"react-dom": "19.0.0",
20+
"server-only": "^0.0.1",
2021
"thirdweb": "workspace:*"
2122
},
2223
"devDependencies": {

‎apps/login/public/logo.svg

+19
Loading

‎apps/login/public/twl.js

+134-66
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,76 @@
22
(function () {
33
const globalSetup = getSetup();
44

5-
const USER_ADDRESS_KEY = "tw.login:userAddress";
6-
const SESSION_KEY_ADDRESS_KEY = "tw.login:sessionKeyAddress";
5+
const JWT_KEY = "tw.login:jwt";
76
const CODE_KEY = "tw.login:code";
87

9-
function main() {
10-
// check if redirected first, this sets up the logged in state if it was from redirect
11-
const params = parseURLHash(new URL(window.location));
12-
if (params && params.code === localStorage.getItem(CODE_KEY)) {
13-
// reset the URL hash
14-
window.location.hash = "";
15-
// reset the code
16-
localStorage.setItem(CODE_KEY, params.code);
17-
// write the userAddress to local storage
18-
localStorage.setItem(USER_ADDRESS_KEY, params.userAddress);
19-
// write the sessionKeyAddress to local storage
20-
localStorage.setItem(SESSION_KEY_ADDRESS_KEY, params.sessionKeyAddress);
21-
}
8+
// check if redirected first, this sets up the logged in state if it was from redirect
9+
const result = parseURL(new URL(window.location));
10+
if (
11+
result &&
12+
result.length === 2 &&
13+
result[1] === localStorage.getItem(CODE_KEY)
14+
) {
15+
// reset the URL
16+
window.location.hash = "";
17+
window.location.search = "";
2218

23-
const userAddress = localStorage.getItem(USER_ADDRESS_KEY);
24-
const sessionKeyAddress = localStorage.getItem(SESSION_KEY_ADDRESS_KEY);
19+
// write the jwt to local storage
20+
localStorage.setItem(JWT_KEY, result[0]);
21+
}
2522

26-
if (userAddress && sessionKeyAddress) {
27-
// handle logged in state
28-
handleIsLoggedIn();
29-
} else {
30-
// handle not logged in state
31-
handleNotLoggedIn();
32-
}
23+
// always reset the code
24+
localStorage.removeItem(CODE_KEY);
25+
26+
const jwt = localStorage.getItem(JWT_KEY);
27+
28+
if (jwt) {
29+
// handle logged in state
30+
handleIsLoggedIn();
31+
} else {
32+
// handle not logged in state
33+
handleNotLoggedIn();
3334
}
3435

3536
function handleIsLoggedIn() {
36-
console.log("handleIsLoggedIn");
37-
3837
window.thirdweb = {
3938
isLoggedIn: true,
40-
getAddress: () => getAddress(),
39+
getUser: async () => {
40+
const res = await fetch(`${globalSetup.baseUrl}/api/user`, {
41+
headers: {
42+
Authorization: `Bearer ${localStorage.getItem(JWT_KEY)}`,
43+
},
44+
});
45+
return res.json();
46+
},
4147
logout: () => {
42-
window.localStorage.removeItem(USER_ADDRESS_KEY);
43-
window.localStorage.removeItem(SESSION_KEY_ADDRESS_KEY);
48+
window.localStorage.removeItem(JWT_KEY);
4449
window.location.reload();
4550
},
4651
};
52+
53+
renderFloatingBubble(true);
4754
}
4855

4956
function handleNotLoggedIn() {
5057
window.thirdweb = { login: onLogin, isLoggedIn: false };
58+
renderFloatingBubble(false);
5159
}
5260

5361
function onLogin() {
54-
const code = window.crypto.getRandomValues(new Uint8Array(4)).join("");
62+
const code = window.crypto.getRandomValues(new Uint8Array(16)).join("");
5563
localStorage.setItem(CODE_KEY, code);
5664
// redirect to the login page
5765
const redirect = new URL(globalSetup.baseUrl);
5866
redirect.searchParams.set("code", code);
5967
redirect.searchParams.set("clientId", globalSetup.clientId);
60-
redirect.searchParams.set("redirect", window.location.href);
68+
redirect.searchParams.set(
69+
"redirect",
70+
window.location.origin + window.location.pathname,
71+
);
6172
window.location.href = redirect.href;
6273
}
6374

64-
function getAddress() {
65-
return localStorage.getItem(USER_ADDRESS_KEY);
66-
}
67-
6875
// utils
6976
function getSetup() {
7077
const el = document.currentScript;
@@ -74,52 +81,113 @@
7481
const baseUrl = new URL(el.src).origin;
7582
const dataset = el.dataset;
7683
const clientId = dataset.clientId;
84+
const theme = dataset.theme || "dark";
7785
if (!clientId) {
7886
throw new Error("Missing client-id");
7987
}
80-
return { clientId, baseUrl };
88+
return { clientId, baseUrl, theme };
8189
}
8290

8391
/**
8492
* @param {URL} url
85-
* @returns null | { [key: string]: string }
93+
* @returns null | [string, string]
8694
*/
87-
function parseURLHash(url) {
88-
if (!url.hash) {
89-
return null;
90-
}
95+
function parseURL(url) {
9196
try {
92-
return decodeHash(url.hash);
97+
const hash = url.hash.startsWith("#") ? url.hash.slice(1) : url.hash;
98+
const code = url.searchParams.get("code");
99+
if (!hash || !code) {
100+
return null;
101+
}
102+
return [hash, code];
93103
} catch {
94104
// if this fails, invalid data -> return null
95105
return null;
96106
}
97107
}
98108

99-
/**
100-
* Decodes a URL hash string to extract the three keys.
101-
*
102-
* @param {string} hash - A string like "#eyJrZXkxIjoiVmFsdWU..."
103-
* @returns {{ userAddress: string, sessionKeyAddress: string, code: string }} An object with the three keys
104-
*/
105-
function decodeHash(hash) {
106-
// Remove the "#" prefix, if present.
107-
const base64Data = hash.startsWith("#") ? hash.slice(1) : hash;
108-
109-
// Decode the Base64 string, then parse the JSON.
110-
const jsonString = atob(base64Data);
111-
const data = JSON.parse(jsonString);
112-
113-
// data should have the shape { userAddress, sessionKeyAddress, code }.
114-
if (
115-
"userAddress" in data &&
116-
"sessionKeyAddress" in data &&
117-
"code" in data
118-
) {
119-
return data;
120-
}
121-
return null;
109+
async function renderFloatingBubble(loggedIn) {
110+
const el = document.createElement("div");
111+
el.id = "tw-floating-bubble";
112+
el.style.position = "fixed";
113+
el.style.bottom = "24px";
114+
el.style.right = "24px";
115+
el.style.zIndex = "1000";
116+
el.style.width = "138px";
117+
el.style.height = "40px";
118+
el.style.backgroundColor =
119+
globalSetup.theme === "dark" ? "#131418" : "#ffffff";
120+
el.style.color = globalSetup.theme === "dark" ? "white" : "black";
121+
el.style.borderRadius = "8px";
122+
el.style.placeItems = "center";
123+
el.style.fontSize = loggedIn ? "12px" : "12px";
124+
el.style.cursor = "pointer";
125+
el.style.overflow = "hidden";
126+
el.style.boxShadow = "1px 1px 10px rgba(0, 0, 0, 0.5)";
127+
el.style.display = "flex";
128+
el.style.alignItems = "center";
129+
el.style.justifyContent = "space-around";
130+
el.style.fontFamily = "sans-serif";
131+
el.style.gap = "8px";
132+
el.style.padding = "0px 8px";
133+
el.onclick = () => {
134+
if (loggedIn) {
135+
window.thirdweb.logout();
136+
} else {
137+
window.thirdweb.login();
138+
}
139+
};
140+
el.innerHTML = loggedIn ? await renderBlobbie() : renderThirdwebLogo();
141+
document.body.appendChild(el);
142+
}
143+
144+
function renderThirdwebLogo() {
145+
const el = document.createElement("img");
146+
el.src = `${globalSetup.baseUrl}/logo.svg`;
147+
el.style.height = "16px";
148+
el.style.objectFit = "contain";
149+
el.style.flexShrink = "0";
150+
el.style.marginLeft = "-4px";
151+
return `${el.outerHTML} <span>Login</span><span></span>`;
122152
}
123153

124-
main();
154+
async function renderBlobbie() {
155+
const address = (await window.thirdweb.getUser()).address;
156+
157+
function hexToNumber(hex) {
158+
if (typeof hex !== "string")
159+
throw new Error(`hex string expected, got ${typeof hex}`);
160+
return hex === "" ? _0n : BigInt(`0x${hex}`);
161+
}
162+
163+
const COLOR_OPTIONS = [
164+
["#fca5a5", "#b91c1c"],
165+
["#fdba74", "#c2410c"],
166+
["#fcd34d", "#b45309"],
167+
["#fde047", "#a16207"],
168+
["#a3e635", "#4d7c0f"],
169+
["#86efac", "#15803d"],
170+
["#67e8f9", "#0e7490"],
171+
["#7dd3fc", "#0369a1"],
172+
["#93c5fd", "#1d4ed8"],
173+
["#a5b4fc", "#4338ca"],
174+
["#c4b5fd", "#6d28d9"],
175+
["#d8b4fe", "#7e22ce"],
176+
["#f0abfc", "#a21caf"],
177+
["#f9a8d4", "#be185d"],
178+
["#fda4af", "#be123c"],
179+
];
180+
const colors =
181+
COLOR_OPTIONS[
182+
Number(hexToNumber(address.slice(2, 4))) % COLOR_OPTIONS.length
183+
];
184+
const el = document.createElement("div");
185+
el.style.backgroundImage = `radial-gradient(ellipse at left bottom, ${colors[0]}, ${colors[1]})`;
186+
el.style.width = "24px";
187+
el.style.height = "24px";
188+
el.style.borderRadius = "50%";
189+
el.style.flexShrink = "0";
190+
191+
return `${el.outerHTML}<span>${address.slice(0, 6)}...${address.slice(-4)}</span><span></span>`;
192+
}
125193
})();

‎apps/login/public/twl.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/login/src/app/api/request/route.salty

-36
This file was deleted.

‎apps/login/src/app/api/user/route.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { type NextRequest, NextResponse } from "next/server";
2+
import { verifyJWT } from "../../authorization/jwt";
3+
4+
export const GET = async (req: NextRequest) => {
5+
const jwt = req.headers.get("Authorization")?.split("Bearer ")[1];
6+
if (!jwt) {
7+
return NextResponse.json(
8+
{
9+
message: "No JWT provided",
10+
},
11+
{
12+
status: 401,
13+
},
14+
);
15+
}
16+
17+
try {
18+
const verifiedPayload = await verifyJWT(jwt);
19+
return NextResponse.json({
20+
address: verifiedPayload.sub,
21+
});
22+
} catch (e) {
23+
console.error("failed", e);
24+
return NextResponse.json(
25+
{
26+
message: "Invalid JWT",
27+
},
28+
{
29+
status: 401,
30+
},
31+
);
32+
}
33+
};

0 commit comments

Comments
 (0)