diff --git a/package.json b/package.json
index f4eb450..388fee5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@amirafa/vue3-pull-to-refresh": "^1.2.13",
+    "@grammyjs/web-app": "^1.3.0",
     "@primevue/themes": "^4.4.1",
     "@tailwindcss/postcss": "^4.1.16",
     "@tailwindcss/vite": "^4.1.16",
diff --git a/src/components/auth/LoginPage.vue b/src/components/auth/LoginPage.vue
index c87350e..93d8085 100644
--- a/src/components/auth/LoginPage.vue
+++ b/src/components/auth/LoginPage.vue
@@ -1,14 +1,37 @@
 <script setup lang="ts">
+import { onMounted, ref, computed } from "vue"
+import { WebApp } from "@grammyjs/web-app"
+import router from "@/router"; // если используешь другой SDK, импорт может отличаться
 
+// необязательно делать реактивным, но удобно для шаблона
+const tgData = ref(WebApp.initDataUnsafe)
 
-const tgApp = window.Telegram.WebApp
+// какие-то удобные вычисления для UI
+const userId = computed(() => tgData.value?.user?.id?.toString() ?? "")
+const username = computed(() => tgData.value?.user?.username ?? "")
+const firstName = computed(() => tgData.value?.user?.first_name ?? "")
 
+onMounted(() => {
+  // сообщаем Telegram WebApp, что UI готов
+  WebApp.ready()
+
+  // если есть данные пользователя — положим что-то в localStorage
+  if (tgData.value?.user?.id != null) {
+    localStorage.setItem("token", tgData.value.user.id.toString())
+  } else {
+    localStorage.setItem("token", "123")
+  }
+  router.push('/')
+})
 </script>
 
 <template>
-{{tgApp}}
+  <div class="p-4">
+    <p>Telegram user id: {{ userId || "—" }}</p>
+    <p>Username: {{ username || "—" }}</p>
+    <p>First name: {{ firstName || "—" }}</p>
+  </div>
 </template>
 
 <style scoped>
-
 </style>
\ No newline at end of file