Telegram user authentication in JavaScript via Web Crypto API (dependency-free)

check_authorization.js

async function validate(data, bot_token) {
  const encoder = new TextEncoder()

  const checkString = await Object.keys(data)
    .filter((key) => key !== "hash")
    .map((key) => `${key}=${data[key]}`)
    .sort()
    .join("\n")

  //console.log('computed string:', checkString)

  const tokenKey = await crypto.subtle.digest('SHA-256', encoder.encode(bot_token))
  const secretKey = await crypto.subtle.importKey("raw", tokenKey, {name: "HMAC", hash: "SHA-256"}, true, ["sign"])
  const signature = await crypto.subtle.sign("HMAC", secretKey, encoder.encode(checkString))

  const hex = [...new Uint8Array(signature)].map(b => b.toString(16).padStart(2, '0')).join('')

  //console.log('original hash:', data.hash)
  //console.log('computed hash:', hex)

  return data.hash === hex
}

For those who faced the same problem with me, this is the code in JS

const crypto = require("crypto");

function validate(data, token) {
  const secretKey = crypto.createHash("sha256").update(token).digest();
  const data_check_string = Object.keys(message)
    .filter((key) => key !== "hash")
    .map((key) => `${key}=${message[key]}`)
    .sort()
    .join("\n");
  const check_hash = crypto
    .createHmac("sha256", secretKey)
    .update(data_check_string)
    .digest("hex");

  return check_hash == data.hash;
}

Provided By Link

Good day, i dont know if you could help me, no matter what i do i kept getting a mismatch, please how do i prepare the data from front-end before sending it to backend for hashing? do i need to hash it at the frontend before sending it to the backend? i will really appreciate your help.