How to properly format bytes32 in javascript to send to contract?

Question

I am trying to use the keccak256 function to recover a signed address (basically implementing a whitelisting functionaltiy for an NFT project).

The problem that I am having is that I can not figure out what the proper format of bytes32 for the hash is.

Here is what I am doing so far:

const signerPrivateKey = "someprivatekey"
const signer = new ethers.Wallet(signerPrivateKey);
const hashedAddress = ethers.utils.id(potentialWhiteListAddress);
const hashedAddressBytes = ethers.utils.arrayify(hashedAddress);
const signedAddress = await signer.signMessage(hashedAddressBytes);

return { signedAddress, hashedAddress };

Then when interacting with my contract, the function that I am trying to use is:

function recoverSigner(bytes32 hash, bytes memory signature) public pure returns (address) {
  bytes32 messageDigest = keccak256(abi.encodePacked("\x19Ethereum Signed Message:\n32", hash));

  return ECDSA.recover(messageDigest, signature);
}

Calling the contract function from the frontend:

// hashedAddress - 0xdb2ec52069cba65d62a560cad9088e7a709d09e7c14b33d740bXXXXXXXXXXXXX
// signedAddress - 0xd49bc3982f08cb0d67d7a070ffee33b348ab28c70f98bbc67a8fc89e8b419a5865007411d0c2131636dc4e6779a0d88f631c5edf5a75a806853d06b8XXXXXXXXXX

await myContract.recoverSigner(hashedAddress, signedAddress);

However, I keep getting the error, because (im assuming) hashedAddress is actually 64bytes (64 characters):

Error: bytes32 string must be less than 32 bytes

Answer 1

I found the problem, I was doing the signing on the backend with an api call and returning the hashed bytes array as a response, apparently for some reason nextjs is turning numeric array into an object, so I ahd to turn it back into a simple numeric array.

const hashedAddressBytesArray = Object.keys(
        data.hashedAddressBytes
      ).map((key) => data.hashedAddressBytes[key]);