add JWT signing and redirect for login flow

Author: jnsdls

apps/login/src/app/actions/signJWTAndRedirect.ts

@@ -0,0 +1,37 @@
+"use server";
+
+import { createThirdwebClient } from "thirdweb";
+import { encodeJWT } from "thirdweb/utils";
+import { privateKeyToAccount, randomPrivateKey } from "thirdweb/wallets";
+
+const client = createThirdwebClient({
+  clientId: "e9ba48c289e0cc3d06a23bfd370cc111",
+});
+const privateKey = process.env.THIRDWEB_ADMIN_PRIVATE_KEY;
+
+const serverAccount = privateKeyToAccount({
+  client,
+  privateKey: privateKey || randomPrivateKey(),
+});
+
+export async function signJWTAndRedirect(data: {
+  address: string;
+  sesionKeySignerAddress: string;
+  code: string;
+  redirect: string;
+}) {
+  const jwt = 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,
+    },
+  });
+
+  return `${data.redirect}#${jwt}`;
+}

apps/login/src/app/page.tsx

@@ -10,6 +10,7 @@ import {
   useActiveAccount,
 } from "thirdweb/react";
 import { isContractDeployed } from "thirdweb/utils";
+import { signJWTAndRedirect } from "./actions/signJWTAndRedirect";
 
 const sesionKeySignerAddress = "0x6f700ba0258886411D2536399624EAa7158d1742";
 
@@ -56,6 +57,12 @@ export default function Page() {
               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
@@ -83,25 +90,38 @@ export default function Page() {
               }
               throw "already-added";
             }}
-            onError={(e) => {
+            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") {
                 // redirect back to the app
-                window.location.href = `${redirect}${encodeHash(
-                  account.address,
+                window.location.href = await signJWTAndRedirect({
+                  address: account.address,
                   sesionKeySignerAddress,
-                  code || "",
-                )}`;
+                  code,
+                  redirect,
+                });
               } else {
                 console.error(e);
               }
             }}
-            onTransactionConfirmed={() => {
-              // redirect back to the app
-              window.location.href = `${redirect}${encodeHash(
-                account.address,
+            onTransactionConfirmed={async () => {
+              if (!code) {
+                throw new Error("No code found");
+              }
+              if (!redirect) {
+                throw new Error("No redirect found");
+              }
+              window.location.href = await signJWTAndRedirect({
+                address: account.address,
                 sesionKeySignerAddress,
-                code || "",
-              )}`;
+                code,
+                redirect,
+              });
             }}
           >
             Approve
@@ -116,19 +136,3 @@ export default function Page() {
     </div>
   );
 }
-
-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}`;
-}