Skip to content
Examples
/
Sign Message

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 { 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…"
        onChange={(event) => setMessage(event.target.value)}
      />
      <button disabled={isLoading}>
        {isLoading ? 'Check Wallet' : 'Sign Message'}
      </button>

      {data && (
        <div>
          <div>Recovered Address: {recoveredAddress}</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 { data: accountData } = useAccount({ ens: true })
  const { connect, connectors, error, isConnecting, pendingConnector } =
    useConnect()
  const { disconnect } = useDisconnect()

  if (accountData) {
    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.

Connect Wallet
Sign-In with Ethereum