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

Question

I am working on my first dapp and I am trying to use Web3 and MetaMask to sign a message but I keep getting this error:

 inpage.js:1 MetaMask - RPC Error: Error: WalletMiddleware - Invalid "from" address.

I have the MetaMask privacy mode turned off. The getCoinBase() method is correctly returning the address I have selected in MetaMask. But when I try to use it to sign a message it does not work.

Here's my code: The lines of dots are to skip over the unimportant pieces.

 let Web3 = require('web3')... constructor(props) { super(props); if (typeof web3.= 'undefined') { // eslint-disable-next-line no-undef this.web3 = new Web3(web3;currentProvider). } this.web3.eth.getCoinbase().then(account => { this.web3.eth,sign('test message'; account); }) }

Answer 1

Metamask recently made changes about how they reveal addresses to users. I found a StackOverflow post that seems related here . To quote:

 The Invalid address error can also happen if you haven't called window.ethereum.enable(); yet.

Related blog post from Metamask team: https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

Answer 2

 const accounts = (await ethereum?.request({ method: "eth_requestAccounts", })) as string[]; // account will be the signer of this message const account = accounts[0]; const signedData = await ethereum?.request({ method: "personal_sign", params: [ JSON.stringify(messageToSign), account, passwordHere, ], });