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,28 +2,32 @@
 (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
+    const result = parseURL(new URL(window.location));
+    console.log(result);
+    if (
+      result &&
+      result.length === 2 &&
+      result[1] === localStorage.getItem(CODE_KEY)
+    ) {
+      // reset the URL
       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);
+      window.location.search = "";
+
+      // write the jwt to local storage
+      localStorage.setItem(JWT_KEY, result[0]);
     }
 
-    const userAddress = localStorage.getItem(USER_ADDRESS_KEY);
-    const sessionKeyAddress = localStorage.getItem(SESSION_KEY_ADDRESS_KEY);
+    // always reset the code
+    localStorage.removeItem(CODE_KEY);
 
-    if (userAddress && sessionKeyAddress) {
+    const jwt = localStorage.getItem(JWT_KEY);
+
+    if (jwt) {
       // handle logged in state
       handleIsLoggedIn();
     } else {
@@ -37,10 +41,16 @@
 
     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();
       },
     };
@@ -51,20 +61,19 @@
   }
 
   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;
@@ -82,44 +91,21 @@
 
   /**
    * @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;
-  }
-
   main();
 })();

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

@@ -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,
+      },
+    );
+  }
+};

apps/login/src/app/api/user/route.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;
+  sesionKeySignerAddress: string;
+  code: string;
+}) {
+  "use server";
+  return await encodeJWT({
+    account: serverAccount,
+    payload: {
+      iss: serverAccount.address,
+      sub: data.address,
+      aud: data.sesionKeySignerAddress,
+      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;
+}