I am attempting to fetch encrypted raw buffer data (AES-256) from Arweave, pass to a decrypt function and use this to display an image. I am trying to fetch and decrypt the ArrayBuffer on the front end (in my React app).

First, I am encrypting the Buffer data in NodeJS and storing the file. Here is the code for it:

/**********************
 **  Runs in NodeJS  **
 **********************/

const encrypt = (dataBuffer, key) => {
    // Create an initialization vector
    const iv = crypto.randomBytes(IV_LENGTH);
    // Create cipherKey
    const cipherKey = Buffer.from(key);
    // Create cipher
    const cipher = crypto.createCipheriv(ALGORITHM, cipherKey, iv);

    const encryptedBuffer = Buffer.concat([
        cipher.update(dataBuffer),
        cipher.final(),
    ]);
    const authTag = cipher.getAuthTag();
    let bufferLength = Buffer.alloc(1);
    bufferLength.writeUInt8(iv.length, 0);

    return Buffer.concat([bufferLength, iv, authTag, encryptedBuffer]);
};

const encryptedData = encrypt(data, key)

fs.writeFile("encrypted_data.enc", encryptedData, (err) => {
    if(err){
        return console.log(err)
    }
});

Next, I try to fetch and decrypt on the front-end. What I have so far returns an ArrayBuffer from the response. I try to pass this ArrayBuffer to the decrypt function. Here is the code:

/***********************
 **  Runs in React  **
 ***********************/
 import crypto from "crypto"

const getData = async (key) => {
  const result = await (await fetch('https://arweave.net/u_RwmA8gP0DIEeTBo3pOQTJ20LH2UEtT6LWjpLidOx0/encrypted_data.enc')).arrayBuffer()
  const decryptedBuffer = decrypt(result, key)
  console.log(decryptedBuffer)
}

//  Here is the decrypt function I am passing the ArrayBuffer to:
export const decrypt = (dataBuffer, key) => {
    // Create cipherKey
    const cipherKey = Buffer.from(key);
    // Get iv and its size
    const ivSize = dataBuffer.readUInt8(0);
    const iv = dataBuffer.slice(1, ivSize + 1);
    // Get authTag - is default 16 bytes in AES-GCM
    const authTag = dataBuffer.slice(ivSize + 1, ivSize + 17);

    // Create decipher
    const decipher = crypto.createDecipheriv("aes-256-gcm", cipherKey, iv);
    decipher.setAuthTag(authTag);

    return Buffer.concat([
        decipher.update(dataBuffer.slice(ivSize + 17)),
        decipher.final(),
    ]);
};

When I pass the ArrayBuffer data to the decrypt function, I get this error:

Unhandled Rejection (TypeError): First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.