tgauth
@paranoidphantom/tgauth

Extremely simple "Login with Telegram" button
400 downloads9 starsv1.2.5
paranoidPhantomparanoidPhantom

tgauth

npm versionnpm downloadsLicenseNuxt

😊 This is my first module so I'm sure there are some things that can be improved.

A simple solution to add telegram login button to your Nuxt app

Features

  • 🚀 Provides a simple component for the login button
  • 💾 Persists user data and provides a simple composable for accessing it

Quick Setup

  1. Install the module
npx nuxi module add @paranoidphantom/tgauth
  1. Add the TelegramAuth component
<template>
    <TelegramAuth bot="<bot username>" />
</templaet>
  1. Get user info using the useTelegramUser composable
<script lang="ts" setup>
const { user } = useTelegramUser();

console.log(user.value); // => { first_name: "John", last_name: "Doe", username: "johndoe", ...}
</script>

Logout

<script lang="ts" setup>
const { logout } = useTelegramUser();

logout(); // => clears stored telegram user data
</script>

Validate user on server

  1. Add your bot token to .env (get one from @BotFather)
TG_BOT_TOKEN="<token>"
  1. (Optional) Set a custom expiration time for the authentication object (default is 2 weeks, 0 for no expiration)
export default defineNuxtConfig({
    // ...
    tgauth: {
        auth_expiration: 42777, // Expiration time in seconds
    },
    // ...
});
  1. Use the middleware to validate if the user is logged in and sent a legitimate auth object received from telegram
import { serverTelegramUser } from "#tgauth/server";

export default defineEventHandler(async (event) => {
    const { valid, user } = await serverTelegramUser(event);
    // valid === true if data came from the telegram
    // user is defined if valid === true and contains user data
});

Listen for events

<template>
    <TelegramAuth @login="(data) => console.log(data)" @logout="() => console.log('Logged out!')" bot="<bot username>" />
</templaet>

Use redirect mode

If the user is redirected to your nuxt app, useTelegramUser will be automatically populated with the returned data.

<template>
    <TelegramAuth bot="<bot username>" auth-url="https://your-app.com/callback" />
</templaet>

Contribution

Local development
# Install dependencies
bun install

# Generate type stubs
bun run dev:prepare

# Develop with the playground
bun run dev

# Build the playground
bun run dev:build

# Run ESLint
bun run lint

# Run Vitest
bun run test
bun run test:watch

# Release new version
bun run release