feat: deep link авторизация при блокировке oauth.telegram.org

Добавлен fallback через бота когда виджет Telegram не загружается:
- Таймаут 8 сек на загрузку скрипта (OIDC + legacy)
- Автоматический переход на deep link auth
- Polling каждые 2.5 сек до подтверждения в боте
- ConnectedAccounts: таймаут + сообщение при недоступности
- Переводы: ru, en, zh, fa
This commit is contained in:
Fringg
2026-03-17 21:29:21 +03:00
parent 77b3a157e8
commit 6a1a9f5db7
8 changed files with 349 additions and 18 deletions

View File

@@ -277,6 +277,24 @@ export const authApi = {
return response.data; return response.data;
}, },
requestDeepLinkToken: async (): Promise<{
token: string;
bot_username: string;
expires_in: number;
}> => {
const response = await apiClient.post<{
token: string;
bot_username: string;
expires_in: number;
}>('/cabinet/auth/deeplink/request');
return response.data;
},
pollDeepLinkToken: async (token: string): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>('/cabinet/auth/deeplink/poll', { token });
return response.data;
},
getMergePreview: async (mergeToken: string): Promise<MergePreviewResponse> => { getMergePreview: async (mergeToken: string): Promise<MergePreviewResponse> => {
const response = await apiClient.get<MergePreviewResponse>( const response = await apiClient.get<MergePreviewResponse>(
`/cabinet/auth/merge/${encodeURIComponent(mergeToken)}`, `/cabinet/auth/merge/${encodeURIComponent(mergeToken)}`,

View File

@@ -1,7 +1,8 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { brandingApi, type TelegramWidgetConfig } from '../api/branding'; import { brandingApi, type TelegramWidgetConfig } from '../api/branding';
import { authApi } from '../api/auth';
import { useAuthStore } from '../store/auth'; import { useAuthStore } from '../store/auth';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
@@ -9,6 +10,9 @@ interface TelegramLoginButtonProps {
referralCode?: string; referralCode?: string;
} }
const SCRIPT_LOAD_TIMEOUT_MS = 8000;
const DEEPLINK_POLL_INTERVAL_MS = 2500;
export default function TelegramLoginButton({ referralCode }: TelegramLoginButtonProps) { export default function TelegramLoginButton({ referralCode }: TelegramLoginButtonProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -16,8 +20,18 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
const [oidcLoading, setOidcLoading] = useState(false); const [oidcLoading, setOidcLoading] = useState(false);
const [oidcError, setOidcError] = useState(''); const [oidcError, setOidcError] = useState('');
const [scriptLoaded, setScriptLoaded] = useState(false); const [scriptLoaded, setScriptLoaded] = useState(false);
const [scriptFailed, setScriptFailed] = useState(false);
const loginWithTelegramOIDC = useAuthStore((s) => s.loginWithTelegramOIDC); const loginWithTelegramOIDC = useAuthStore((s) => s.loginWithTelegramOIDC);
// Deep link auth state
const [deepLinkToken, setDeepLinkToken] = useState<string | null>(null);
const [deepLinkBotUsername, setDeepLinkBotUsername] = useState<string>('');
const [deepLinkPolling, setDeepLinkPolling] = useState(false);
const [deepLinkError, setDeepLinkError] = useState('');
const pollIntervalRef = useRef<ReturnType<typeof setInterval>>(null);
const loginWithDeepLink = useAuthStore((s) => s.loginWithDeepLink);
const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({ const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({
queryKey: ['telegram-widget-config'], queryKey: ['telegram-widget-config'],
queryFn: brandingApi.getTelegramWidgetConfig, queryFn: brandingApi.getTelegramWidgetConfig,
@@ -28,7 +42,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
widgetConfig?.bot_username || import.meta.env.VITE_TELEGRAM_BOT_USERNAME || ''; widgetConfig?.bot_username || import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
const isOIDC = Boolean(widgetConfig?.oidc_enabled && widgetConfig?.oidc_client_id); const isOIDC = Boolean(widgetConfig?.oidc_enabled && widgetConfig?.oidc_client_id);
// OIDC callback handler (ref pattern to avoid stale closures and unnecessary re-inits) // OIDC callback handler
const handleOIDCCallbackRef = const handleOIDCCallbackRef =
useRef<(data: { id_token?: string; error?: string }) => void>(undefined); useRef<(data: { id_token?: string; error?: string }) => void>(undefined);
const mountedRef = useRef(true); const mountedRef = useRef(true);
@@ -40,6 +54,15 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
}; };
}, []); }, []);
// Cleanup polling on unmount
useEffect(() => {
return () => {
if (pollIntervalRef.current) {
clearInterval(pollIntervalRef.current);
}
};
}, []);
handleOIDCCallbackRef.current = async (data: { id_token?: string; error?: string }) => { handleOIDCCallbackRef.current = async (data: { id_token?: string; error?: string }) => {
if (!mountedRef.current) return; if (!mountedRef.current) return;
if (data.error || !data.id_token) { if (data.error || !data.id_token) {
@@ -65,7 +88,14 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
} }
}; };
// Load OIDC script and init // Handle script load failure (timeout or error)
const handleScriptFailed = useCallback(() => {
if (!mountedRef.current || scriptLoaded) return;
setScriptFailed(true);
setOidcError('');
}, [scriptLoaded]);
// Load OIDC script with timeout
useEffect(() => { useEffect(() => {
if (!isOIDC || !widgetConfig?.oidc_client_id) return; if (!isOIDC || !widgetConfig?.oidc_client_id) return;
@@ -85,27 +115,45 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
} }
}; };
// Set up timeout
const timeoutId = setTimeout(() => {
if (!scriptLoaded) {
handleScriptFailed();
}
}, SCRIPT_LOAD_TIMEOUT_MS);
if (!script) { if (!script) {
script = document.createElement('script'); script = document.createElement('script');
script.id = scriptId; script.id = scriptId;
script.src = 'https://oauth.telegram.org/js/telegram-login.js?3'; script.src = 'https://oauth.telegram.org/js/telegram-login.js?3';
script.async = true; script.async = true;
script.onload = () => { script.onload = () => {
clearTimeout(timeoutId);
setScriptLoaded(true); setScriptLoaded(true);
initTelegramLogin(); initTelegramLogin();
}; };
script.onerror = () => { script.onerror = () => {
setOidcError(t('auth.loginFailed')); clearTimeout(timeoutId);
handleScriptFailed();
}; };
document.head.appendChild(script); document.head.appendChild(script);
} else { } else {
// Script already loaded, just re-init clearTimeout(timeoutId);
setScriptLoaded(true); setScriptLoaded(true);
initTelegramLogin(); initTelegramLogin();
} }
}, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access, t]);
// Legacy widget effect (only when NOT OIDC) return () => clearTimeout(timeoutId);
}, [
isOIDC,
widgetConfig?.oidc_client_id,
widgetConfig?.request_access,
t,
scriptLoaded,
handleScriptFailed,
]);
// Legacy widget effect with timeout
const loginWithTelegramWidget = useAuthStore((s) => s.loginWithTelegramWidget); const loginWithTelegramWidget = useAuthStore((s) => s.loginWithTelegramWidget);
useEffect(() => { useEffect(() => {
@@ -148,15 +196,102 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
} }
script.async = true; script.async = true;
// Timeout for legacy widget
const timeoutId = setTimeout(() => {
// If container still has no iframe child (widget didn't render), mark as failed
if (container && !container.querySelector('iframe')) {
handleScriptFailed();
}
}, SCRIPT_LOAD_TIMEOUT_MS);
script.onerror = () => {
clearTimeout(timeoutId);
handleScriptFailed();
};
container.appendChild(script); container.appendChild(script);
return () => { return () => {
clearTimeout(timeoutId);
delete (window as unknown as Record<string, unknown>)[callbackName]; delete (window as unknown as Record<string, unknown>)[callbackName];
while (container.firstChild) { while (container.firstChild) {
container.removeChild(container.firstChild); container.removeChild(container.firstChild);
} }
}; };
}, [isOIDC, botUsername, widgetConfig, loginWithTelegramWidget, navigate]); }, [isOIDC, botUsername, widgetConfig, loginWithTelegramWidget, navigate, handleScriptFailed]);
// Deep link auth: request token and start polling
const startDeepLinkAuth = useCallback(async () => {
setDeepLinkError('');
try {
const { token, bot_username } = await authApi.requestDeepLinkToken();
setDeepLinkToken(token);
setDeepLinkBotUsername(bot_username || botUsername);
setDeepLinkPolling(true);
// Start polling
const intervalId = setInterval(async () => {
if (!mountedRef.current) {
clearInterval(intervalId);
return;
}
try {
await loginWithDeepLink(token);
// Success - auth store is updated, navigate
clearInterval(intervalId);
if (mountedRef.current) {
setDeepLinkPolling(false);
navigate('/');
}
} catch (err: unknown) {
const error = err as { response?: { status?: number } };
if (error.response?.status === 202) {
// Still pending, continue polling
return;
}
if (error.response?.status === 410) {
// Token expired
clearInterval(intervalId);
if (mountedRef.current) {
setDeepLinkPolling(false);
setDeepLinkToken(null);
setDeepLinkError(t('auth.deepLinkExpired'));
}
return;
}
// Other error - stop polling
clearInterval(intervalId);
if (mountedRef.current) {
setDeepLinkPolling(false);
setDeepLinkError(t('common.error'));
}
}
}, DEEPLINK_POLL_INTERVAL_MS);
pollIntervalRef.current = intervalId;
// Auto-expire after token TTL
setTimeout(
() => {
clearInterval(intervalId);
if (mountedRef.current && !useAuthStore.getState().isAuthenticated) {
setDeepLinkPolling(false);
setDeepLinkToken(null);
}
},
5 * 60 * 1000,
); // 5 minutes
} catch {
setDeepLinkError(t('common.error'));
}
}, [botUsername, loginWithDeepLink, navigate, t]);
// Auto-start deep link auth when script fails
useEffect(() => {
if (scriptFailed && !deepLinkToken && !deepLinkPolling) {
startDeepLinkAuth();
}
}, [scriptFailed, deepLinkToken, deepLinkPolling, startDeepLinkAuth]);
if (!botUsername || botUsername === 'your_bot') { if (!botUsername || botUsername === 'your_bot') {
return ( return (
@@ -166,9 +301,88 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
); );
} }
// Deep link fallback UI
if (scriptFailed) {
const deepLinkUrl = deepLinkToken
? `https://t.me/${deepLinkBotUsername || botUsername}?start=webauth_${deepLinkToken}`
: '';
return (
<div className="flex flex-col items-center space-y-4">
<div className="flex flex-col items-center space-y-3">
{/* Info message */}
<p className="max-w-xs text-center text-xs text-dark-400">
{t('auth.telegramWidgetBlocked')}
</p>
{deepLinkToken && deepLinkUrl ? (
<>
{/* Deep link button */}
<a
href={deepLinkUrl}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 rounded-lg bg-[#54a9eb] px-6 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#4a96d2]"
>
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</svg>
{t('auth.openBotToLogin')}
</a>
{/* Polling status */}
{deepLinkPolling && (
<div className="flex items-center gap-2 text-xs text-dark-400">
<span className="h-3 w-3 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
{t('auth.waitingForConfirmation')}
</div>
)}
</>
) : deepLinkError ? (
<div className="flex flex-col items-center space-y-2">
<p className="text-xs text-red-500">{deepLinkError}</p>
<button
type="button"
onClick={startDeepLinkAuth}
className="text-sm text-accent-400 transition-colors hover:text-accent-300"
>
{t('auth.tryAgain')}
</button>
</div>
) : (
<div className="flex items-center gap-2 text-xs text-dark-400">
<span className="h-3 w-3 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
{t('common.loading')}
</div>
)}
</div>
{/* Bot link fallback */}
<div className="text-center">
<p className="mb-2 text-xs text-dark-500">{t('auth.orOpenInApp')}</p>
<a
href={
referralCode
? `https://t.me/${botUsername}?start=${encodeURIComponent(referralCode)}`
: `https://t.me/${botUsername}`
}
target="_blank"
rel="noopener noreferrer"
className="text-telegram-blue inline-flex items-center text-sm hover:underline"
>
<svg className="mr-1 h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</svg>
@{botUsername}
</a>
</div>
</div>
);
}
// Normal widget UI (when script loads successfully)
return ( return (
<div className="flex flex-col items-center space-y-4"> <div className="flex flex-col items-center space-y-4">
{/* OIDC mode: custom button that opens popup */}
{isOIDC ? ( {isOIDC ? (
<div className="flex flex-col items-center space-y-2"> <div className="flex flex-col items-center space-y-2">
<button <button
@@ -193,7 +407,6 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
{oidcError && <p className="text-xs text-red-500">{oidcError}</p>} {oidcError && <p className="text-xs text-red-500">{oidcError}</p>}
</div> </div>
) : ( ) : (
/* Legacy widget mode: iframe-based widget */
<div ref={containerRef} className="flex justify-center" /> <div ref={containerRef} className="flex justify-center" />
)} )}

View File

@@ -175,6 +175,10 @@
"authenticating": "Authenticating...", "authenticating": "Authenticating...",
"orOpenInApp": "Or open the bot in the app", "orOpenInApp": "Or open the bot in the app",
"loginFailed": "Login Failed", "loginFailed": "Login Failed",
"telegramWidgetBlocked": "Telegram login widget is unavailable. Use the bot to sign in:",
"openBotToLogin": "Open bot to sign in",
"waitingForConfirmation": "Waiting for confirmation...",
"deepLinkExpired": "Link expired. Please try again.",
"tryAgain": "Try Again", "tryAgain": "Try Again",
"welcomeBack": "Welcome back!", "welcomeBack": "Welcome back!",
"loginTitle": "Login to Cabinet", "loginTitle": "Login to Cabinet",
@@ -3864,6 +3868,7 @@
"linkSuccess": "Account connected successfully", "linkSuccess": "Account connected successfully",
"unlinkSuccess": "Account disconnected successfully", "unlinkSuccess": "Account disconnected successfully",
"linkError": "Failed to connect account", "linkError": "Failed to connect account",
"telegramLinkUnavailable": "Telegram linking is temporarily unavailable. Use the bot:",
"unlinkError": "Failed to disconnect account", "unlinkError": "Failed to disconnect account",
"goToAccounts": "Connected Accounts", "goToAccounts": "Connected Accounts",
"linking": "Linking account...", "linking": "Linking account...",

View File

@@ -167,6 +167,10 @@
"authenticating": "در حال تایید هویت...", "authenticating": "در حال تایید هویت...",
"orOpenInApp": "یا ربات را در برنامه باز کنید", "orOpenInApp": "یا ربات را در برنامه باز کنید",
"loginFailed": "ورود ناموفق", "loginFailed": "ورود ناموفق",
"telegramWidgetBlocked": "ویجت ورود تلگرام در دسترس نیست. از طریق ربات وارد شوید:",
"openBotToLogin": "باز کردن ربات برای ورود",
"waitingForConfirmation": "در انتظار تایید...",
"deepLinkExpired": "لینک منقضی شده است. لطفا دوباره تلاش کنید.",
"tryAgain": "تلاش مجدد", "tryAgain": "تلاش مجدد",
"welcomeBack": "خوش آمدید!", "welcomeBack": "خوش آمدید!",
"loginTitle": "ورود به کابین", "loginTitle": "ورود به کابین",
@@ -3258,6 +3262,7 @@
"linkSuccess": "حساب با موفقیت متصل شد", "linkSuccess": "حساب با موفقیت متصل شد",
"unlinkSuccess": "اتصال حساب با موفقیت قطع شد", "unlinkSuccess": "اتصال حساب با موفقیت قطع شد",
"linkError": "اتصال حساب ناموفق بود", "linkError": "اتصال حساب ناموفق بود",
"telegramLinkUnavailable": "اتصال تلگرام موقتاً در دسترس نیست. از ربات استفاده کنید:",
"unlinkError": "قطع اتصال ناموفق بود", "unlinkError": "قطع اتصال ناموفق بود",
"goToAccounts": "حساب‌های متصل", "goToAccounts": "حساب‌های متصل",
"linking": "در حال اتصال حساب...", "linking": "در حال اتصال حساب...",

View File

@@ -178,6 +178,10 @@
"authenticating": "Авторизация...", "authenticating": "Авторизация...",
"orOpenInApp": "Или откройте бота в приложении", "orOpenInApp": "Или откройте бота в приложении",
"loginFailed": "Ошибка входа", "loginFailed": "Ошибка входа",
"telegramWidgetBlocked": "Виджет входа через Telegram недоступен. Войдите через бота:",
"openBotToLogin": "Открыть бота для входа",
"waitingForConfirmation": "Ожидание подтверждения...",
"deepLinkExpired": "Ссылка истекла. Попробуйте снова.",
"tryAgain": "Попробовать снова", "tryAgain": "Попробовать снова",
"welcomeBack": "Добро пожаловать!", "welcomeBack": "Добро пожаловать!",
"loginTitle": "Вход в личный кабинет", "loginTitle": "Вход в личный кабинет",
@@ -4421,6 +4425,7 @@
"linkSuccess": "Аккаунт успешно привязан", "linkSuccess": "Аккаунт успешно привязан",
"unlinkSuccess": "Аккаунт успешно отвязан", "unlinkSuccess": "Аккаунт успешно отвязан",
"linkError": "Не удалось привязать аккаунт", "linkError": "Не удалось привязать аккаунт",
"telegramLinkUnavailable": "Привязка Telegram временно недоступна. Используйте бота:",
"unlinkError": "Не удалось отвязать аккаунт", "unlinkError": "Не удалось отвязать аккаунт",
"goToAccounts": "Привязанные аккаунты", "goToAccounts": "Привязанные аккаунты",
"linking": "Привязка аккаунта...", "linking": "Привязка аккаунта...",

View File

@@ -167,6 +167,10 @@
"authenticating": "正在验证...", "authenticating": "正在验证...",
"orOpenInApp": "或在应用中打开机器人", "orOpenInApp": "或在应用中打开机器人",
"loginFailed": "登录失败", "loginFailed": "登录失败",
"telegramWidgetBlocked": "Telegram登录小部件不可用。请使用机器人登录",
"openBotToLogin": "打开机器人登录",
"waitingForConfirmation": "等待确认...",
"deepLinkExpired": "链接已过期,请重试。",
"tryAgain": "重试", "tryAgain": "重试",
"welcomeBack": "欢迎回来!", "welcomeBack": "欢迎回来!",
"loginTitle": "登录个人中心", "loginTitle": "登录个人中心",
@@ -3257,6 +3261,7 @@
"linkSuccess": "账户关联成功", "linkSuccess": "账户关联成功",
"unlinkSuccess": "账户取消关联成功", "unlinkSuccess": "账户取消关联成功",
"linkError": "关联账户失败", "linkError": "关联账户失败",
"telegramLinkUnavailable": "Telegram关联暂时不可用。请使用机器人",
"unlinkError": "取消关联失败", "unlinkError": "取消关联失败",
"goToAccounts": "关联账户", "goToAccounts": "关联账户",
"linking": "正在关联账户...", "linking": "正在关联账户...",

View File

@@ -25,6 +25,8 @@ const isLinkableProvider = (provider: string): boolean =>
// SessionStorage key for Telegram link CSRF state // SessionStorage key for Telegram link CSRF state
export const LINK_TELEGRAM_STATE_KEY = 'link_telegram_state'; export const LINK_TELEGRAM_STATE_KEY = 'link_telegram_state';
const LINK_SCRIPT_LOAD_TIMEOUT_MS = 8000;
/** Telegram account linking widget (browser only). Supports OIDC popup and legacy widget. */ /** Telegram account linking widget (browser only). Supports OIDC popup and legacy widget. */
function TelegramLinkWidget() { function TelegramLinkWidget() {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
@@ -34,6 +36,7 @@ function TelegramLinkWidget() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [oidcLoading, setOidcLoading] = useState(false); const [oidcLoading, setOidcLoading] = useState(false);
const [scriptLoaded, setScriptLoaded] = useState(false); const [scriptLoaded, setScriptLoaded] = useState(false);
const [scriptFailed, setScriptFailed] = useState(false);
const mountedRef = useRef(true); const mountedRef = useRef(true);
const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({ const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({
@@ -65,6 +68,12 @@ function TelegramLinkWidget() {
[navigate, queryClient, showToast, t], [navigate, queryClient, showToast, t],
); );
// Handle script load failure (timeout or error)
const handleScriptFailed = useCallback(() => {
if (!mountedRef.current || scriptLoaded) return;
setScriptFailed(true);
}, [scriptLoaded]);
// OIDC callback handler (ref pattern to avoid stale closures) // OIDC callback handler (ref pattern to avoid stale closures)
const handleOIDCCallbackRef = const handleOIDCCallbackRef =
useRef<(data: { id_token?: string; error?: string }) => void>(undefined); useRef<(data: { id_token?: string; error?: string }) => void>(undefined);
@@ -95,7 +104,7 @@ function TelegramLinkWidget() {
} }
}; };
// Load OIDC script and init // Load OIDC script and init with timeout
useEffect(() => { useEffect(() => {
if (!isOIDC || !widgetConfig?.oidc_client_id) return; if (!isOIDC || !widgetConfig?.oidc_client_id) return;
@@ -116,24 +125,43 @@ function TelegramLinkWidget() {
} }
}; };
const timeoutId = setTimeout(() => {
if (!scriptLoaded) {
handleScriptFailed();
}
}, LINK_SCRIPT_LOAD_TIMEOUT_MS);
if (!script) { if (!script) {
script = document.createElement('script'); script = document.createElement('script');
script.id = scriptId; script.id = scriptId;
script.src = 'https://oauth.telegram.org/js/telegram-login.js?3'; script.src = 'https://oauth.telegram.org/js/telegram-login.js?3';
script.async = true; script.async = true;
script.onload = () => initTelegramLogin(); script.onload = () => {
clearTimeout(timeoutId);
initTelegramLogin();
};
script.onerror = () => { script.onerror = () => {
if (mountedRef.current) { clearTimeout(timeoutId);
showToast({ type: 'error', message: t('profile.accounts.linkError') }); handleScriptFailed();
}
}; };
document.head.appendChild(script); document.head.appendChild(script);
} else { } else {
clearTimeout(timeoutId);
initTelegramLogin(); initTelegramLogin();
} }
}, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access, showToast, t]);
// Legacy widget effect (only when NOT OIDC) return () => clearTimeout(timeoutId);
}, [
isOIDC,
widgetConfig?.oidc_client_id,
widgetConfig?.request_access,
showToast,
t,
scriptLoaded,
handleScriptFailed,
]);
// Legacy widget effect (only when NOT OIDC) with timeout
useEffect(() => { useEffect(() => {
if (isOIDC || !containerRef.current || !botUsername) return; if (isOIDC || !containerRef.current || !botUsername) return;
@@ -177,20 +205,58 @@ function TelegramLinkWidget() {
script.setAttribute('data-request-access', 'write'); script.setAttribute('data-request-access', 'write');
script.async = true; script.async = true;
const timeoutId = setTimeout(() => {
if (container && !container.querySelector('iframe')) {
handleScriptFailed();
}
}, LINK_SCRIPT_LOAD_TIMEOUT_MS);
script.onerror = () => {
clearTimeout(timeoutId);
handleScriptFailed();
};
container.appendChild(script); container.appendChild(script);
return () => { return () => {
clearTimeout(timeoutId);
delete (window as unknown as Record<string, unknown>)[callbackName]; delete (window as unknown as Record<string, unknown>)[callbackName];
while (container.firstChild) { while (container.firstChild) {
container.removeChild(container.firstChild); container.removeChild(container.firstChild);
} }
}; };
}, [isOIDC, botUsername, navigate, showToast, t, queryClient, handleLinkResult]); }, [
isOIDC,
botUsername,
navigate,
showToast,
t,
queryClient,
handleLinkResult,
handleScriptFailed,
]);
if (!botUsername && !isOIDC) { if (!botUsername && !isOIDC) {
return null; return null;
} }
// Script failed to load - show unavailable message with bot link
if (scriptFailed) {
return (
<div className="flex flex-col items-center gap-1.5">
<p className="text-xs text-dark-400">{t('profile.accounts.telegramLinkUnavailable')}</p>
<a
href={`https://t.me/${botUsername}`}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-accent-400 transition-colors hover:text-accent-300"
>
@{botUsername}
</a>
</div>
);
}
if (isOIDC) { if (isOIDC) {
return ( return (
<Button <Button

View File

@@ -45,6 +45,7 @@ interface AuthState {
state: string, state: string,
deviceId?: string | null, deviceId?: string | null,
) => Promise<void>; ) => Promise<void>;
loginWithDeepLink: (token: string) => Promise<void>;
registerWithEmail: ( registerWithEmail: (
email: string, email: string,
password: string, password: string,
@@ -318,6 +319,19 @@ export const useAuthStore = create<AuthState>()(
await get().checkAdminStatus(); await get().checkAdminStatus();
}, },
loginWithDeepLink: async (token) => {
const response = await authApi.pollDeepLinkToken(token);
tokenStorage.setTokens(response.access_token, response.refresh_token);
set({
accessToken: response.access_token,
refreshToken: response.refresh_token,
user: response.user,
isAuthenticated: true,
pendingCampaignBonus: response.campaign_bonus || null,
});
await get().checkAdminStatus();
},
registerWithEmail: async (email, password, firstName, referralCode) => { registerWithEmail: async (email, password, firstName, referralCode) => {
const code = referralCode || consumeReferralCode() || undefined; const code = referralCode || consumeReferralCode() || undefined;
const response = await authApi.registerEmailStandalone({ const response = await authApi.registerEmailStandalone({