Sign Message
Signing messages is a great way to securely prove control of a specific address. The example below builds on the Connect Wallet Example and uses the useSignMessage hook. Try it out before moving on.
Step 1: Connect Wallet
Follow the Connect Wallet guide to get this set up.
Step 2: Add SignMessage Component
Add the useSignMessage hook and set up a basic form:
import * as React from 'react'
import { useSignMessage } from 'wagmi'
import { verifyMessage } from 'ethers/lib/utils'
export function SignMessage() {
const recoveredAddress = React.useRef<string>()
const { data, error, isLoading, signMessage } = useSignMessage({
onSuccess(data, variables) {
// Verify signature when sign message succeeds
const address = verifyMessage(variables.message, data)
recoveredAddress.current = address
},
})
return (
<form
onSubmit={(event) => {
event.preventDefault()
const formData = new FormData(event.target)
const message = formData.get('message')
signMessage({ message })
}}
>
<label htmlFor="message">Enter a message to sign</label>
<textarea
id="message"
name="message"
placeholder="The quick brown fox…"
/>
<button disabled={isLoading}>
{isLoading ? 'Check Wallet' : 'Sign Message'}
</button>
{data && (
<div>
<div>Recovered Address: {recoveredAddress.current}</div>
<div>Signature: {data}</div>
</div>
)}
{error && <div>{error.message}</div>}
</form>
)
}Step 3: Add To App
Import the SignMessage component and display it when the account is connected.
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { SignMessage } from './SignMessage'
export function Profile() {
const { isConnected } = useAccount()
const { connect, connectors, error, isLoading, pendingConnector } =
useConnect()
const { disconnect } = useDisconnect()
if (isConnected) {
return (
<div>
{/* Account content goes here */}
<SignMessage />
</div>
)
}
return <div>{/* Connect wallet content goes here */}</div>
}Wrap Up
That's it! You now have a way for users to sign messages and securely prove control over a wallet address.