📢 Gate Square #MBG Posting Challenge# is Live— Post for MBG Rewards!
Want a share of 1,000 MBG? Get involved now—show your insights and real participation to become an MBG promoter!
💰 20 top posts will each win 50 MBG!
How to Participate:
1️⃣ Research the MBG project
Share your in-depth views on MBG’s fundamentals, community governance, development goals, and tokenomics, etc.
2️⃣ Join and share your real experience
Take part in MBG activities (CandyDrop, Launchpool, or spot trading), and post your screenshots, earnings, or step-by-step tutorials. Content can include profits, beginner-friendl
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.
Does your project need SIWE?
If your Dapp has the following requirements, you may consider using SIWE:
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:
Obtain Nonce value: Call the backend interface to get a random Nonce value associated with the address.
Build the signature content: including Nonce value, domain name, chain ID, and other information.
Wallet Signature: Sign the content using the method provided by the wallet.
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
npx create-next-app@14
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(