Исправлен баг, из-за которого не отображалась кнопка входа через telegram

This commit is contained in:
2026-06-17 19:24:46 +03:00
parent c4065962e2
commit e3a78301c2
@@ -28,9 +28,18 @@ export function TelegramLoginButton({
onAuth: (user: TelegramUser) => void; onAuth: (user: TelegramUser) => void;
}) { }) {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
// onAuth держим в ref, чтобы он НЕ был в зависимостях эффекта: иначе новая инлайн-
// функция на каждый рендер пересоздавала бы виджет (а cleanup сносит его innerHTML
// в момент отрисовки — в dev со StrictMode кнопка из-за этого не появлялась).
const onAuthRef = useRef(onAuth);
onAuthRef.current = onAuth;
useEffect(() => { useEffect(() => {
window.__fsTelegramAuth = (user) => onAuth(user); window.__fsTelegramAuth = (user) => onAuthRef.current(user);
const node = ref.current;
if (!node) return;
node.innerHTML = ""; // на случай повторного монтирования (StrictMode)
const script = document.createElement("script"); const script = document.createElement("script");
script.src = "https://telegram.org/js/telegram-widget.js?22"; script.src = "https://telegram.org/js/telegram-widget.js?22";
script.async = true; script.async = true;
@@ -39,14 +48,12 @@ export function TelegramLoginButton({
script.setAttribute("data-userpic", "false"); script.setAttribute("data-userpic", "false");
script.setAttribute("data-request-access", "write"); script.setAttribute("data-request-access", "write");
script.setAttribute("data-onauth", "__fsTelegramAuth(user)"); script.setAttribute("data-onauth", "__fsTelegramAuth(user)");
node.appendChild(script);
const node = ref.current;
node?.appendChild(script);
return () => { return () => {
if (node) node.innerHTML = ""; node.innerHTML = "";
delete window.__fsTelegramAuth;
}; };
}, [botUsername, onAuth]); }, [botUsername]); // только смена бота пересоздаёт виджет
return <div ref={ref} />; return <div ref={ref} />;
} }