Ошибка при подключении telegram widget

Не могу подключить telegram widget Создал телеграм бот через @botFather, выдал такой виджет:

<script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="kyrgyztest" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"></script>
<script type="text/javascript">
  function onTelegramAuth(user) {
    alert('Logged in as ' + user.first_name + ' ' + user.last_name + ' (' + user.id + (user.username ? ', @' + user.username : '') + ')');
  }
</script>

проект написан на vue3 composition API + Typescript. выдает ошибку

Username invalid

в файле views/auth/Login.vue

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const telegramWidget = ref<HTMLElement | null>(null);


onMounted(() => {
  const widgetElement = telegramWidget.value;
  
  if (widgetElement) {
    const script = document.createElement('script');
    script.src = 'https://telegram.org/js/telegram-widget.js?22';
    script.setAttribute('data-telegram-login', 'kyrgyztest';
    script.setAttribute('data-size', 'large');
    script.setAttribute('data-radius', '20');
    // script.setAttribute('data-onauth', 'onTelegramAuth(user)');

    script.async = true;
    widgetElement.appendChild(script);
  }
});
</script>

<template>
  <div ref="telegramWidget">Welcome</div>
</template>

в файле .env хранится

TELEGRAM_BOT_NAME="kyrgyztest"
TELEGRAM_BOT_TOKEN="токен:токен-токен"

больше ничего не связывается. Что я неправильно делаю, помогите, я новичок в этом. ??