SIWE: A powerful tool for providing identification for Dapps

SIWE (Sign-In with Ethereum) is a method of verifying user identification on Ethereum, similar to initiating a transaction, proving the user's control over the wallet. Currently, most wallet plugins support this simple signing method.

This article mainly discusses the signature scenarios on Ethereum and does not involve other public chains.

Does your project need SIWE?

If your Dapp has the following requirements, you may consider using SIWE:

• Own your own user identification system
• Need to query information related to user privacy

For Dapps like etherscan( that mainly provide query functions, SIWE may not be necessary.

Although the frontend can confirm identification after connecting the wallet, for interface calls that require backend support, merely passing the address cannot prove identification, as the address is public information.

The Principle and Process of SIWE

The SIWE process includes three steps: connecting the wallet, signing, and obtaining identification.

) Connect Wallet

This is a common Web3 operation, connecting to the Dapp through a wallet plugin.

signature

The signing steps of SIWE include:

1. Obtain Nonce value: Call the backend interface to get a random Nonce value associated with the address.

2. Build the signature content: including Nonce value, domain name, chain ID, and other information.

3. Wallet Signature: Sign the content using the method provided by the wallet.

4. Send signature: Send the signature to the backend for verification.

obtain identification

After the backend verification of the signature is successful, return the user's identification ### like JWT(. Subsequent requests should carry the address and identification to prove wallet ownership.

![SIWE User Manual: How to Make Your Dapp More Powerful?])https://img-cdn.gateio.im/webp-social/moments-138fc08a9148099755d1fe162292922f.webp(

Practice SIWE

We will develop a full-stack application that supports SIWE using Next.js.

) preparation work

1. Install Next.js:

npx create-next-app@14

2. Install SIWE related dependencies:

npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

Introduce Wagmi

Import WagmiProvider in layout.tsx:

jsx import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";

const WagmiProvider = ###{ children }( => { return ) <wagmiweb3configprovider config="｛｛" siwe:="" {="" getnonce:="" async="" (address(=""> )await getNonce(address().data, createMessage: )props( => createSiweMessage){ ...props, statement: "Ant Design Web3" }(, verifyMessage: async )message, signature( => { const jwt = )await verifyMessage(message, signature().data; setJwt)jwt(; return !!jwt; }, }, chains: ), transports: { [Mainnet.id]: http[Mainnet](, }, wallets: [MetaMask)(, WalletConnect)(, TokenPocket)(, OkxWallet)(] ｝｝ > {children} ); };

![SIWE User Manual: How to Make Your Dapp More Powerful?])https://img-cdn.gateio.im/webp-social/moments-355ea961b315585f7d217cbcf6a3fa69.webp(

) Add connection button

Create a button to connect the wallet and sign.

jsx export default function App###( { const jwt = React.useContext)JwtProvider(;

return ) <connectbutton.connector> {({ account, connect }( => ) {account ? Connected: ${account.address.slice(0,6(}...${account.address.slice)-4(} : "Connect Wallet"} )} <connectbutton.connector> ); }

![SIWE User Manual: How to Make Your Dapp More Powerful?])https://img-cdn.gateio.im/webp-social/moments-53c03d1cb26f29a9d739e3d1aa0816df.webp(

) Implement backend interface

Nonce interface

javascript export async function GET###request( { const { searchParams } = new URL)request.url(; const address = searchParams.get)"address"(;

if )!address( { throw new Error)"Invalid address"(; } const nonce = randomBytes)16(.toString)("hex")(; addressMap.set)address, nonce(; return Response.json){ data: nonce }(; }

![SIWE User Manual: How to Make Your Dapp More Powerful?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

)# Verification Signature Interface

javascript export async function POST###request( { const { signature, message } = await request.json)(; const { nonce, address = "0x" } = parseSiweMessage)message(;

if )!nonce || nonce !== addressMap.get(address() { throw new Error)"Invalid nonce"(; }

const valid = await publicClient.verifySiweMessage){ message, address, signature, }(;

if )!valid( { throw new Error)"Invalid signature"(; }

const token = jwt.sign){ address }, JWT_SECRET, { expiresIn: "1h" }(; return Response.json){ data: token }(; }

![SIWE User Manual: How to Make Your Dapp More Powerful?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

Performance Optimization

To improve verification speed, it is recommended to use dedicated node services. You can use ZAN's node service to replace the default RPC:

javascript const publicClient = createPublicClient){ chain: mainnet, transport: http('(, // ZAN node service RPC });

This will significantly enhance the interface response speed.

![SIWE User Manual: How to Make Your Dapp More Powerful?])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(