React component to display Telegram Login Widget
npm install @telegram-auth/react@telegram-auth/react exports a React component (LoginButton) to render a Telegram Login button using Telegram Login Widget.
``shnpm
npm install @telegram-auth/react
Usage
$3
If you specify
, 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.
`tsx title=src/App.tsx
import { LoginButton } from '@telegram-auth/react';function App() {
return (
authCallbackUrl="/path/to/callback/url"
buttonSize="large" // "large" | "medium" | "small"
cornerRadius={5} // 0 - 20
showAvatar={true} // true | false
lang="en"
/>
);
}
`$3
jsx title=src/App.jsx
import { LoginButton } from '@telegram-auth/react';function App() {
return (
onAuthCallback={(data) => {
console.log(data);
// call your backend here to validate the data and sign in the user
}}
/>
);
}
`Validation
server-side to validate the data.
`ts title=validate.ts
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);
}
``