1

Hey guys i am trying to implement metamask's signTypedData login. I am getting the first part correctly, but i am having problem with second part where i need to verify signedtypeddata with eth.util.checksumaddress. i am getting this message on console

App.js:163 ReferenceError: Buffer is not defined
    at Object.eip712Hash (sign-typed-data.ts:389:1)
    at recoverTypedSignature (sign-typed-data.ts:570:1)
    at signTypedDataV4Verify (App.js:145:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)

This is my code

const signTypedDataV4Verify = async () => {
    const chainId = 1;
    const msgParams = {
      domain: {
        chainId,
        name: "Ether Mail",
        verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
        version: "1",
      },
      message: {
        contents: "Hello, Bob!",
        from: {
          name: "Cow",
          wallets: [
            "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
            "0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF",
          ],
        },
        to: [
          {
            name: "Bob",
            wallets: [
              "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
              "0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57",
              "0xB0B0b0b0b0b0B000000000000000000000000000",
            ],
          },
        ],
      },
      primaryType: "Mail",
      types: {
        EIP712Domain: [
          { name: "name", type: "string" },
          { name: "version", type: "string" },
          { name: "chainId", type: "uint256" },
          { name: "verifyingContract", type: "address" },
        ],
        Group: [
          { name: "name", type: "string" },
          { name: "members", type: "Person[]" },
        ],
        Mail: [
          { name: "from", type: "Person" },
          { name: "to", type: "Person[]" },
          { name: "contents", type: "string" },
        ],
        Person: [
          { name: "name", type: "string" },
          { name: "wallets", type: "address[]" },
        ],
      },
    };
    try {
      const from = web3.eth.getAccounts();
      const sign =
        "0xe5d78d669361f4c6e8ee3d4b10122bdd8b5147e1478d3b531722cd8901fff27b6715436fe18013e2acb7a978aba4bab98330d92caf2c6a5ad0525493d5d257111c";
      const recoveredAddr = recoverTypedSignature({
        data: msgParams,
        signature: sign,
        version: "V4",
      });
      if (
        web3.utils.toChecksumAddress(recoveredAddr) ===
        web3.utils.toChecksumAddress(from[0])
      ) {
        console.log(`Successfully verified signer as ${recoveredAddr}`);
        console.log(recoveredAddr);
      } else {
        console.log(
          `Failed to verify signer when comparing ${recoveredAddr} to ${from}`
        );
      }
    } catch (err) {
      console.error(err);
    }
  

I hard coded the public key for simplicity in from variable

1 Answer 1

1

You can try simply defining the Buffer like this:

import { Buffer } from "buffer";
window.Buffer = window.Buffer || Buffer;

For this to work, you may need to install buffer first:

npm install buffer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.