How to sign messages with Web3 and MetaMask from a React app

Signing messages in React applications using Web3 and MetaMask involves several key steps: installing the required libraries, connecting to the MetaMask wallet, retrieving the user's account address, signing messages with Web3, and handling the signed result. Below, I will elaborate on these steps:

1. Install the Required Libraries

First, install the Web3 library in your React project. Web3 is a JavaScript library designed for interacting with the Ethereum blockchain, enabling communication with the blockchain through MetaMask.

bash
npm install web3

2. Connect to the MetaMask Wallet

To obtain signatures from users, first ensure they have MetaMask installed and connected to your application. You can detect MetaMask installation using Web3 and prompt the user to connect:

javascript
import Web3 from 'web3';

async function connectToWallet() {
  if (window.ethereum) {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('Connected', accounts[0]);
    } catch (error) {
      console.error('User denied account access');
    }
  } else {
    alert('Please install MetaMask!');
  }
}

3. Retrieve the User's Account Address

After connecting to the MetaMask wallet, retrieve the user's account address, which is required for message signing:

javascript
const account = (await web3.eth.getAccounts())[0];

4. Sign Messages Using Web3

Once you have the user's account address, use Web3's eth.personal.sign method to sign messages:

javascript
async function signMessage(message, account) {
  if (!window.ethereum) return;

  const web3 = new Web3(window.ethereum);
  try {
    const signature = await web3.eth.personal.sign(message, account, '');
    console.log('Signature:', signature);
    return signature;
  } catch (error) {
    console.error('Error signing message:', error);
  }
}

5. Handle the Signed Result

The signed result can be used for verification on the backend to ensure the message was sent by the user holding the specific private key.

javascript
const verifySignature = async (message, signature) => {
  const web3 = new Web3(window.ethereum);
  try {
    const signer = await web3.eth.personal.ecRecover(message, signature);
    console.log('Signer:', signer);
    return signer;
  } catch (error) {
    console.error('Error verifying signature:', error);
  }
};

Example Scenario

Imagine you are developing an online voting system where you require users to sign their votes to ensure authenticity. When users submit their votes, you can use the above method to have them sign their votes and verify the signature on the backend to ensure the vote has not been tampered with.

By following these steps, you can integrate Web3 and MetaMask in your React application for message signing and verification. This not only enhances the application's security but also builds user trust.