How can you sign with Metamask without web3?

Question

The latest Metamask versions completely remove web3. Even if you pull web3 in from the CDN package, Metamask will throw an error when you try to use it.

All answers I have seen for signing had used web3 to use sign, including How to verify MetaMask account holder is the real owner of the address?. As noted there, web3 is no longer allowed. Even the docs are out of date. They point to https://danfinlay.github.io/js-eth-personal-sign-examples/, which has the error I speak of when you click eth_sign.

I tried the following:

// address is returned from eth_requestAccounts
const promise = await ethereum.request({
  method: 'eth_sign',
  params: [address, `Please sign to verify you own ${address}`],
})

I'm aware I need to do some kind of encryption for the message, but not sure what to do there. Aside from that, I get a nasty warning from Metamask about this method and when I click "Sign" the promise never resolves. The kicker is that the Learn More link takes me to a page that I can't access, even when signed into their Zendesk: https://metamask.zendesk.com/hc/en-us/articles/360015488751

When I go to https://docs.metamask.io/guide/signing-data.html#sign-typed-data-v4, I see there is supposedly a better method of signTypedData_v4. It links to a blog post about it, but it references deprecated methods, still says _v3 in the post, and is using version 4 of Metamask while the current is up to 10. When I even try signTypedData_v4, it says that is not a supported method from Metamask.

Answer 1

So most answers on Stack say to use web3.eth.personal.sign. As noted, Metamask removes access. Found the answer here: https://www.toptal.com/ethereum/one-click-login-flows-a-metamask-tutorial.

The fix is to simply overwrite web3 in your code. I had put web3 on the page via a script tag, which Metamask went ahead and took control over anyway. Putting it straight into a component gets past this.

import Web3 from 'web3';
web3 = new Web3(ethereum);