From 193e8c3eb009800c44201c96141419874178be2c Mon Sep 17 00:00:00 2001 From: Jonas Daniels Date: Thu, 30 Jan 2025 17:53:57 -0800 Subject: [PATCH] add JWT signing and redirect for login flow --- apps/login/next.config.ts | 2 +- apps/login/package.json | 1 + apps/login/public/logo.svg | 19 ++ apps/login/public/twl.js | 200 ++++++++++++------ apps/login/public/twl.min.js | 2 +- apps/login/src/app/api/request/route.salty | 36 ---- apps/login/src/app/api/user/route.ts | 33 +++ apps/login/src/app/authorization/jwt.ts | 58 +++++ .../src/app/components/LoginPageInner.tsx | 186 ++++++++++++++++ apps/login/src/app/page.tsx | 134 +----------- apps/login/test/script-test.html | 11 + pnpm-lock.yaml | 3 + 12 files changed, 450 insertions(+), 235 deletions(-) create mode 100644 apps/login/public/logo.svg delete mode 100644 apps/login/src/app/api/request/route.salty create mode 100644 apps/login/src/app/api/user/route.ts create mode 100644 apps/login/src/app/authorization/jwt.ts create mode 100644 apps/login/src/app/components/LoginPageInner.tsx create mode 100644 apps/login/test/script-test.html diff --git a/apps/login/next.config.ts b/apps/login/next.config.ts index 5739e8a7b4a..8f6e5b90427 100644 --- a/apps/login/next.config.ts +++ b/apps/login/next.config.ts @@ -5,7 +5,7 @@ const nextConfig: NextConfig = { async headers() { return [ { - source: "/api/request", + source: "/api/:path*", headers: [ { key: "Access-Control-Allow-Origin", diff --git a/apps/login/package.json b/apps/login/package.json index 1c07d2eaf9d..9db6725cd30 100644 --- a/apps/login/package.json +++ b/apps/login/package.json @@ -17,6 +17,7 @@ "next": "15.1.6", "react": "19.0.0", "react-dom": "19.0.0", + "server-only": "^0.0.1", "thirdweb": "workspace:*" }, "devDependencies": { diff --git a/apps/login/public/logo.svg b/apps/login/public/logo.svg new file mode 100644 index 00000000000..765b88b3eb2 --- /dev/null +++ b/apps/login/public/logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/apps/login/public/twl.js b/apps/login/public/twl.js index 3c0f3b00fc2..ea15dfdd63f 100644 --- a/apps/login/public/twl.js +++ b/apps/login/public/twl.js @@ -2,69 +2,76 @@ (function () { const globalSetup = getSetup(); - const USER_ADDRESS_KEY = "tw.login:userAddress"; - const SESSION_KEY_ADDRESS_KEY = "tw.login:sessionKeyAddress"; + const JWT_KEY = "tw.login:jwt"; const CODE_KEY = "tw.login:code"; - function main() { - // check if redirected first, this sets up the logged in state if it was from redirect - const params = parseURLHash(new URL(window.location)); - if (params && params.code === localStorage.getItem(CODE_KEY)) { - // reset the URL hash - window.location.hash = ""; - // reset the code - localStorage.setItem(CODE_KEY, params.code); - // write the userAddress to local storage - localStorage.setItem(USER_ADDRESS_KEY, params.userAddress); - // write the sessionKeyAddress to local storage - localStorage.setItem(SESSION_KEY_ADDRESS_KEY, params.sessionKeyAddress); - } + // check if redirected first, this sets up the logged in state if it was from redirect + const result = parseURL(new URL(window.location)); + if ( + result && + result.length === 2 && + result[1] === localStorage.getItem(CODE_KEY) + ) { + // reset the URL + window.location.hash = ""; + window.location.search = ""; - const userAddress = localStorage.getItem(USER_ADDRESS_KEY); - const sessionKeyAddress = localStorage.getItem(SESSION_KEY_ADDRESS_KEY); + // write the jwt to local storage + localStorage.setItem(JWT_KEY, result[0]); + } - if (userAddress && sessionKeyAddress) { - // handle logged in state - handleIsLoggedIn(); - } else { - // handle not logged in state - handleNotLoggedIn(); - } + // always reset the code + localStorage.removeItem(CODE_KEY); + + const jwt = localStorage.getItem(JWT_KEY); + + if (jwt) { + // handle logged in state + handleIsLoggedIn(); + } else { + // handle not logged in state + handleNotLoggedIn(); } function handleIsLoggedIn() { - console.log("handleIsLoggedIn"); - window.thirdweb = { isLoggedIn: true, - getAddress: () => getAddress(), + getUser: async () => { + const res = await fetch(`${globalSetup.baseUrl}/api/user`, { + headers: { + Authorization: `Bearer ${localStorage.getItem(JWT_KEY)}`, + }, + }); + return res.json(); + }, logout: () => { - window.localStorage.removeItem(USER_ADDRESS_KEY); - window.localStorage.removeItem(SESSION_KEY_ADDRESS_KEY); + window.localStorage.removeItem(JWT_KEY); window.location.reload(); }, }; + + renderFloatingBubble(true); } function handleNotLoggedIn() { window.thirdweb = { login: onLogin, isLoggedIn: false }; + renderFloatingBubble(false); } function onLogin() { - const code = window.crypto.getRandomValues(new Uint8Array(4)).join(""); + const code = window.crypto.getRandomValues(new Uint8Array(16)).join(""); localStorage.setItem(CODE_KEY, code); // redirect to the login page const redirect = new URL(globalSetup.baseUrl); redirect.searchParams.set("code", code); redirect.searchParams.set("clientId", globalSetup.clientId); - redirect.searchParams.set("redirect", window.location.href); + redirect.searchParams.set( + "redirect", + window.location.origin + window.location.pathname, + ); window.location.href = redirect.href; } - function getAddress() { - return localStorage.getItem(USER_ADDRESS_KEY); - } - // utils function getSetup() { const el = document.currentScript; @@ -74,52 +81,113 @@ const baseUrl = new URL(el.src).origin; const dataset = el.dataset; const clientId = dataset.clientId; + const theme = dataset.theme || "dark"; if (!clientId) { throw new Error("Missing client-id"); } - return { clientId, baseUrl }; + return { clientId, baseUrl, theme }; } /** * @param {URL} url - * @returns null | { [key: string]: string } + * @returns null | [string, string] */ - function parseURLHash(url) { - if (!url.hash) { - return null; - } + function parseURL(url) { try { - return decodeHash(url.hash); + const hash = url.hash.startsWith("#") ? url.hash.slice(1) : url.hash; + const code = url.searchParams.get("code"); + if (!hash || !code) { + return null; + } + return [hash, code]; } catch { // if this fails, invalid data -> return null return null; } } - /** - * Decodes a URL hash string to extract the three keys. - * - * @param {string} hash - A string like "#eyJrZXkxIjoiVmFsdWU..." - * @returns {{ userAddress: string, sessionKeyAddress: string, code: string }} An object with the three keys - */ - function decodeHash(hash) { - // Remove the "#" prefix, if present. - const base64Data = hash.startsWith("#") ? hash.slice(1) : hash; - - // Decode the Base64 string, then parse the JSON. - const jsonString = atob(base64Data); - const data = JSON.parse(jsonString); - - // data should have the shape { userAddress, sessionKeyAddress, code }. - if ( - "userAddress" in data && - "sessionKeyAddress" in data && - "code" in data - ) { - return data; - } - return null; + async function renderFloatingBubble(loggedIn) { + const el = document.createElement("div"); + el.id = "tw-floating-bubble"; + el.style.position = "fixed"; + el.style.bottom = "24px"; + el.style.right = "24px"; + el.style.zIndex = "1000"; + el.style.width = "138px"; + el.style.height = "40px"; + el.style.backgroundColor = + globalSetup.theme === "dark" ? "#131418" : "#ffffff"; + el.style.color = globalSetup.theme === "dark" ? "white" : "black"; + el.style.borderRadius = "8px"; + el.style.placeItems = "center"; + el.style.fontSize = loggedIn ? "12px" : "12px"; + el.style.cursor = "pointer"; + el.style.overflow = "hidden"; + el.style.boxShadow = "1px 1px 10px rgba(0, 0, 0, 0.5)"; + el.style.display = "flex"; + el.style.alignItems = "center"; + el.style.justifyContent = "space-around"; + el.style.fontFamily = "sans-serif"; + el.style.gap = "8px"; + el.style.padding = "0px 8px"; + el.onclick = () => { + if (loggedIn) { + window.thirdweb.logout(); + } else { + window.thirdweb.login(); + } + }; + el.innerHTML = loggedIn ? await renderBlobbie() : renderThirdwebLogo(); + document.body.appendChild(el); + } + + function renderThirdwebLogo() { + const el = document.createElement("img"); + el.src = `${globalSetup.baseUrl}/logo.svg`; + el.style.height = "16px"; + el.style.objectFit = "contain"; + el.style.flexShrink = "0"; + el.style.marginLeft = "-4px"; + return `${el.outerHTML} Login`; } - main(); + async function renderBlobbie() { + const address = (await window.thirdweb.getUser()).address; + + function hexToNumber(hex) { + if (typeof hex !== "string") + throw new Error(`hex string expected, got ${typeof hex}`); + return hex === "" ? _0n : BigInt(`0x${hex}`); + } + + const COLOR_OPTIONS = [ + ["#fca5a5", "#b91c1c"], + ["#fdba74", "#c2410c"], + ["#fcd34d", "#b45309"], + ["#fde047", "#a16207"], + ["#a3e635", "#4d7c0f"], + ["#86efac", "#15803d"], + ["#67e8f9", "#0e7490"], + ["#7dd3fc", "#0369a1"], + ["#93c5fd", "#1d4ed8"], + ["#a5b4fc", "#4338ca"], + ["#c4b5fd", "#6d28d9"], + ["#d8b4fe", "#7e22ce"], + ["#f0abfc", "#a21caf"], + ["#f9a8d4", "#be185d"], + ["#fda4af", "#be123c"], + ]; + const colors = + COLOR_OPTIONS[ + Number(hexToNumber(address.slice(2, 4))) % COLOR_OPTIONS.length + ]; + const el = document.createElement("div"); + el.style.backgroundImage = `radial-gradient(ellipse at left bottom, ${colors[0]}, ${colors[1]})`; + el.style.width = "24px"; + el.style.height = "24px"; + el.style.borderRadius = "50%"; + el.style.flexShrink = "0"; + + return `${el.outerHTML}${address.slice(0, 6)}...${address.slice(-4)}`; + } })(); diff --git a/apps/login/public/twl.min.js b/apps/login/public/twl.min.js index 926bec5a19c..126cda5e518 100644 --- a/apps/login/public/twl.min.js +++ b/apps/login/public/twl.min.js @@ -1 +1 @@ -!function(){const e=function e(){const t=document.currentScript;if(!t)throw Error("Could not find script element");const s=new URL(t.src).origin,n=t.dataset,r=n.clientId;if(!r)throw Error("Missing client-id");return{clientId:r,baseUrl:s}}(),t="tw.login:userAddress",s="tw.login:sessionKeyAddress",n="tw.login:code";function r(){const t=window.crypto.getRandomValues(new Uint8Array(4)).join("");localStorage.setItem(n,t);const s=new URL(e.baseUrl);s.searchParams.set("code",t),s.searchParams.set("clientId",e.clientId),s.searchParams.set("redirect",window.location.href),window.location.href=s.href}!function e(){const o=function e(t){if(!t.hash)return null;try{return function e(t){const s=t.startsWith("#")?t.slice(1):t,n=atob(s),r=JSON.parse(n);return"userAddress"in r&&"sessionKeyAddress"in r&&"code"in r?r:null}(t.hash)}catch{return null}}(new URL(window.location));o&&o.code===localStorage.getItem(n)&&(window.location.hash="",localStorage.setItem(n,o.code),localStorage.setItem(t,o.userAddress),localStorage.setItem(s,o.sessionKeyAddress));const i=localStorage.getItem(t),l=localStorage.getItem(s);i&&l?(console.log("handleIsLoggedIn"),window.thirdweb={isLoggedIn:!0,getAddress:()=>localStorage.getItem(t),logout(){window.localStorage.removeItem(t),window.localStorage.removeItem(s),window.location.reload()}}):window.thirdweb={login:r,isLoggedIn:!1}}()}(); \ No newline at end of file +!function(){let e=function e(){let t=document.currentScript;if(!t)throw Error("Could not find script element");let a=new URL(t.src).origin,n=t.dataset,l=n.clientId,s=n.theme||"dark";if(!l)throw Error("Missing client-id");return{clientId:l,baseUrl:a,theme:s}}(),t="tw.login:jwt",a="tw.login:code",n=function e(t){try{let a=t.hash.startsWith("#")?t.hash.slice(1):t.hash,n=t.searchParams.get("code");if(!a||!n)return null;return[a,n]}catch{return null}}(new URL(window.location));n&&2===n.length&&n[1]===localStorage.getItem(a)&&(window.location.hash="",window.location.search="",localStorage.setItem(t,n[0])),localStorage.removeItem(a);let l=localStorage.getItem(t);function s(){let t=window.crypto.getRandomValues(new Uint8Array(16)).join("");localStorage.setItem(a,t);let n=new URL(e.baseUrl);n.searchParams.set("code",t),n.searchParams.set("clientId",e.clientId),n.searchParams.set("redirect",window.location.origin+window.location.pathname),window.location.href=n.href}async function i(t){let a=document.createElement("div");a.id="tw-floating-bubble",a.style.position="fixed",a.style.bottom="24px",a.style.right="24px",a.style.zIndex="1000",a.style.width="138px",a.style.height="40px",a.style.backgroundColor="dark"===e.theme?"#131418":"#ffffff",a.style.color="dark"===e.theme?"white":"black",a.style.borderRadius="8px",a.style.placeItems="center",a.style.fontSize="12px",a.style.cursor="pointer",a.style.overflow="hidden",a.style.boxShadow="1px 1px 10px rgba(0, 0, 0, 0.5)",a.style.display="flex",a.style.alignItems="center",a.style.justifyContent="space-around",a.style.fontFamily="sans-serif",a.style.gap="8px",a.style.padding="0px 8px",a.onclick=()=>{t?window.thirdweb.logout():window.thirdweb.login()},a.innerHTML=t?await r():function t(){let a=document.createElement("img");return a.src=`${e.baseUrl}/logo.svg`,a.style.height="16px",a.style.objectFit="contain",a.style.flexShrink="0",a.style.marginLeft="-4px",`${a.outerHTML} Login`}(),document.body.appendChild(a)}async function r(){let e=(await window.thirdweb.getUser()).address,t=[["#fca5a5","#b91c1c"],["#fdba74","#c2410c"],["#fcd34d","#b45309"],["#fde047","#a16207"],["#a3e635","#4d7c0f"],["#86efac","#15803d"],["#67e8f9","#0e7490"],["#7dd3fc","#0369a1"],["#93c5fd","#1d4ed8"],["#a5b4fc","#4338ca"],["#c4b5fd","#6d28d9"],["#d8b4fe","#7e22ce"],["#f0abfc","#a21caf"],["#f9a8d4","#be185d"],["#fda4af","#be123c"],],a=t[Number(function e(t){if("string"!=typeof t)throw Error(`hex string expected, got ${typeof t}`);return""===t?_0n:BigInt(`0x${t}`)}(e.slice(2,4)))%t.length],n=document.createElement("div");return n.style.backgroundImage=`radial-gradient(ellipse at left bottom, ${a[0]}, ${a[1]})`,n.style.width="24px",n.style.height="24px",n.style.borderRadius="50%",n.style.flexShrink="0",`${n.outerHTML}${e.slice(0,6)}...${e.slice(-4)}`}l?(window.thirdweb={isLoggedIn:!0,async getUser(){let a=await fetch(`${e.baseUrl}/api/user`,{headers:{Authorization:`Bearer ${localStorage.getItem(t)}`}});return a.json()},logout(){window.localStorage.removeItem(t),window.location.reload()}},i(!0)):(window.thirdweb={login:s,isLoggedIn:!1},i(!1))}(); \ No newline at end of file diff --git a/apps/login/src/app/api/request/route.salty b/apps/login/src/app/api/request/route.salty deleted file mode 100644 index b3bbb679d10..00000000000 --- a/apps/login/src/app/api/request/route.salty +++ /dev/null @@ -1,36 +0,0 @@ -import { type NextRequest, NextResponse } from "next/server"; - -export const POST = async (req: NextRequest) => { - const body = await req.json(); - const userAddress = body.userAddress; - const sessionKeyAddress = body.sessionKeyAddress; - if (!userAddress || !sessionKeyAddress) { - return NextResponse.json( - { - message: "Missing userAddress or sessionKeyAddress", - }, - { status: 400 }, - ); - } - const url = `${ENGINE_URL}/contract/84532/0x638263e3eAa3917a53630e61B1fBa685308024fa/erc1155/claim-to`; - - console.log("url", url); - - const res = await fetch(url, { - method: "POST", - headers: { - authorization: `Bearer ${ACCESS_TOKEN}`, - "x-account-address": userAddress, - "x-backend-wallet-address": sessionKeyAddress, - "content-type": "application/json", - }, - body: JSON.stringify({ - receiver: userAddress, - tokenId: "0", - quantity: "1", - }), - }); - const data = await res.json(); - - return NextResponse.json(data, { status: res.status }); -}; diff --git a/apps/login/src/app/api/user/route.ts b/apps/login/src/app/api/user/route.ts new file mode 100644 index 00000000000..00a6e92115b --- /dev/null +++ b/apps/login/src/app/api/user/route.ts @@ -0,0 +1,33 @@ +import { type NextRequest, NextResponse } from "next/server"; +import { verifyJWT } from "../../authorization/jwt"; + +export const GET = async (req: NextRequest) => { + const jwt = req.headers.get("Authorization")?.split("Bearer ")[1]; + if (!jwt) { + return NextResponse.json( + { + message: "No JWT provided", + }, + { + status: 401, + }, + ); + } + + try { + const verifiedPayload = await verifyJWT(jwt); + return NextResponse.json({ + address: verifiedPayload.sub, + }); + } catch (e) { + console.error("failed", e); + return NextResponse.json( + { + message: "Invalid JWT", + }, + { + status: 401, + }, + ); + } +}; diff --git a/apps/login/src/app/authorization/jwt.ts b/apps/login/src/app/authorization/jwt.ts new file mode 100644 index 00000000000..0d5cd3d7113 --- /dev/null +++ b/apps/login/src/app/authorization/jwt.ts @@ -0,0 +1,58 @@ +"server only"; + +import "server-only"; +import { createThirdwebClient } from "thirdweb"; +import { verifyEOASignature } from "thirdweb/auth"; +import { decodeJWT, encodeJWT, stringify } from "thirdweb/utils"; +import { privateKeyToAccount, randomPrivateKey } from "thirdweb/wallets"; + +const client = createThirdwebClient({ + clientId: "e9ba48c289e0cc3d06a23bfd370cc111", +}); +const privateKey = process.env.THIRDWEB_ADMIN_PRIVATE_KEY || randomPrivateKey(); + +if (!privateKey) { + throw new Error("Missing THIRDWEB_ADMIN_PRIVATE_KEY"); +} + +const serverAccount = privateKeyToAccount({ + client, + privateKey: privateKey, +}); + +export async function signJWT(data: { + address: string; + sessionKeySignerAddress: string; + code: string; +}) { + "use server"; + return await encodeJWT({ + account: serverAccount, + payload: { + iss: serverAccount.address, + sub: data.address, + aud: data.sessionKeySignerAddress, + exp: new Date(Date.now() + 1000 * 60 * 60), + nbf: new Date(), + iat: new Date(), + jti: data.code, + }, + }); +} + +export async function verifyJWT(jwt: string) { + const { payload, signature } = decodeJWT(jwt); + + console.log("payload", payload); + console.log("signature", signature); + // verify the signature + const verified = await verifyEOASignature({ + message: stringify(payload), + signature, + address: serverAccount.address, + }); + if (!verified) { + throw new Error("Invalid JWT signature"); + } + return payload; +} diff --git a/apps/login/src/app/components/LoginPageInner.tsx b/apps/login/src/app/components/LoginPageInner.tsx new file mode 100644 index 00000000000..ebbeb3fa72b --- /dev/null +++ b/apps/login/src/app/components/LoginPageInner.tsx @@ -0,0 +1,186 @@ +"use client"; + +import { useSearchParams } from "next/navigation"; +import { createThirdwebClient, getContract } from "thirdweb"; +import { baseSepolia } from "thirdweb/chains"; +import { addSessionKey, isActiveSigner } from "thirdweb/extensions/erc4337"; +import { + AccountAddress, + AccountBlobbie, + AccountProvider, + ConnectEmbed, + TransactionButton, + useActiveAccount, +} from "thirdweb/react"; +import { isContractDeployed, shortenAddress } from "thirdweb/utils"; + +const sessionKeySignerAddress = "0x6f700ba0258886411D2536399624EAa7158d1742"; + +export function LoginPageInner({ + generateJWT, +}: { + generateJWT: (opts: { + address: string; + sessionKeySignerAddress: string; + code: string; + }) => Promise; +}) { + const account = useActiveAccount(); + + const searchParams = useSearchParams(); + const code = searchParams.get("code"); + // const clientId = searchParams.get("clientId"); + const redirect = searchParams.get("redirect"); + + const client = createThirdwebClient({ + clientId: "e9ba48c289e0cc3d06a23bfd370cc111", + }); + return ( +
+ {account ? ( +
+ +
+ +
+ +
+
+ +
+
+

Grant Permissions

+

+ App.xyz is asking you to grant it the following + permissions: +

+
+
+
    +
  • + ✅Read your wallet address. +
    • +
+
+
    +
  • + ⚠️Interact with all{" "} + contracts on Base Sepolia +
    • +
  • + ⚠️Spend all your + funds on Base Sepolia +
    • +
  • + 📆Granted until{" "} + 02/02/2025 +
    • +
+
+
+ + { + if (!account) { + throw new Error("No account found"); + } + if (!code) { + throw new Error("No code found"); + } + if (!redirect) { + throw new Error("No redirect found"); + } + const accountContract = getContract({ + address: account.address, + // hard coded for now + chain: baseSepolia, + client, + }); + let hasSessionKey = false; + // check if already added + const accountDeployed = + await isContractDeployed(accountContract); + if (accountDeployed) { + hasSessionKey = await isActiveSigner({ + contract: accountContract, + signer: sessionKeySignerAddress, + }); + } + // if not added, send tx to add the session key + if (!hasSessionKey) { + return addSessionKey({ + account, + contract: accountContract, + sessionKeyAddress: sessionKeySignerAddress, + // hard coded for now + permissions: { approvedTargets: "*" }, + }); + } + throw "already-added"; + }} + onError={async (e) => { + if (!code) { + throw new Error("No code found"); + } + if (!redirect) { + throw new Error("No redirect found"); + } + if (typeof e === "string" && e === "already-added") { + // sign jwt + const jwt = await generateJWT({ + address: account.address, + sessionKeySignerAddress, + code, + }); + // redirect + window.location.href = `${redirect}?code=${code}#${jwt}`; + } else { + console.error(e); + } + }} + onTransactionConfirmed={async () => { + if (!code) { + throw new Error("No code found"); + } + if (!redirect) { + throw new Error("No redirect found"); + } + // sign jwt + const jwt = await generateJWT({ + address: account.address, + sessionKeySignerAddress, + code, + }); + // redirect + window.location.href = `${redirect}?code=${code}#${jwt}`; + }} + > + Approve + +
+
+ ) : ( + + )} +
+ ); +} diff --git a/apps/login/src/app/page.tsx b/apps/login/src/app/page.tsx index f349223f254..2802c6068d2 100644 --- a/apps/login/src/app/page.tsx +++ b/apps/login/src/app/page.tsx @@ -1,134 +1,6 @@ -"use client"; - -import { useSearchParams } from "next/navigation"; -import { createThirdwebClient, getContract } from "thirdweb"; -import { baseSepolia } from "thirdweb/chains"; -import { addSessionKey, isActiveSigner } from "thirdweb/extensions/erc4337"; -import { - ConnectEmbed, - TransactionButton, - useActiveAccount, -} from "thirdweb/react"; -import { isContractDeployed } from "thirdweb/utils"; - -const sesionKeySignerAddress = "0x6f700ba0258886411D2536399624EAa7158d1742"; - -const client = createThirdwebClient({ - clientId: "e9ba48c289e0cc3d06a23bfd370cc111", -}); +import { signJWT } from "./authorization/jwt"; +import { LoginPageInner } from "./components/LoginPageInner"; export default function Page() { - const account = useActiveAccount(); - - const searchParams = useSearchParams(); - const code = searchParams.get("code"); - const clientId = searchParams.get("clientId"); - const redirect = searchParams.get("redirect"); - - console.log({ code, clientId, redirect }); - - return ( -
- {account ? ( -
-

Grant Permissions

-

- App.xyz is asking you to grant it the following - permissions: -

-
    -
  • ✅ Receive your identity information.
    • -
  • - ✅ Interact with all contracts on{" "} - Base Sepolia -
    • -
  • - ✅ Spend all your funds on{" "} - Base Sepolia -
    • -
-

- By approving below you will grant App.xyz these - permissions until 02/02/2025. -

- { - if (!account) { - throw new Error("No account found"); - } - const accountContract = getContract({ - address: account.address, - // hard coded for now - chain: baseSepolia, - client, - }); - let hasSesionKey = false; - // check if already added - const accountDeployed = await isContractDeployed(accountContract); - if (accountDeployed) { - hasSesionKey = await isActiveSigner({ - contract: accountContract, - signer: sesionKeySignerAddress, - }); - } - // if not added, send tx to add the session key - if (!hasSesionKey) { - return addSessionKey({ - account, - contract: accountContract, - sessionKeyAddress: sesionKeySignerAddress, - // hard coded for now - permissions: { approvedTargets: "*" }, - }); - } - throw "already-added"; - }} - onError={(e) => { - if (typeof e === "string" && e === "already-added") { - // redirect back to the app - window.location.href = `${redirect}${encodeHash( - account.address, - sesionKeySignerAddress, - code || "", - )}`; - } else { - console.error(e); - } - }} - onTransactionConfirmed={() => { - // redirect back to the app - window.location.href = `${redirect}${encodeHash( - account.address, - sesionKeySignerAddress, - code || "", - )}`; - }} - > - Approve - -
- ) : ( - - )} -
- ); -} - -function encodeHash( - userAddress: string, - sessionKeyAddress: string, - code: string, -) { - // Create an object with the three keys. - const data = { userAddress, sessionKeyAddress, code }; - - // Convert to JSON and then Base64-encode the result. - const jsonString = JSON.stringify(data); - const base64Data = btoa(jsonString); - - // Return as a hash string (with the "#" prefix). - return `#${base64Data}`; + return ; } diff --git a/apps/login/test/script-test.html b/apps/login/test/script-test.html new file mode 100644 index 00000000000..676a82189ea --- /dev/null +++ b/apps/login/test/script-test.html @@ -0,0 +1,11 @@ + + + +

Test Page

+ + + + + + + \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ccdbf895c1..d2aef405bb1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -422,6 +422,9 @@ importers: react-dom: specifier: 19.0.0 version: 19.0.0(react@19.0.0) + server-only: + specifier: ^0.0.1 + version: 0.0.1 thirdweb: specifier: workspace:* version: link:../../packages/thirdweb