Telegram Mini App authentication not working (angular)

I'm developing a small Telegram Mini App project for University. Building the app using Angular. I'm stuck on authenticating the initData. The poor telegram documentation not helping at all.

Here's my code:

constructor(private route: ActivatedRoute) {
// validate();
WebApp.ready();
// this._validate();
this.__validate();
}

__validate() {
const data = WebApp.initData
.split('&') // split by &
.sort() // sort by key
.map((item) => {
const [key, value] = item.split('='); // split by =
return { [key]: (value) } // return object
})
.reduce((acc, item) => ({ ...acc, ...item }), {}); // merge all

const hash = data['hash']; // save hash

delete data['hash']; // remove hash

console.log("data: ", data);

const data_check_string = Object.keys(data).map(key => `${key}=<${data[key]}>`).join('\n')

console.log(data_check_string);


const secretKey = sha256.hmac("WebAppData", this.TOKEN);
const _hash = sha256.hex(sha256.hmac(secretKey, data_check_string));


console.log('hash:', hash);
console.log('_hash:', _hash);



}


The console ouput on my mini app is:
(I censored some personal info with '...'):

data: Object auth_date: "1729515733" query_id: "..." user: "{"id"%...%2C"first_name"%3A"Francesco"%2C"last_name"%3A"..."%2C"username"%3A"..."%2C"language_code"%3A"it"%2C"allows_write_to_pm"%3Atrue}" [[Prototype]]: Object

auth_date=<1729515733> query_id=<...> user=<{"id"%...%2C"first_name"%3A"Francesco"%2C"last_name"%3A"..."%2C"username"%3A"..."%2C"language_code"%3A"it"%2C"allows_write_to_pm"%3Atrue}>

hash: 387f5a91d7cbb18405697392b1cac60254c7713f3439acd190a1b1999cf7ff3b _hash: 84e33c391889ad4b16f918b0a1d87ebe9478992a0d79ab136c095980adeb4b3c
​

Following this doc

I tried retrieving the data in different ways. I tried key=value and key=<value> formats I tried reading different documentations but i can never make it work.

hash and _hash do not match

Continue reading...