Create HMAC SHA-1 in JS with byte array

I've created the following utility function which should create an HMAC SHA-1 hash in TypeScript using crypto-js:

import hmacSha1 from 'crypto-js/hmac-sha1'

export function hotp(
  hmac: Uint8Array,
  message: string
): { key: string; message: string; sha1: string } {
  const key = new TextDecoder('utf-8').decode(hmac)
  const sha1 = hmacSha1(message, key)

  return { key, message, sha1: sha1.toString() }
}

I've been given some byte arrays which contain the key used to encode the message. These are from a Python script. My aim is to get the output to match with the Python code.

When I use this key, which I believe to contain only standard characters, I can get the output to match:

const key = new Uint8Array([
  0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x0a, 0x0b, 0x0c, 0x0d,
  0x0e, 0x0f, 0x10, 0x11, 0x12, 0x13, 0x14, 0x15, 0x16, 0x17, 0x18, 0x19, 0x1a, 0x1b,
  0x1c, 0x1d, 0x1e, 0x1f, 0x20, 0x21, 0x22, 0x23, 0x24, 0x25, 0x26, 0x27, 0x28, 0x29,
  0x2a, 0x2b, 0x2c, 0x2d, 0x2e, 0x2f, 0x30, 0x31, 0x32, 0x33, 0x34, 0x35, 0x36, 0x37,
  0x38, 0x39, 0x3a, 0x3b, 0x3c, 0x3d, 0x3e, 0x3f,
])

const message = 'Sample #1'

// output: 4f4ca3d5d68ba7cc0a1208c9c61e9c5da0403c0a

However when I use a key which has special characters, I cannot get the output to match:

const key = new Uint8Array([
  0x50, 0x51, 0x52, 0x53, 0x54, 0x55, 0x56, 0x57, 0x58, 0x59, 0x5a, 0x5b, 0x5c, 0x5d,
  0x5e, 0x5f, 0x60, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68, 0x69, 0x6a, 0x6b,
  0x6c, 0x6d, 0x6e, 0x6f, 0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77, 0x78, 0x79,
  0x7a, 0x7b, 0x7c, 0x7d, 0x7e, 0x7f, 0x80, 0x81, 0x82, 0x83, 0x84, 0x85, 0x86, 0x87,
  0x88, 0x89, 0x8a, 0x8b, 0x8c, 0x8d, 0x8e, 0x8f, 0x90, 0x91, 0x92, 0x93, 0x94, 0x95,
  0x96, 0x97, 0x98, 0x99, 0x9a, 0x9b, 0x9c, 0x9d, 0x9e, 0x9f, 0xa0, 0xa1, 0xa2, 0xa3,
  0xa4, 0xa5, 0xa6, 0xa7, 0xa8, 0xa9, 0xaa, 0xab, 0xac, 0xad, 0xae, 0xaf, 0xb0, 0xb1,
  0xb2, 0xb3,
])

const message = 'Sample #3'

// expected: bcf41eab8bb2d802f3d05caf7cb092ecf8d1a3aa
// actual: 2b3a896d497370f248bb9416b2262b9016c6b34b

I'm guessing I'm decoding the special characters incorrectly, but I can't figure out where I'm going wrong. The reason I think that is if I JSON encode the key in the second example, I see this:

"PQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~����������������������������������������������������"

Should I be seeing those �'s in the console? What do I need to do to decode the bytes correctly?

The Uint8Array key generally contains non-UTF-8 compliant byte sequences, so that the data is irreversibly corrupted during UTF-8 decoding with TextDecoder().

Fix: Convert the Uint8Array to a WordArray (which corresponds to the CryptoJS data type for binary data):

function hotp(hmac, message) {
  // const key = new TextDecoder('utf-8').decode(hmac)
  const key = CryptoJS.lib.WordArray.create(hmac)      // Fix!
  const sha1 = CryptoJS.HmacSHA1(message, key)

  return { key, message, sha1: sha1.toString() }
}

const key1 = new Uint8Array([
  0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x0a, 0x0b, 0x0c, 0x0d,
  0x0e, 0x0f, 0x10, 0x11, 0x12, 0x13, 0x14, 0x15, 0x16, 0x17, 0x18, 0x19, 0x1a, 0x1b,
  0x1c, 0x1d, 0x1e, 0x1f, 0x20, 0x21, 0x22, 0x23, 0x24, 0x25, 0x26, 0x27, 0x28, 0x29,
  0x2a, 0x2b, 0x2c, 0x2d, 0x2e, 0x2f, 0x30, 0x31, 0x32, 0x33, 0x34, 0x35, 0x36, 0x37,
  0x38, 0x39, 0x3a, 0x3b, 0x3c, 0x3d, 0x3e, 0x3f,
])
console.log(hotp(key1, 'Sample #1').sha1) // 4f4ca3d5d68ba7cc0a1208c9c61e9c5da0403c0a

const key2 = new Uint8Array([
  0x50, 0x51, 0x52, 0x53, 0x54, 0x55, 0x56, 0x57, 0x58, 0x59, 0x5a, 0x5b, 0x5c, 0x5d,
  0x5e, 0x5f, 0x60, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68, 0x69, 0x6a, 0x6b,
  0x6c, 0x6d, 0x6e, 0x6f, 0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77, 0x78, 0x79,
  0x7a, 0x7b, 0x7c, 0x7d, 0x7e, 0x7f, 0x80, 0x81, 0x82, 0x83, 0x84, 0x85, 0x86, 0x87,
  0x88, 0x89, 0x8a, 0x8b, 0x8c, 0x8d, 0x8e, 0x8f, 0x90, 0x91, 0x92, 0x93, 0x94, 0x95,
  0x96, 0x97, 0x98, 0x99, 0x9a, 0x9b, 0x9c, 0x9d, 0x9e, 0x9f, 0xa0, 0xa1, 0xa2, 0xa3,
  0xa4, 0xa5, 0xa6, 0xa7, 0xa8, 0xa9, 0xaa, 0xab, 0xac, 0xad, 0xae, 0xaf, 0xb0, 0xb1,
  0xb2, 0xb3,
])
console.log(hotp(key2, 'Sample #3').sha1) // bcf41eab8bb2d802f3d05caf7cb092ecf8d1a3aa

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>

With this change, the expected results are produced.