SIWE: A Full Stack Practical Guide to Building Ethereum Identification Authentication Dapps

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.

SIWE User Manual: How to Make Your Dapp More Powerful?

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

  1. 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 }( => ) )} <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(

ETH3.6%
DAPP-2.57%
View Original
This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.
  • Reward
  • 10
  • Share
Comment
0/400
LiquidatorFlashvip
· 07-24 21:27
Wallet identification verification is unreliable. Get ready to be liquidated.
View OriginalReply0
ChainPoetvip
· 07-24 18:42
Finally, someone has explained SIWE clearly! I never thought about the principles for so long.
View OriginalReply0
quietly_stakingvip
· 07-24 10:20
Just sign it and that's it, simple and straightforward.
View OriginalReply0
ConsensusDissentervip
· 07-23 00:15
Backend verification is really troublesome. It's better to just use the transaction Address.
View OriginalReply0
BTCRetirementFundvip
· 07-21 22:30
I really don't understand, what the hell is SIWE?
View OriginalReply0
LightningLadyvip
· 07-21 22:23
Isn't this backend unnecessary? Isn't SIWE great?
View OriginalReply0
SatoshiNotNakamotovip
· 07-21 22:16
Isn't this just log in with a signature? Why make it sound so fancy?
View OriginalReply0
MevShadowrangervip
· 07-21 22:11
Ah, isn't this just the trap of web2, putting a skin on Blockchain?
View OriginalReply0
MEVSandwichvip
· 07-21 22:11
Hmm, it seems that the backend verification of the ETH ecosystem is quite troublesome.
View OriginalReply0
AirdropLickervip
· 07-21 22:00
Ah, this signature can be played in a variety of ways. I have learned, I have learned.
View OriginalReply0
View More
Trade Crypto Anywhere Anytime
qrCode
Scan to download Gate app
Community
English
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)