update: use viem for siwe (#387)

* viem siwe

* wagmi fix

* cleanup

* handle all chains

* use parseSiweMessage

* types

* types

* Update package.json

* user defined chain

* add public client

* include type

* use config

* update packages

* bump versions + fix types

* update packages

* better error information

* fix merge

* add async support ( #324 )

* versions

* Update CHANGELOG.md

* bump viem

* bump

* dep fix

* fix testebench

* deo

Author: lochie

CHANGELOG.md

@@ -1,7 +1,6 @@
-
 # x.y.z
 
-This update adds support for [Coinbase Smart Wallet](https://smartwallet.dev) and adds additional support for the latest versions of peer dependencies `wagmi` and `viem`.
+This update adds support for [Coinbase Smart Wallet](https://smartwallet.dev), adds additional support for the latest versions of peer dependencies `wagmi` and `viem`, and removes the dependency `ethers` from `connectkit-next-siwe` in favor of `viem`'s [SIWE implementation](https://viem.sh/docs/siwe/actions/verifySiweMessage).
 
 ## New
 
@@ -10,6 +9,11 @@ This update adds support for [Coinbase Smart Wallet](https://smartwallet.dev) an
 ## Updated
 
 - Changed default setting for `enforceSupportedChains` to `false` to allow for a better default user and developer experience.
+- Updates peer dependency `viem` to `>=2.13.x`.
+
+## Deprecated
+
+- Removes dependency `ethers` from `connectkit-next-siwe` in favor of `viem`'s [SIWE implementation](https://viem.sh/docs/siwe/actions/verifySiweMessage).
 
 # 1.7.3
 

examples/nextjs-siwe/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "connectkit": "workspace:packages/connectkit",
     "connectkit-next-siwe": "workspace:packages/connectkit-next-siwe",
-    "ethers": "^5",
     "next": "12.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

examples/testbench/package.json

@@ -12,12 +12,11 @@
     "@tanstack/react-query": "^5.17.10",
     "connectkit": "workspace:packages/connectkit",
     "connectkit-next-siwe": "workspace:packages/connectkit-next-siwe",
-    "ethers": "^5",
     "local-ssl-proxy": "^1.3.0",
     "next": "14.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "viem": "^2.13.0",
+    "viem": "^2.13.6",
     "wagmi": "^2.9.7"
   },
   "devDependencies": {

examples/testbench/src/components/Web3Provider.tsx

@@ -27,7 +27,7 @@ const avalanche: Chain = defineChain({
   testnet: false,
 });
 
-const ckConfig = getDefaultConfig({
+export const ckConfig = getDefaultConfig({
   /*
   chains: [
     mainnet,
@@ -48,6 +48,7 @@ const customConfig = {
   connectors: [wallets['rainbow'], ...(ckConfig.connectors ?? [])],
 };
 const config = createConfig(ckConfig);
+
 const queryClient = new QueryClient();
 
 type ContextValue = {};

examples/testbench/src/pages/index.tsx

@@ -319,7 +319,7 @@ const Home: NextPage = () => {
           </div>
           <h2>dApps configured chains</h2>
           <div style={{ display: 'flex', gap: 8 }}>
-            {chains.map((chain: wagmiChains.Chain) => (
+            {chains.map((chain) => (
               <ChainIcon key={chain.id} id={chain.id} />
             ))}
           </div>

examples/testbench/src/utils/siweServer.ts

@@ -1,6 +1,11 @@
 import { configureServerSideSIWE } from 'connectkit-next-siwe';
+import { ckConfig } from '../components/Web3Provider';
 
 export const siweServer = configureServerSideSIWE({
+  config: {
+    chains: ckConfig.chains,
+    transports: ckConfig.transports,
+  },
   options: {
     afterLogout: async () => console.log('afterLogout'),
     afterNonce: async () => console.log('afterNonce'),

packages/connectkit-next-siwe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "connectkit-next-siwe",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Family",
   "homepage": "https://docs.family.co/connectkit",
   "license": "BSD-2-Clause license",
@@ -37,14 +37,14 @@
   ],
   "dependencies": {
     "iron-session": "^6.2.1",
-    "siwe": "^2.1.4"
+    "viem": "^2.13.0"
   },
   "peerDependencies": {
     "connectkit": ">=1.2.0",
     "next": ">=12.x",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",
-    "siwe": ">=2"
+    "viem": ">=2.13.3"
   },
   "devDependencies": {
     "@types/node": "^16.11.27",

packages/connectkit-next-siwe/src/configureSIWE.tsx

@@ -3,7 +3,14 @@ import { SIWEProvider } from 'connectkit';
 import type { IncomingMessage, ServerResponse } from 'http';
 import { getIronSession, IronSession, IronSessionOptions } from 'iron-session';
 import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next';
-import { generateNonce, SiweErrorType, SiweMessage } from 'siwe';
+
+import { Chain, Transport, PublicClient, createPublicClient, http } from 'viem';
+import * as allChains from 'viem/chains';
+import {
+  generateSiweNonce,
+  createSiweMessage,
+  parseSiweMessage,
+} from 'viem/siwe';
 
 type RouteHandlerOptions = {
   afterNonce?: (
@@ -23,10 +30,16 @@ type RouteHandlerOptions = {
   ) => Promise<void>;
   afterLogout?: (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
 };
+
 type NextServerSIWEConfig = {
+  config?: {
+    chains: readonly [Chain, ...Chain[]];
+    transports?: Record<number, Transport>;
+  };
   session?: Partial<IronSessionOptions>;
   options?: RouteHandlerOptions;
 };
+
 type NextClientSIWEConfig = {
   apiRoutePrefix: string;
   statement?: string;
@@ -108,7 +121,7 @@ const nonceRoute = async (
     case 'GET':
       const session = await getSession(req, res, sessionConfig);
       if (!session.nonce) {
-        session.nonce = generateNonce();
+        session.nonce = generateSiweNonce();
         await session.save();
       }
       if (afterCallback) {
@@ -147,37 +160,57 @@ const verifyRoute = async (
   req: NextApiRequest,
   res: NextApiResponse<void>,
   sessionConfig: IronSessionOptions,
+  config?: NextServerSIWEConfig['config'],
   afterCallback?: RouteHandlerOptions['afterVerify']
 ) => {
   switch (req.method) {
     case 'POST':
       try {
         const session = await getSession(req, res, sessionConfig);
-        const { message, signature } = req.body;
-        const siweMessage = new SiweMessage(message);
-        const { data: fields } = await siweMessage.verify({ signature, nonce: session.nonce });
-        if (fields.nonce !== session.nonce) {
+        const { message, signature } = req.body as {
+          message: string;
+          signature: `0x${string}`;
+        };
+
+        const parsed = parseSiweMessage(message);
+        if (parsed.nonce !== session.nonce) {
           return res.status(422).end('Invalid nonce.');
         }
-        session.address = fields.address;
-        session.chainId = fields.chainId;
+
+        let chain = config?.chains
+          ? Object.values(config.chains).find((c) => c.id === parsed.chainId)
+          : undefined;
+        if (!chain) {
+          // Try to find chain from allChains if not found in user-provided chains
+          chain = Object.values(allChains).find((c) => c.id === parsed.chainId);
+        }
+        if (!chain) {
+          throw new Error('Chain not found.');
+        }
+
+        const publicClient: PublicClient = createPublicClient({
+          chain,
+          transport: http(),
+        });
+
+        const verified = await publicClient.verifySiweMessage({
+          message,
+          signature,
+          nonce: session.nonce,
+        });
+        if (!verified) {
+          return res.status(422).end('Unable to verify signature.');
+        }
+
+        session.address = parsed.address;
+        session.chainId = parsed.chainId;
         await session.save();
         if (afterCallback) {
           await afterCallback(req, res, session);
         }
         res.status(200).end();
       } catch (error) {
-        switch (error) {
-          case SiweErrorType.INVALID_NONCE:
-          case SiweErrorType.INVALID_SIGNATURE: {
-            res.status(422).end(String(error));
-            break;
-          }
-          default: {
-            res.status(400).end(String(error));
-            break;
-          }
-        }
+        res.status(400).end(String(error));
       }
       break;
     default:
@@ -195,6 +228,7 @@ const envVar = (name: string) => {
 };
 
 export const configureServerSideSIWE = <TSessionData extends Object = {}>({
+  config,
   session: { cookieName, password, cookieOptions, ...otherSessionOptions } = {},
   options: { afterNonce, afterVerify, afterSession, afterLogout } = {},
 }: NextServerSIWEConfig): ConfigureServerSIWEResult<TSessionData> => {
@@ -220,7 +254,7 @@ export const configureServerSideSIWE = <TSessionData extends Object = {}>({
       case 'nonce':
         return await nonceRoute(req, res, sessionConfig, afterNonce);
       case 'verify':
-        return await verifyRoute(req, res, sessionConfig, afterVerify);
+        return await verifyRoute(req, res, sessionConfig, config, afterVerify);
       case 'session':
         return await sessionRoute(req, res, sessionConfig, afterSession);
       case 'logout':
@@ -253,15 +287,15 @@ export const configureClientSIWE = <TSessionData extends Object = {}>({
           return nonce;
         }}
         createMessage={({ nonce, address, chainId }) =>
-          new SiweMessage({
+          createSiweMessage({
             version: '1',
             domain: window.location.host,
             uri: window.location.origin,
             address,
             chainId,
             nonce,
             statement,
-          }).prepareMessage()
+          })
         }
         verifyMessage={({ message, signature }) =>
           fetch(`${apiRoutePrefix}/verify`, {

packages/connectkit/src/components/Common/ChainSelectList/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useAccount, useSwitchChain } from 'wagmi';
 import { chainConfigs } from '../../../constants/chainConfigs';
 
@@ -20,7 +21,6 @@ import { isCoinbaseWalletConnector, isMobile } from '../../../utils';
 import ChainIcons from '../../../assets/chains';
 import useLocales from '../../../hooks/useLocales';
 import { useContext } from '../../ConnectKit';
-import { useState } from 'react';
 
 const Spinner = (
   <svg
@@ -59,7 +59,7 @@ const ChainSelectList = ({
   variant?: 'primary' | 'secondary';
 }) => {
   const { connector, chain } = useAccount();
-  const { chains, isPending, data, switchChain, error } = useSwitchChain();
+  const { chains, isPending, switchChain, error } = useSwitchChain();
   const [pendingChainId, setPendingChainId] = useState<number | undefined>(
     undefined
   );

packages/connectkit/src/siwe/SIWEContext.tsx

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import { Address } from 'viem';
 
 export enum StatusState {
   READY = 'ready',
@@ -10,7 +11,7 @@ export enum StatusState {
 }
 
 export type SIWESession = {
-  address: string;
+  address: Address;
   chainId: number;
 };
 
@@ -19,9 +20,9 @@ export type SIWEConfig = {
   getNonce: () => Promise<string>;
   createMessage: (args: {
     nonce: string;
-    address: string;
+    address: Address;
     chainId: number;
-  }) => string;
+  }) => Promise<string> | string;
   verifyMessage: (args: {
     message: string;
     signature: string;