add JWT signing and redirect for login flow

Author: jnsdls

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",

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": {

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,114 @@
     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 =
+      "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDMiIGhlaWdodD0iNTQ5IiB2aWV3Qm94PSIwIDAgOTAzIDU0OSIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTQ3NS4wNjEuOTI2YTM5LjQ1IDM5LjQ1IDAgMCAxIDE1LjI5NyA2LjgxIDM1Ljg2IDM1Ljg2IDAgMCAxIDExLjI5OCAxNS40OHEyMS43MjIgNTQuMzQ3IDQzLjQ0MyAxMDguNjI3YTM5MzM3IDM5MzM3IDAgMCAwIDQ4LjMxNSAxMjAuNzU4YzguNDM1IDIxLjEwOCAxNi44MjcgNDIuMjM4IDI1LjM5MyA2My4zMDJhMzQuOTcgMzQuOTcgMCAwIDEgMCAyNy4yMzlsLTczLjU5OSAxODMuNjAxYy00Ljg3MyAxMi4xNTItMTMuNzAyIDE5LjcwNi0yNi42ODIgMjEuNjc3LTE2LjE0OSAyLjQzMS0zMC41OTMtNS41NC0zNi40MjgtMTkuNzA3LTEzLjgxMS0zMy45NjEtMjcuMzE2LTY4LjAzMS00MC45My0xMDIuMDhsLTY5LjIyOC0xNzMuMmExNDI0NjMgMTQyNDYzIDAgMCAwLTYxLjU4MS0xNTQuMTVjLTYuODE3LTE3LjA1Ny0xMy40MTctMzQuMjAxLTIwLjU0MS01MS4xMjdhMzQuMiAzNC4yIDAgMCAxIC45OTQtMjguOTQyIDM0LjEgMzQuMSAwIDAgMSA5LjQzOS0xMS40MjcgMzQuMDUgMzQuMDUgMCAwIDEgMTMuMzg2LTYuMzM2Yy41OS0uMTMxIDEuMTU5LS4zNSAxLjcyNy0uNTI1eiIgZmlsbD0idXJsKCNhKSIvPjxwYXRoIGQ9Ik0xODguMjM5LjkyNmMxLjgxMy41MDQgMy42MjcuOTQxIDUuMzk3IDEuNTU1YTMyLjMgMzIuMyAwIDAgMSAxMi4zNzIgNy4xOSAzMi40IDMyLjQgMCAwIDEgOC4wNiAxMS44MzhBMzQxODEgMzQxODEgMCAwIDEgMjYxLjI3IDEzOS4zMXEyMy43NzUgNTkuNDI3IDQ3LjU1MSAxMTguODc1IDExLjYyNSAyOS4xNDUgMjMuMzYgNTguMjY2YTMzLjg1IDMzLjg1IDAgMCAxIDAgMjYuMjc2cS0xMy4xMTIgMzIuNzEzLTI2LjIyMyA2NS40MDRsLTQ4LjA3NiAxMTkuNjg1YTMzLjggMzMuOCAwIDAgMS0xMi4zNTcgMTUuMjkzIDMzLjcgMzMuNyAwIDAgMS0xOC43NiA1LjgxNSAzNC4zNSAzNC4zNSAwIDAgMS0xOS45MDktNS45MzMgMzQuNDUgMzQuNDUgMCAwIDEtMTIuODctMTYuMzM1Yy0xNC44MTYtMzcuNTk2LTI5LjkzOC03NS4wODMtNDQuOTI5LTExMi42MTNhNDEyMjkgNDEyMjkgMCAwIDAtNjAuNTc1LTE1Mi4zMzIgNDk1MDIwIDQ5NTAyMCAwIDAgMS02MS45NTEtMTU0Ljk2QzE4LjcwNyA4Ny4xOTcgMTAuOTUgNjcuNjAxIDMuMDE3IDQ4LjA2OUEzNC4xIDM0LjEgMCAwIDEgMi41NSAyMi41IDM0LjAyIDM0LjAyIDAgMCAxIDE5Ljk3NSAzLjgxNmE2NSA2NSAwIDAgMSA4LjkzNy0yLjg5eiIgZmlsbD0idXJsKCNiKSIvPjxwYXRoIGQ9Ik05MDIuODIgMzM0Ljg1OGMtNC4zNyAxNC43OC0xMC45MjYgMjguNzI4LTE2LjQ5OCA0Mi45ODNhMzE5NjkgMzE5NjkgMCAwIDEtNDguNjQ0IDEyMS41OWMtMy43MzcgOS4yODQtNy41MzkgMTguNTQ2LTExLjE2NyAyNy44NzRhMzQuMyAzNC4zIDAgMCAxLTEyLjY0MSAxNS42NzEgMzQuMTkgMzQuMTkgMCAwIDEtMzguNDQ4LS4xMTkgMzQuMyAzNC4zIDAgMCAxLTEyLjU0NS0xNS43NDlsLTcwLjc1OC0xNzYuOTY2LTYxLjE4Ny0xNTIuODU4YTQwMjk2OCA0MDI5NjggMCAwIDEtNTkuODc2LTE0OS43MDUgMzMuODUgMzMuODUgMCAwIDEgMS4yMTEtMjguNTc3IDMzLjggMzMuOCAwIDAgMSA5LjM5Ny0xMS4yMjMgMzMuNyAzMy43IDAgMCAxIDEzLjI1NS02LjE4MmMuNjU2LS4xNTMgMS4yODktLjM3MiAxLjk0NS0uNTdoMTU5LjY5OGMuNTAyLjE1NC45ODMuMzUxIDEuNDg2LjQ2YTM0IDM0IDAgMCAxIDE1LjE2MyA3LjQ2OCAzNC4xIDM0LjEgMCAwIDEgOS43MDUgMTMuODYgMjQ5MzIgMjQ5MzIgMCAwIDAgMjcuOTI3IDY5Ljg3IDMxNTMzMyAzMTUzMzMgMCAwIDEgNzMuMTQgMTgyLjk2NmM2LjQwMyAxNi4wNzIgMTMuNTI3IDMxLjg1OSAxOC43NzIgNDguMzY5eiIgZmlsbD0idXJsKCNjKSIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjI2Mi4zMjgiIHkxPSI0NS40MTkiIHgyPSI2NDcuMDIzIiB5Mj0iNDI5LjM0NCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjAwQTgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2MjAwQzYiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeDE9Ii0yNC4zNDIiIHkxPSI0NS4yODgiIHgyPSIzNjAuMjY1IiB5Mj0iNDI5LjEyNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjAwQTgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2MjAwQzYiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjU0My43NjIiIHkxPSI0NS4yOCIgeDI9IjkyOC4zOTIiIHkyPSI0MjkuMTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjRkYwMEE4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjIwMEM2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+";
+    el.style.height = "16px";
+    el.style.objectFit = "contain";
+    el.style.flexShrink = "0";
+    el.style.marginLeft = "-4px";
+    return `${el.outerHTML} <span>Login</span><span></span>`;
   }
 
-  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}<span>${address.slice(0, 6)}...${address.slice(-4)}</span><span></span>`;
+  }
 })();