Telegram Login Widget - Vanilla JS Demo

A minimal, serverless, vanilla JS implementation of the Telegram Login Widget.

Quick Start

1. Create a Telegram Bot

• Message @BotFather on Telegram.
• Use /newbot to create a bot.
• Copy the bot username (e.g., MyDemoWebAppBot).

2. Set Bot Domain

The widget requires a registered HTTPS domain.

• Go back to @BotFather: /mybots -> select your bot -> Bot Settings -> Domain.
• Set your domain (e.g., your-app.github.io).
• For local development: Use ngrok to create a secure tunnel (ngrok http 8000) and set the provided https domain (e.g., your-id.ngrok-free.app).

3. Configure HTML

• Clone this repository.
• In index.html, replace YOUR_BOT_USERNAME with your bot's actual username.

<script async src="https://telegram.org/js/telegram-widget.js?22"
        data-telegram-login="MyDemoWebAppBot" data-size="large"
        data-onauth="onTelegramAuth(user)"
        data-request-access="write"></script>

That's it. Serve the index.html file and open it in your browser.

Callback Data

On successful authentication, the onTelegramAuth(user) callback function receives a user object. You can use the hash on your backend to verify the data integrity.

{
  "id": 123456789,
  "first_name": "John",
  "last_name": "Doe",
  "username": "johndoe",
  "photo_url": "https://t.me/i/userpic/320/johndoe.jpg",
  "auth_date": 1728636991,
  "hash": "a1b2c3d4e5f6..."
}

Snippets