fix siwe signature msg with social logins and emails (#241)

reown-com · Jan 12, 2025 · bc034a4 · bc034a4
1 parent 4a6c8ff
commit bc034a4
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 13 deletions.
diff --git a/docs/appkit/javascript/core/siwe.mdx b/docs/appkit/javascript/core/siwe.mdx
@@ -36,7 +36,7 @@ For a better UX we recommend using One-Click Auth.
 Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic.
 
 ```bash npm2yarn
-npm i @reown/appkit-siwe siwe
+npm i @reown/appkit-siwe siwe viem
 ```
 
 </TabItem>

diff --git a/docs/appkit/next/core/siwe.mdx b/docs/appkit/next/core/siwe.mdx
@@ -43,7 +43,7 @@ For a better UX we recommend using One-Click Auth.
 Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic.
 
 ```bash npm2yarn
-npm i @reown/appkit-siwe siwe next-auth
+npm i @reown/appkit-siwe siwe next-auth viem
 ```
 
 </TabItem>
@@ -123,9 +123,25 @@ export const siweConfig = createSIWEConfig({
 Verify a SIWE signature.
 
 ```ts
-import { verifySignature } from '@reown/appkit-siwe'
+import { createPublicClient, http } from 'viem'
 
-const isValid = await verifySignature({ address, message, signature, chainId, projectId })
+const publicClient = createPublicClient(
+  {
+    transport: http(
+      `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
+    )
+  }
+);
+const isValid = await publicClient.verifyMessage({
+  message,
+  address: address as `0x${string}`,
+  signature: signature as `0x${string}`
+});
+
+// The verifySignature is not working with social logins and emails with non deployed smart accounts 
+// for this reason we recommend using the viem to verify the signature
+// import { verifySignature } from '@reown/appkit-siwe'
+// const isValid = await verifySignature({ address, message, signature, chainId, projectId })
 ```
 
 ### `getChainIdFromMessage`

diff --git a/docs/appkit/react/core/siwe.mdx b/docs/appkit/react/core/siwe.mdx
@@ -26,7 +26,7 @@ reown uses permissions expressed as ReCaps to enable a One-Click Authentication.
 <TabItem value="one-click-auth" label="One-Click Auth">
 
 ```bash npm2yarn
-npm i @reown/appkit-siwe siwe
+npm i @reown/appkit-siwe siwe viem
 ```
 
 </TabItem>

diff --git a/docs/appkit/shared/siwe/code.mdx b/docs/appkit/shared/siwe/code.mdx
@@ -110,13 +110,16 @@ import express from 'express';
 import Session from 'express-session';
 import { generateNonce } from 'siwe';
 import {
-  verifySignature,
+  /*verifySignature,*/
   getAddressFromMessage,
   getChainIdFromMessage,
 } from '@reown/appkit-siwe'
+import { createPublicClient, http } from 'viem'
 
 const app = express();
 
+const projectId = 'YOUR_PROJECT_ID';
+
 // configure cors and sessions
 app.use(cors({
   origin: 'http://localhost:5173', // frontend URL
@@ -153,12 +156,19 @@ app.post('/verify', async (req, res) => {
       const address = getAddressFromMessage(message);
       let chainId = getChainIdFromMessage(message);
 
-      const isValid = await verifySignature({
-        address,
+      // for the moment, the verifySignature is not working with social logins and emails  with non deployed smart accounts  
+      // for this reason we recommend using the viem to verify the signature
+      const publicClient = createPublicClient(
+        {
+          transport: http(
+            `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
+          )
+        }
+      );
+      const isValid = await publicClient.verifyMessage({
         message,
-        signature,
-        chainId,
-        projectId,
+        address,
+        signature
       });
       if (!isValid) {
         // throw an error if the signature is invalid
@@ -202,9 +212,25 @@ Check the github full example to see the full flow working: [siwe-quickstart](ht
 Verify a SIWE signature.
 
 ```ts
-import { verifySignature } from '@reown/appkit-siwe'
+import { createPublicClient, http } from 'viem'
+
+const publicClient = createPublicClient(
+  {
+    transport: http(
+      `https://rpc.walletconnect.org/v1/?chainId=${chainId}&projectId=${projectId}`
+    )
+  }
+);
+const isValid = await publicClient.verifyMessage({
+  message,
+  address: address as `0x${string}`,
+  signature: signature as `0x${string}`
+});
 
-const isValid = await verifySignature({ address, message, signature, chainId, projectId })
+// The verifySignature is not working with social logins and emails with non deployed smart accounts 
+// for this reason we recommend using the viem to verify the signature
+// import { verifySignature } from '@reown/appkit-siwe'
+// const isValid = await verifySignature({ address, message, signature, chainId, projectId })
 ```
 
 </TabItem>