Fix: chainid siwe example (#783)

* fix react example and update it to latest * update to appkit-button * fix session return and update to latest * fix validation * chainId To number * validate types in next * improve code
reown-com · Nov 28, 2024 · 63f129d · 63f129d
1 parent d84a54d
commit 63f129d
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 125 deletions.
diff --git a/dapps/appkit-siwe/next/app/config/index.tsx b/dapps/appkit-siwe/next/app/config/index.tsx
@@ -69,12 +69,15 @@ export const siweConfig = createSIWEConfig({
   getSession: async () => {
     const session = await getSession();
     if (!session) {
-      throw new Error('Failed to get session!');
+      return null;
+    }
+
+    // Validate address and chainId types
+    if (typeof session.address !== "string" || typeof session.chainId !== "number") {
+      return null;
     }
 
-    const { address, chainId } = session as unknown as SIWESession;
-
-    return { address, chainId };
+    return { address: session.address, chainId: session.chainId } satisfies SIWESession;
   },
   verifyMessage: async ({ message, signature }: SIWEVerifyMessageArgs) => {
     try {

diff --git a/dapps/appkit-siwe/next/app/page.tsx b/dapps/appkit-siwe/next/app/page.tsx
@@ -4,7 +4,7 @@ import styles from "./page.module.css";
 export default function Home() {
   return (
     <main className={styles.main}>
-      <w3m-button />
+      <appkit-button />
     </main>
   );
 }
diff --git a/dapps/appkit-siwe/next/package.json b/dapps/appkit-siwe/next/package.json
@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.53.1",
-		"@reown/appkit-siwe": "1.4.1",
-    "@reown/appkit": "1.4.1",
-    "@reown/appkit-adapter-wagmi": "1.4.1",
+		"@reown/appkit-siwe": "1.5.2",
+    "@reown/appkit": "1.5.2",
+    "@reown/appkit-adapter-wagmi": "1.5.2",
     "next": "14.2.7",
     "next-auth": "^4.24.7",
     "react": "^18",

diff --git a/dapps/appkit-siwe/react/package.json b/dapps/appkit-siwe/react/package.json
@@ -12,9 +12,9 @@
   "dependencies": {
     "@tanstack/react-query": "^5.53.1",
     "@wagmi/core": "^2.13.4",
-		"@reown/appkit-siwe": "1.4.1",
-    "@reown/appkit": "1.4.1",
-    "@reown/appkit-adapter-wagmi": "1.4.1",
+		"@reown/appkit-siwe": "1.5.2",
+    "@reown/appkit": "1.5.2",
+    "@reown/appkit-adapter-wagmi": "1.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "viem": "^2.21.0",

diff --git a/dapps/appkit-siwe/react/pnpm-lock.yaml b/dapps/appkit-siwe/react/pnpm-lock.yaml
diff --git a/dapps/appkit-siwe/react/server/package.json b/dapps/appkit-siwe/react/server/package.json
@@ -12,7 +12,7 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
-		"@reown/appkit-siwe": "1.4.1",
+		"@reown/appkit-siwe": "1.5.2",
 		"body-parser": "^1.20.2",
 		"cors": "^2.8.5",
 		"dotenv": "^16.4.5",

diff --git a/dapps/appkit-siwe/react/server/pnpm-lock.yaml b/dapps/appkit-siwe/react/server/pnpm-lock.yaml
diff --git a/dapps/appkit-siwe/react/server/server.js b/dapps/appkit-siwe/react/server/server.js
@@ -47,7 +47,7 @@ app.post('/verify', async (req, res) => {
       const message = req.body.message;
 
       const address = getAddressFromMessage(message);
-      const chainId = getChainIdFromMessage(message);
+      let chainId = getChainIdFromMessage(message);
 
       const isValid = await verifySignature({
         address,
@@ -56,14 +56,23 @@ app.post('/verify', async (req, res) => {
         chainId,
         projectId,
       });
+
       if (!isValid) {
         // throw an error if the signature is invalid
         throw new Error('Invalid signature');
       }
+      if (chainId.includes(":")) {
+        chainId = chainId.split(":")[1];
+      }
+      // Convert chainId to a number
+      chainId = Number(chainId);
+
+      if (isNaN(chainId)) {
+          throw new Error("Invalid chainId");
+      }
 
       // save the session with the address and chainId (SIWESession)
       req.session.siwe = { address, chainId };
-      console.log("/verify");
       req.session.save(() => res.status(200).send(true));
     } catch (e) {
       // clean the session
@@ -76,7 +85,8 @@ app.post('/verify', async (req, res) => {
   // get the session
   app.get('/session', (req, res) => {
     res.setHeader('Content-Type', 'application/json');
-    console.log("/session");
+    console.log("/session", req.session.siwe);
+
     res.send(req.session.siwe);
   });
 

diff --git a/dapps/appkit-siwe/react/src/main.tsx b/dapps/appkit-siwe/react/src/main.tsx
@@ -60,7 +60,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <WagmiProvider config={wagmiAdapter.wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <div className="centered-div">
-          <w3m-button />
+          <appkit-button />
         </div>
       </QueryClientProvider>
     </WagmiProvider>

diff --git a/dapps/appkit-siwe/react/src/utils/siweUtils.ts b/dapps/appkit-siwe/react/src/utils/siweUtils.ts
@@ -79,7 +79,10 @@ const normalizeAddress = (address: string): string => {
   }
 
   const data = await res.json();
-  return data == "{}" ?  null : data as SIWESession;
+
+  const isValidData = typeof data === 'object' && typeof data.address === 'string' && typeof data.chainId === 'number';
+
+  return isValidData ? data as SIWESession : null;
 }
 
 // call the server to sign out