Как связать mini app и telegram bot

Когда я запускаю mini app в браузерной версии, то появляется вот такая ошибка, и я не могу получить данные о пользователе из

const tg = window.Telegram.WebApp;
tg.ready();

const user = tg.initDataUnsafe?.user;

Я проверил webAppUrl и токен бота все сходится, но почему-то mini app не видит бота, если ей и не нужен будет и подскажете в чем проблема и как можно получить данные из initDataUnsafe буду признателен

так же для контекста вот полный код со стороны сервера:

import { Telegraf, Context } from "telegraf";
require('dotenv').config();

export const bot = new Telegraf<Context>(process.env.BOT_TOKEN || 'bruh...'); 

bot.start((ctx) => {
  ctx.reply('Привет! Я простой бот. Напиши мне что-нибудь!');
  console.log(`User started the bot.`, ctx.from);

  ctx.replyWithPhoto('', {
          caption: 'Aboba',
          reply_markup: options.reply_markup,
        })
        .catch((err) => {
          console.error(err);
        });
});

const options = {
  reply_markup: {
    inline_keyboard: [
      [{ text: 'Launch bot', web_app: { url: 'здесь есть url' } }],
    ],
  },
};




const webhookUrl = 'здесь есть url'; 
bot.telegram.setWebhook(webhookUrl).then(() => console.log('Webhook установлен'));


process.once('SIGINT', () => bot.stop('SIGINT'));
process.once('SIGTERM', () => bot.stop('SIGTERM'));

И frontend часть с получение данных о пользователе:

import { useEffect } from 'react';
import { generateRandomUser } from '../utils/generateRandomUser';
import { useAppDispatch, useAppSelector } from './useRedux';
import { setUser } from '../store/slices/user.slice';

export const useTelegram = () => {
  const { user } = useAppSelector((state) => state.user);
  const dispatch = useAppDispatch();
  
  useEffect(() => {
    if (window.Telegram?.WebApp) {
      const tg = window.Telegram.WebApp;
      
      console.log("Telegram user data:", tg);

      const user = tg.initDataUnsafe?.user;

      console.log("Telegram user data:", user);
      
      if (user) {
        dispatch(setUser(tg.initDataUnsafe.user));
      } else {
        dispatch(setUser(generateRandomUser()));
      }

      tg.setHeaderColor('#2481cc');
      tg.expand();
    } else {
      dispatch(setUser(generateRandomUser()));
    }
  }, []);
  
  return { user };
};