react

@telegram-auth/react

Warning

Deprecated and unmaintained.

This package is deprecated in favour of Telegram's OpenID Connect login. Replace <LoginButton /> with Telegram's own login library, or with your own button that starts a standard OIDC redirect.

→ Migration guide

This package still works, but will receive no further releases, bug fixes, or security updates.

@telegram-auth/react exports a React component (LoginButton) to render a Telegram Login button using Telegram Login Widget.

Documentation

• Reference

Install

# npm
npm install @telegram-auth/react

# yarn
yarn add @telegram-auth/react

# with pnpm
pnpm add @telegram-auth/react

Usage

with authCallbackUrl

If you specify authCallbackUrl, the user will be redirected to the specified URL after the authentication process is completed. You must validate the data sent to the URL as query params before authorizing the user.

import { LoginButton } from '@telegram-auth/react';

function App() {
    return (
        <div className="App">
            <LoginButton
                botUsername={process.env.BOT_USERNAME}
                authCallbackUrl="/path/to/callback/url"
                buttonSize="large" // "large" | "medium" | "small"
                cornerRadius={5} // 0 - 20
                showAvatar={true} // true | false
                lang="en"
            />
        </div>
    );
}

with onAuthCallback

import { LoginButton } from '@telegram-auth/react';

function App() {
    return (
        <div className="App">
            <LoginButton
                botUsername={process.env.BOT_USERNAME}
                onAuthCallback={(data) => {
                    console.log(data);
                    // call your backend here to validate the data and sign in the user
                }}
            />
        </div>
    );
}

Validation

You can use @telegram-auth/server server-side to validate the data.

import { AuthDataValidator } from '@telegram-auth/server';
import { urlStrToAuthDataMap } from '@telegram-auth/server/utils';

const validator = new AuthDataValidator({ botToken: process.env.BOT_TOKEN });

const data = urlStrToAuthDataMap(request.url);

try {
    const user = await validator.validate(data);

    // The data is now valid and you can sign in the user.

    console.log(user);
} catch (error) {
    console.error(error);
}