This is a React-only guide.

​
Overview

After signing messages, you’ll often need to decode and verify signatures. Viem provides utilities for signature verification and recovery. This guide shows you how to decode signatures to extract the signer’s address and verify message authenticity.

​
Decode a Simple Message Signature

import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { recoverMessageAddress, verifyMessage } from 'viem';

const DecodeSignatureButton = () => {
  const { primaryWallet } = useDynamicContext();

  const decodeSignature = async () => {
    if (!primaryWallet) return;

    // First, sign a message
    const message = "Hello, this is a test message";
    const signature = await primaryWallet.signMessage(message);

    // Decode the signature to recover the signer's address
    const recoveredAddress = await recoverMessageAddress({
      message,
      signature,
    });

    // Verify the signature
    const isValid = await verifyMessage({
      address: primaryWallet.address,
      message,
      signature,
    });

    const decodedInfo = {
      originalMessage: message,
      signature,
      signerAddress: primaryWallet.address,
      recoveredAddress,
      isValidSignature: isValid,
      addressMatch: recoveredAddress.toLowerCase() === primaryWallet.address.toLowerCase(),
    };

    console.log('Decoded signature info:', decodedInfo);

    return decodedInfo;
  };

  return <button onClick={decodeSignature}>Decode Signature</button>;
};

​
Best Practices

  1. Always verify signatures: Don’t just recover the address - also verify the signature is valid
  2. Handle errors gracefully: Signature decoding can fail for various reasons
  3. Validate addresses: Ensure the recovered address matches the expected signer
  4. Use case-insensitive comparison: Compare addresses using toLowerCase() for consistency