feat: viem/siwe partial migration

rainbow-me · Oct 3, 2024 · 564e9ad · 564e9ad
1 parent b2b8217
commit 564e9ad
Show file tree

Hide file tree

Showing 13 changed files with 116 additions and 44 deletions.
diff --git a/examples/with-next-siwe-iron-session/src/pages/_app.tsx b/examples/with-next-siwe-iron-session/src/pages/_app.tsx
@@ -13,7 +13,7 @@ import {
   RainbowKitAuthenticationProvider,
   AuthenticationStatus,
 } from '@rainbow-me/rainbowkit';
-import { SiweMessage } from 'siwe';
+import { createSiweMessage } from 'viem/siwe';
 
 import { config } from '../wagmi';
 
@@ -60,7 +60,7 @@ export default function App({ Component, pageProps }: AppProps) {
       },
 
       createMessage: ({ nonce, address, chainId }) => {
-        return new SiweMessage({
+        return createSiweMessage({
           domain: window.location.host,
           address,
           statement: 'Sign in with Ethereum to the app.',
@@ -71,10 +71,6 @@ export default function App({ Component, pageProps }: AppProps) {
         });
       },
 
-      getMessageBody: ({ message }) => {
-        return message.prepareMessage();
-      },
-
       verify: async ({ message, signature }) => {
         verifyingRef.current = true;
 

diff --git a/examples/with-next-siwe-iron-session/src/pages/api/nonce.ts b/examples/with-next-siwe-iron-session/src/pages/api/nonce.ts
@@ -1,13 +1,14 @@
 import { withIronSessionApiRoute } from 'iron-session/next';
 import { NextApiRequest, NextApiResponse } from 'next';
-import { generateNonce } from 'siwe';
+import { generateSiweNonce } from 'viem/siwe';
+
 import { ironOptions } from '../../../lib/iron';
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { method } = req;
   switch (method) {
     case 'GET':
-      req.session.nonce = generateNonce();
+      req.session.nonce = generateSiweNonce();
       await req.session.save();
       res.setHeader('Content-Type', 'text/plain');
       res.send(req.session.nonce);

diff --git a/examples/with-next-siwe-iron-session/src/pages/api/verify.ts b/examples/with-next-siwe-iron-session/src/pages/api/verify.ts
@@ -1,25 +1,30 @@
 import { withIronSessionApiRoute } from 'iron-session/next';
 import { NextApiRequest, NextApiResponse } from 'next';
-import { SiweMessage } from 'siwe';
+import { parseSiweMessage, type SiweMessage } from 'viem/siwe';
+
 import { ironOptions } from '../../../lib/iron';
+import { publicClient } from '../../wagmi';
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { method } = req;
   switch (method) {
     case 'POST':
       try {
         const { message, signature } = req.body;
-        const siweMessage = new SiweMessage(message);
-        const { success, error, data } = await siweMessage.verify({
+        const siweMessage = parseSiweMessage(message) as SiweMessage;
+
+        const success = await publicClient.verifyMessage({
+          address: siweMessage.address,
+          message,
           signature,
         });
 
-        if (!success) throw error;
+        if (!success) throw new Error('Invalid signature.');
 
-        if (data.nonce !== req.session.nonce)
+        if (siweMessage.nonce !== req.session.nonce)
           return res.status(422).json({ message: 'Invalid nonce.' });
 
-        req.session.siwe = data;
+        req.session.siwe = siweMessage;
         await req.session.save();
         res.json({ ok: true });
       } catch (_error) {

diff --git a/examples/with-next-siwe-iron-session/src/wagmi.ts b/examples/with-next-siwe-iron-session/src/wagmi.ts
@@ -1,4 +1,5 @@
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
+import { publicActions } from 'viem';
 import {
   arbitrum,
   base,
@@ -21,3 +22,5 @@ export const config = getDefaultConfig({
   ],
   ssr: true,
 });
+
+export const publicClient = config.getClient().extend(publicActions);
diff --git a/examples/with-next-siwe-iron-session/types/iron-session.d.ts b/examples/with-next-siwe-iron-session/types/iron-session.d.ts
@@ -1,5 +1,5 @@
 import 'iron-session';
-import { SiweMessage } from 'siwe';
+import type { SiweMessage } from 'viem/siwe';
 
 declare module 'iron-session' {
   interface IronSessionData {

diff --git a/examples/with-next-siwe-next-auth/src/pages/_app.tsx b/examples/with-next-siwe-next-auth/src/pages/_app.tsx
@@ -13,7 +13,6 @@ import {
   GetSiweMessageOptions,
 } from '@rainbow-me/rainbowkit-siwe-next-auth';
 
-
 import { config } from '../wagmi';
 
 const getSiweMessageOptions: GetSiweMessageOptions = () => ({

diff --git a/examples/with-next-siwe-next-auth/src/pages/api/auth/[...nextauth].ts b/examples/with-next-siwe-next-auth/src/pages/api/auth/[...nextauth].ts
@@ -7,16 +7,31 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import NextAuth, { NextAuthOptions } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
 import { getCsrfToken } from 'next-auth/react';
-import { SiweMessage } from 'siwe';
+import {
+  type SiweMessage,
+  parseSiweMessage,
+  validateSiweMessage,
+} from 'viem/siwe';
+
+import { publicClient } from '../../../wagmi';
 
 export function getAuthOptions(req: IncomingMessage): NextAuthOptions {
   const providers = [
     CredentialsProvider({
-      async authorize(credentials) {
+      async authorize(credentials: any) {
         try {
-          const siwe = new SiweMessage(
-            JSON.parse(credentials?.message || '{}')
-          );
+          const siweMessage = parseSiweMessage(
+            credentials?.message!,
+          ) as SiweMessage;
+
+          if (
+            !validateSiweMessage({
+              address: credentials?.address,
+              message: siweMessage,
+            })
+          ) {
+            return null;
+          }
 
           const nextAuthUrl =
             process.env.NEXTAUTH_URL ||
@@ -28,20 +43,29 @@ export function getAuthOptions(req: IncomingMessage): NextAuthOptions {
           }
 
           const nextAuthHost = new URL(nextAuthUrl).host;
-          if (siwe.domain !== nextAuthHost) {
+          if (siweMessage.domain !== nextAuthHost) {
             return null;
           }
 
           if (
-            siwe.nonce !==
+            siweMessage.nonce !==
             (await getCsrfToken({ req: { headers: req.headers } }))
           ) {
             return null;
           }
 
-          await siwe.verify({ signature: credentials?.signature || '' });
+          const valid = await publicClient.verifyMessage({
+            address: credentials?.address,
+            message: credentials?.message,
+            signature: credentials?.signature,
+          });
+
+          if (!valid) {
+            return null;
+          }
+
           return {
-            id: siwe.address,
+            id: siweMessage.address,
           };
         } catch (e) {
           return null;
@@ -58,6 +82,11 @@ export function getAuthOptions(req: IncomingMessage): NextAuthOptions {
           placeholder: '0x0',
           type: 'text',
         },
+        address: {
+          label: 'Address',
+          placeholder: '0x0',
+          type: 'text',
+        },
       },
       name: 'Ethereum',
     }),

diff --git a/examples/with-next-siwe-next-auth/src/wagmi.ts b/examples/with-next-siwe-next-auth/src/wagmi.ts
@@ -1,4 +1,5 @@
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
+import { publicActions } from 'viem';
 import {
   arbitrum,
   base,
@@ -20,4 +21,6 @@ export const config = getDefaultConfig({
     ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
   ],
   ssr: true,
-});
+});
+
+export const publicClient = config.getClient().extend(publicActions);
diff --git a/packages/example/src/pages/api/auth/[...nextauth].ts b/packages/example/src/pages/api/auth/[...nextauth].ts
@@ -7,16 +7,31 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import NextAuth, { type NextAuthOptions } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
 import { getCsrfToken } from 'next-auth/react';
-import { SiweMessage } from 'siwe';
+import {
+  type SiweMessage,
+  parseSiweMessage,
+  validateSiweMessage,
+} from 'viem/siwe';
+
+import { publicClient } from '../../../wagmi';
 
 export function getAuthOptions(req: IncomingMessage): NextAuthOptions {
   const providers = [
     CredentialsProvider({
-      async authorize(credentials) {
+      async authorize(credentials: any) {
         try {
-          const siwe = new SiweMessage(
-            JSON.parse(credentials?.message || '{}'),
-          );
+          const siweMessage = parseSiweMessage(
+            credentials?.message!,
+          ) as SiweMessage;
+
+          if (
+            !validateSiweMessage({
+              address: credentials?.address,
+              message: siweMessage,
+            })
+          ) {
+            return null;
+          }
 
           const nextAuthUrl =
             process.env.NEXTAUTH_URL ||
@@ -28,20 +43,29 @@ export function getAuthOptions(req: IncomingMessage): NextAuthOptions {
           }
 
           const nextAuthHost = new URL(nextAuthUrl).host;
-          if (siwe.domain !== nextAuthHost) {
+          if (siweMessage.domain !== nextAuthHost) {
             return null;
           }
 
           if (
-            siwe.nonce !==
+            siweMessage.nonce !==
             (await getCsrfToken({ req: { headers: req.headers } }))
           ) {
             return null;
           }
 
-          await siwe.verify({ signature: credentials?.signature || '' });
+          const valid = await publicClient.verifyMessage({
+            address: credentials?.address,
+            message: credentials?.message,
+            signature: credentials?.signature,
+          });
+
+          if (!valid) {
+            return null;
+          }
+
           return {
-            id: siwe.address,
+            id: siweMessage.address,
           };
         } catch (e) {
           console.error('siwe authorization failed', e);
@@ -59,6 +83,11 @@ export function getAuthOptions(req: IncomingMessage): NextAuthOptions {
           placeholder: '0x0',
           type: 'text',
         },
+        address: {
+          label: 'Address',
+          placeholder: '0x0',
+          type: 'text',
+        },
       },
       name: 'Ethereum',
     }),

diff --git a/packages/example/src/wagmi.ts b/packages/example/src/wagmi.ts
@@ -59,6 +59,7 @@ import {
   zealWallet,
   zerionWallet,
 } from '@rainbow-me/rainbowkit/wallets';
+import { publicActions } from 'viem';
 import {
   arbitrum,
   arbitrumSepolia,
@@ -242,3 +243,5 @@ export const config = getDefaultConfig({
   ],
   ssr: true,
 });
+
+export const publicClient = config.getClient().extend(publicActions);
diff --git a/packages/rainbowkit-siwe-next-auth/src/RainbowKitSiweNextAuthProvider.tsx b/packages/rainbowkit-siwe-next-auth/src/RainbowKitSiweNextAuthProvider.tsx
@@ -4,10 +4,11 @@ import {
 } from '@rainbow-me/rainbowkit';
 import { getCsrfToken, signIn, signOut, useSession } from 'next-auth/react';
 import React, { type ReactNode, useMemo } from 'react';
-import { SiweMessage } from 'siwe';
+import type { Address } from 'viem';
+import { type SiweMessage, createSiweMessage } from 'viem/siwe';
 
 type UnconfigurableMessageOptions = {
-  address: string;
+  address: Address;
   chainId: number;
   nonce: string;
 };
@@ -36,7 +37,12 @@ export function RainbowKitSiweNextAuthProvider({
     () =>
       createAuthenticationAdapter({
         createMessage: ({ address, chainId, nonce }) => {
-          const defaultConfigurableOptions: ConfigurableMessageOptions = {
+          const defaultConfigurableOptions: Required<
+            Pick<
+              ConfigurableMessageOptions,
+              'domain' | 'uri' | 'version' | 'statement'
+            >
+          > = {
             domain: window.location.host,
             statement: 'Sign in with Ethereum to the app.',
             uri: window.location.origin,
@@ -49,7 +55,7 @@ export function RainbowKitSiweNextAuthProvider({
             nonce,
           };
 
-          return new SiweMessage({
+          return createSiweMessage({
             ...defaultConfigurableOptions,
 
             // Spread custom SIWE message options provided by the consumer
@@ -60,8 +66,6 @@ export function RainbowKitSiweNextAuthProvider({
           });
         },
 
-        getMessageBody: ({ message }) => message.prepareMessage(),
-
         getNonce: async () => {
           const nonce = await getCsrfToken();
           if (!nonce) throw new Error();

diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/AuthenticationContext.tsx b/packages/rainbowkit/src/components/RainbowKitProvider/AuthenticationContext.tsx
@@ -6,6 +6,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import type { Address } from 'viem';
 import { type Config, useAccount, useAccountEffect } from 'wagmi';
 
 export type AuthenticationStatus =
@@ -17,10 +18,9 @@ export interface AuthenticationAdapter<Message> {
   getNonce: () => Promise<string>;
   createMessage: (args: {
     nonce: string;
-    address: string;
+    address: Address;
     chainId: number;
   }) => Message;
-  getMessageBody: (args: { message: Message }) => string;
   verify: (args: { message: Message; signature: string }) => Promise<boolean>;
   signOut: () => Promise<void>;
 }

diff --git a/packages/rainbowkit/src/components/SignIn/SignIn.tsx b/packages/rainbowkit/src/components/SignIn/SignIn.tsx
@@ -77,7 +77,7 @@ export function SignIn({
 
       try {
         signature = await signMessageAsync({
-          message: authAdapter.getMessageBody({ message }),
+          message,
         });
       } catch (error) {
         if (error instanceof UserRejectedRequestError) {