Blog Detail


A Simple Telegram Login Component Made with Vue Js cover image

arrow_back A Simple Telegram Login Component Made with Vue Js

vue3-telegram-login is a Vue component for Telegram Login introduced by cinob. This package is extremely beneficial for the developers who want to integrate Telegram Login into their applications. You can utilize it with Vue 3 in your projects.


You’ve to run this command to install it with npm:

$ npm i vue3-telegram-login --save


Next, You’ve to Import telegram-login-temp, pass it to the component, and then you can utilize it in your template.

  <!-- Callback mode -->
  <span v-if="!isLoaded">Loading...</span>

  <!-- Redirect mode -->
<script setup>
import { telegramLoginTemp } from 'vue3-telegram-login'
import { ref } from 'vue'

const isLoaded = ref(false)

function telegramLoadedCallbackFunc () {
  console.log('script is loaded')
  isLoaded.value = true

function yourCallbackFunction (user) {
  // gets user as an input
  // id, first_name, last_name, username,
  // photo_url, auth_date and hash

Closing Notes

  • You need to set the domain to your bot if you want to use Telegram Login (/setdomain command to @BotFather)
  • You’ve to validate the authentication and the integrity of the data received by correlating the received hash parameter with the hexadecimal representation of the HMAC-SHA-256 signature of the data-check-string with the SHA256 hash of the bot’s token utilized as a secret key (source).
  • You can observe some code samples on this page.
  • Don’t disable third party cookies if you want to use Telegram Login as a User (thanks @robverhoef )

If you want to learn more about this package, then you can visit its full documentation on Github.

Published at : 02-08-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project