fix: stabilize mini app login and safe area

.gitea/workflows/deploy.yml

@@ -6,7 +6,7 @@ on:
       - main 
 
 env:
-  VERSION: 1.9.0
+  VERSION: 1.9.3
 
 jobs:
   # ЧАСТЬ 1: Собираем образы и кладем в Gitea (чтобы делиться с ребятами)

Directory.Build.props

@@ -1,6 +1,6 @@
 <Project>
   <PropertyGroup>
-    <Version>1.9.0</Version>
+    <Version>1.9.3</Version>
     <TargetFramework>net10.0</TargetFramework>
     <LangVersion>preview</LangVersion>
     <Nullable>enable</Nullable>

README.md

@@ -4,7 +4,7 @@
 
 Проект разработан с упором на производительность, архитектуру Vertical Slice, Native AOT (для бота) и удобство развертывания с использованием .NET Aspire.
 
-**Текущая версия:** `v1.9.0`.
+**Текущая версия:** `v1.9.3`.
 
 ---
 
@@ -24,7 +24,7 @@
 
 ### 🌐 Web Dashboard (Blazor Server)
 - **🔐 Авторизация через Telegram**: Безопасный вход с использованием Telegram Login Widget (HMAC-SHA256 валидация).
-- **📱 Telegram Mini App Dashboard**: Мобильная версия dashboard открывается прямо из Telegram, проверяет WebApp `initData` на сервере и использует те же права owner/co-GM, что и обычный Web Dashboard.
+- **📱 Telegram Mini App Dashboard**: Мобильная версия dashboard открывается прямо из Telegram, проверяет WebApp `initData` на сервере и использует те же права owner/co-GM, что и обычный Web Dashboard. Если Mini App попадает в fallback-вход, Telegram Login Widget авторизует пользователя callback-запросом внутри текущего WebView, а интерфейс учитывает safe-area телефона и верхнюю панель Telegram.
 - **📝 Удобное редактирование**: Веб-интерфейс для детального редактирования сессий, изменения дат, названий и статусов.
 - **🤝 Co-GM и делегирование**: Owner группы назначает помощников по Telegram ID, а co-GM получает доступ к управлению расписанием в Telegram и Web Dashboard.
 - **📋 Шаблоны кампаний**: Owner и co-GM управляют типовыми параметрами кампаний в отдельной вкладке `Шаблоны`, а на странице группы запускают новый повторяющийся batch из выбранного шаблона.
@@ -88,7 +88,7 @@ GMRELAY_WEB_PORT=8080
 
 *(Опционально)* Настройте домен Telegram бота в @BotFather командой `/setdomain` для работы виджета авторизации на вашем сайте.
 
-Для Telegram Mini App настройте в @BotFather домен Web Dashboard и menu button на URL из `TELEGRAM_MINI_APP_URL`. Бот также показывает кнопку `Открыть dashboard` в ответе на `/start`, если переменная задана.
+Для Telegram Mini App настройте в @BotFather домен Web Dashboard и menu button на URL из `TELEGRAM_MINI_APP_URL`. Бот также показывает кнопку `Открыть dashboard` в ответе на `/start`, если переменная задана. Начиная с v1.9.3 дополнительных действий в BotFather для фикса входа не требуется: URL остаётся тем же HTTPS-адресом `/miniapp`, а fallback-вход выполняется внутри активного Telegram WebView.
 
 ### 3. Запуск
 Выполните команду:
@@ -183,6 +183,8 @@ Owner и co-GM могут открыть мобильный dashboard прямо
 
 После входа Mini App использует те же страницы, что и Web Dashboard: список групп, карточки сессий, редактирование игры, повышение игрока из листа ожидания, применение шаблонов и bulk-операции batch. Доступ к чужим группам не появляется: все данные по-прежнему фильтруются через `AuthorizedSessionService` по роли owner/co-GM.
 
+Если `Telegram.WebApp.initData` недоступен или серверная проверка Mini App не прошла, `/miniapp` показывает диагностичное состояние и fallback-кнопку входа. Fallback больше не зависит от внешнего redirect: Telegram Login Widget вызывает callback на странице, отправляет payload на `/auth/telegram-login`, получает cookie в текущем WebView и сразу возвращает пользователя в dashboard.
+
 ### Другие команды
 - `/listsessions` — Показать список всех актуальных игр в этой группе.
 - `⏰ Перенести` в сообщении расписания — Запустить голосование по 2-3 вариантам нового времени.

compose.yaml

@@ -17,7 +17,7 @@ services:
       retries: 10
 
   bot:
-    image: git.codeanddice.ru/toutsu/gmrelay-bot:1.9.0
+    image: git.codeanddice.ru/toutsu/gmrelay-bot:1.9.3
     restart: always
     depends_on:
       db:
@@ -30,7 +30,7 @@ services:
       - gmrelay
 
   web:
-    image: git.codeanddice.ru/toutsu/gmrelay-web:1.9.0
+    image: git.codeanddice.ru/toutsu/gmrelay-web:1.9.3
     restart: always
     depends_on:
       db:

src/GmRelay.Web/Components/App.razor

@@ -24,52 +24,274 @@
     <ReconnectModal />
     <script src="@Assets["_framework/blazor.web.js"]"></script>
     <script>
-        (function () {
+        window.waitForTelegramMiniApp = async function (timeoutMs) {
-            if (window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.initData) {
+            var deadline = Date.now() + (timeoutMs || 3000);
-                var webApp = window.Telegram.WebApp;
+
-                document.body.classList.add('telegram-mini-app');
+            while (Date.now() <= deadline) {
-                webApp.ready();
+                if (window.Telegram && window.Telegram.WebApp) {
+                    return window.Telegram.WebApp;
+                }
+
+                await new Promise(function (resolve) {
+                    setTimeout(resolve, 100);
+                });
             }
+
+            return null;
+        };
+
+        window.waitForTelegramMiniAppInitData = async function (timeoutMs) {
+            var deadline = Date.now() + (timeoutMs || 3000);
+
+            while (Date.now() <= deadline) {
+                if (window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.initData) {
+                    return window.Telegram.WebApp;
+                }
+
+                await new Promise(function (resolve) {
+                    setTimeout(resolve, 100);
+                });
+            }
+
+            return null;
+        };
+
+        window.syncTelegramMiniAppViewport = function (webApp) {
+            if (!webApp) {
+                return;
+            }
+
+            var root = document.documentElement;
+            var safeArea = webApp.safeAreaInset || {};
+            var contentSafeArea = webApp.contentSafeAreaInset || {};
+            var setPx = function (name, value) {
+                root.style.setProperty(name, Math.max(0, Number(value) || 0) + 'px');
+            };
+
+            setPx('--gm-tg-safe-top', safeArea.top);
+            setPx('--gm-tg-safe-right', safeArea.right);
+            setPx('--gm-tg-safe-bottom', safeArea.bottom);
+            setPx('--gm-tg-safe-left', safeArea.left);
+            setPx('--gm-tg-content-safe-top', contentSafeArea.top);
+            setPx('--gm-tg-content-safe-right', contentSafeArea.right);
+            setPx('--gm-tg-content-safe-bottom', contentSafeArea.bottom);
+            setPx('--gm-tg-content-safe-left', contentSafeArea.left);
+
+            if (webApp.viewportHeight) {
+                root.style.setProperty('--gm-tg-viewport-height', webApp.viewportHeight + 'px');
+            }
+        };
+
+        window.prepareTelegramMiniApp = function (webApp) {
+            if (!webApp) {
+                return;
+            }
+
+            document.body.classList.add('telegram-mini-app');
+            window.syncTelegramMiniAppViewport(webApp);
+
+            try {
+                webApp.ready();
+            } catch (error) {
+            }
+
+            try {
+                webApp.expand();
+            } catch (error) {
+            }
+
+            if (webApp.onEvent && !window.gmRelayTelegramMiniAppViewportEventsRegistered) {
+                window.gmRelayTelegramMiniAppViewportEventsRegistered = true;
+                webApp.onEvent('safeAreaChanged', function () {
+                    window.syncTelegramMiniAppViewport(webApp);
+                });
+                webApp.onEvent('contentSafeAreaChanged', function () {
+                    window.syncTelegramMiniAppViewport(webApp);
+                });
+                webApp.onEvent('viewportChanged', function () {
+                    window.syncTelegramMiniAppViewport(webApp);
+                });
+            }
+        };
+
+        (async function () {
+            var webApp = await window.waitForTelegramMiniApp(1000);
+            window.prepareTelegramMiniApp(webApp);
         })();
 
         window.loadTelegramWidget = function (botUsername, authUrl) {
             var container = document.getElementById('telegram-login-container');
             if (!container) return;
             container.innerHTML = '';
+            window.gmRelayTelegramLoginAuthUrl = authUrl || '/auth/telegram-login';
             var script = document.createElement('script');
             script.async = true;
             script.src = 'https://telegram.org/js/telegram-widget.js?22';
             script.setAttribute('data-telegram-login', botUsername);
             script.setAttribute('data-size', 'large');
-            script.setAttribute('data-auth-url', authUrl);
+            script.setAttribute('data-onauth', 'window.handleTelegramLogin(user)');
             script.setAttribute('data-request-access', 'write');
             container.appendChild(script);
         };
 
-        window.authenticateTelegramMiniApp = async function (authUrl, redirectUrl) {
+        window.handleTelegramLogin = async function (user) {
-            if (!window.Telegram || !window.Telegram.WebApp || !window.Telegram.WebApp.initData) {
+            if (!user) {
-                return false;
+                window.location.href = '/login?error=auth_failed';
+                return;
             }
 
-            var webApp = window.Telegram.WebApp;
+            try {
-            document.body.classList.add('telegram-mini-app');
+                var response = await fetch(window.gmRelayTelegramLoginAuthUrl || '/auth/telegram-login', {
-            webApp.ready();
+                    method: 'POST',
-            webApp.expand();
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'same-origin',
+                    cache: 'no-store',
+                    body: JSON.stringify(user)
+                });
 
-            var response = await fetch(authUrl, {
+                if (!response.ok) {
-                method: 'POST',
+                    window.location.href = '/login?error=auth_failed';
-                headers: { 'Content-Type': 'application/json' },
+                    return;
-                credentials: 'same-origin',
+                }
-                body: JSON.stringify({ initData: webApp.initData })
+
+                var payload = await response.json();
+                window.location.href = payload.redirectUrl || '/';
+            } catch (error) {
+                window.location.href = '/login?error=auth_failed';
+            }
+        };
+
+        window.watchTelegramMiniAppLogin = function (statusUrl, redirectUrl, reloadOnReturn) {
+            window.gmRelayMiniAppLoginReloadOnReturn =
+                window.gmRelayMiniAppLoginReloadOnReturn || reloadOnReturn === true;
+
+            if (window.gmRelayMiniAppLoginWatcher) {
+                return;
+            }
+
+            window.gmRelayMiniAppLoginLeftPage = false;
+
+            var stopWatching = function () {
+                if (window.gmRelayMiniAppLoginWatcher) {
+                    window.clearInterval(window.gmRelayMiniAppLoginWatcher);
+                    window.gmRelayMiniAppLoginWatcher = null;
+                }
+            };
+
+            var reloadAfterExternalLogin = function () {
+                if (!window.gmRelayMiniAppLoginReloadOnReturn || !window.gmRelayMiniAppLoginLeftPage) {
+                    return;
+                }
+
+                window.gmRelayMiniAppLoginLeftPage = false;
+
+                try {
+                    var refreshKey = 'gmrelay-miniapp-login-refresh:' + window.location.pathname;
+                    if (window.sessionStorage && window.sessionStorage.getItem(refreshKey) === '1') {
+                        return;
+                    }
+
+                    if (window.sessionStorage) {
+                        window.sessionStorage.setItem(refreshKey, '1');
+                    }
+                } catch (error) {
+                }
+
+                window.location.reload();
+            };
+
+            var allowNextExternalLoginReload = function () {
+                window.gmRelayMiniAppLoginLeftPage = true;
+
+                try {
+                    var refreshKey = 'gmrelay-miniapp-login-refresh:' + window.location.pathname;
+                    if (window.sessionStorage) {
+                        window.sessionStorage.removeItem(refreshKey);
+                    }
+                } catch (error) {
+                }
+            };
+
+            var checkLogin = async function (reloadWhenUnauthenticated) {
+                try {
+                    var response = await fetch(statusUrl, {
+                        credentials: 'same-origin',
+                        cache: 'no-store'
+                    });
+
+                    if (!response.ok) {
+                        return;
+                    }
+
+                    var payload = await response.json();
+                    if (payload.authenticated) {
+                        stopWatching();
+                        window.location.href = redirectUrl || '/';
+                        return;
+                    }
+
+                    if (reloadWhenUnauthenticated) {
+                        reloadAfterExternalLogin();
+                    }
+                } catch (error) {
+                    return;
+                }
+            };
+
+            window.gmRelayMiniAppLoginWatcher = window.setInterval(checkLogin, 1000);
+            window.addEventListener('blur', function () {
+                allowNextExternalLoginReload();
+            });
+            window.addEventListener('focus', function () {
+                void checkLogin(true);
+            });
+            document.addEventListener('visibilitychange', function () {
+                if (document.hidden) {
+                    allowNextExternalLoginReload();
+                    return;
+                }
+
+                void checkLogin(true);
             });
 
-            if (!response.ok) {
+            void checkLogin(false);
-                return false;
+        };
+
+        window.authenticateTelegramMiniApp = async function (authUrl, redirectUrl) {
+            var webApp = await window.waitForTelegramMiniApp(3000);
+            if (!webApp) {
+                return { authenticated: false, reason: 'telegram-webapp-missing' };
             }
 
-            var payload = await response.json();
+            window.prepareTelegramMiniApp(webApp);
-            window.location.href = payload.redirectUrl || redirectUrl || '/';
+
-            return true;
+            if (!webApp.initData) {
+                return { authenticated: false, reason: 'telegram-init-data-empty' };
+            }
+
+            try {
+                var response = await fetch(authUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'same-origin',
+                    cache: 'no-store',
+                    body: JSON.stringify({ initData: webApp.initData })
+                });
+
+                if (!response.ok) {
+                    return {
+                        authenticated: false,
+                        reason: 'telegram-auth-failed',
+                        status: response.status
+                    };
+                }
+
+                var payload = await response.json();
+                window.location.href = payload.redirectUrl || redirectUrl || '/';
+                return { authenticated: true, redirectUrl: payload.redirectUrl || redirectUrl || '/' };
+            } catch (error) {
+                return { authenticated: false, reason: 'telegram-auth-failed' };
+            }
         };
     </script>
 </body>

src/GmRelay.Web/Components/Layout/NavMenu.razor

@@ -56,7 +56,7 @@
                     </button>
                 </form>
 
-                <div class="nav-version">v1.9.0</div>
+                <div class="nav-version">v1.9.3</div>
             </div>
         </Authorized>
         <NotAuthorized>

src/GmRelay.Web/Components/Pages/Login.razor

@@ -25,7 +25,6 @@
 
 @code {
     private string BotUsername => Configuration["Telegram:BotUsername"] ?? "GmRelayBot";
-    private string AuthUrl => Navigation.ToAbsoluteUri("/auth/telegram").ToString();
 
     [CascadingParameter]
     private Task<AuthenticationState>? AuthStateTask { get; set; }
@@ -46,7 +45,8 @@
     {
         if (firstRender)
         {
-            await JS.InvokeVoidAsync("loadTelegramWidget", BotUsername, AuthUrl);
+            await JS.InvokeVoidAsync("loadTelegramWidget", BotUsername, "/auth/telegram-login");
+            await JS.InvokeVoidAsync("watchTelegramMiniAppLogin", "/auth/status", "/", false);
         }
     }
 }

src/GmRelay.Web/Components/Pages/MiniApp.razor

@@ -1,12 +1,13 @@
 @page "/miniapp"
 @using Microsoft.AspNetCore.Components.Authorization
+@using System.Text.Json.Serialization
 @inject IJSRuntime JS
 @inject NavigationManager Navigation
 
 <PageTitle>Mini App Dashboard — GM-Relay</PageTitle>
 
 <div class="mini-app-page">
-    <div class="mini-app-auth-card">
+    <div class="mini-app-auth-card" data-auth-status="@miniAppAuthStatus">
         <div class="mini-app-logo">🎲</div>
         <h1>GM-Relay</h1>
         <p>@statusMessage</p>
@@ -20,6 +21,7 @@
 
 @code {
     private string statusMessage = "Открываем dashboard внутри Telegram...";
+    private string miniAppAuthStatus = "starting";
     private bool showFallback;
 
     [CascadingParameter]
@@ -48,23 +50,54 @@
 
         try
         {
-            var authenticated = await JS.InvokeAsync<bool>(
+            var result = await JS.InvokeAsync<MiniAppAuthResult>(
                 "authenticateTelegramMiniApp",
                 "/auth/telegram-webapp",
                 "/");
 
-            if (!authenticated)
+            if (!result.Authenticated)
             {
-                statusMessage = "Mini App доступен из Telegram. Для браузера используйте обычный вход.";
+                miniAppAuthStatus = string.IsNullOrWhiteSpace(result.Reason)
+                    ? "telegram-auth-failed"
+                    : result.Reason;
+                statusMessage = GetStatusMessage(miniAppAuthStatus);
                 showFallback = true;
                 StateHasChanged();
+                await TryWatchLoginAsync();
             }
         }
         catch (JSException)
         {
+            miniAppAuthStatus = "telegram-auth-failed";
             statusMessage = "Не удалось получить данные Telegram Mini App. Попробуйте открыть dashboard из бота.";
             showFallback = true;
             StateHasChanged();
+            await TryWatchLoginAsync();
         }
     }
+
+    private async Task TryWatchLoginAsync()
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("watchTelegramMiniAppLogin", "/auth/status", "/");
+        }
+        catch (JSException)
+        {
+        }
+    }
+
+    private static string GetStatusMessage(string reason) => reason switch
+    {
+        "telegram-webapp-missing" => "Mini App API не найден. Если страница открыта в браузере, войдите через Telegram.",
+        "telegram-init-data-empty" => "Telegram открыл страницу без Mini App initData. Попробуйте войти через Telegram на этом экране.",
+        "telegram-auth-failed" => "Не удалось проверить Telegram Mini App. Попробуйте войти через Telegram.",
+        _ => "Mini App доступен из Telegram. Для браузера используйте обычный вход."
+    };
+
+    private sealed record MiniAppAuthResult(
+        [property: JsonPropertyName("authenticated")] bool Authenticated,
+        [property: JsonPropertyName("reason")] string? Reason,
+        [property: JsonPropertyName("status")] int? Status,
+        [property: JsonPropertyName("redirectUrl")] string? RedirectUrl);
 }

src/GmRelay.Web/Program.cs

@@ -117,6 +117,28 @@ app.MapPost("/auth/telegram-webapp", async (
     return Results.Ok(new { redirectUrl = "/" });
 }).DisableAntiforgery();
 
+app.MapPost("/auth/telegram-login", async (
+    HttpContext context,
+    TelegramAuthService authService,
+    TelegramLoginPayload request) =>
+{
+    if (!authService.VerifyLoginPayload(request, out var telegramId, out var name))
+    {
+        return Results.Unauthorized();
+    }
+
+    var authProperties = new AuthenticationProperties { IsPersistent = true };
+    await context.SignInAsync(
+        CookieAuthenticationDefaults.AuthenticationScheme,
+        CreateTelegramPrincipal(telegramId, name),
+        authProperties);
+
+    return Results.Ok(new { redirectUrl = "/" });
+}).DisableAntiforgery();
+
+app.MapGet("/auth/status", (HttpContext context) =>
+    Results.Ok(new { authenticated = context.User.Identity?.IsAuthenticated == true }));
+
 app.MapPost("/auth/logout", async (HttpContext context) =>
 {
     await context.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);

src/GmRelay.Web/Services/TelegramAuthService.cs

@@ -1,6 +1,7 @@
 using System.Security.Cryptography;
 using System.Text;
 using System.Text.Json;
+using System.Text.Json.Serialization;
 using Microsoft.AspNetCore.WebUtilities;
 
 namespace GmRelay.Web.Services;
@@ -113,6 +114,69 @@ public sealed class TelegramAuthService(IConfiguration configuration)
         return TryReadWebAppUser(userJson.ToString(), out telegramId, out name);
     }
 
+    public bool VerifyLoginPayload(TelegramLoginPayload payload, out long telegramId, out string name)
+    {
+        telegramId = 0;
+        name = string.Empty;
+
+        if (payload.Id <= 0 ||
+            string.IsNullOrWhiteSpace(payload.FirstName) ||
+            payload.AuthDate <= 0 ||
+            string.IsNullOrWhiteSpace(payload.Hash))
+        {
+            return false;
+        }
+
+        var token = configuration["Telegram__BotToken"] ?? configuration["Telegram:BotToken"];
+        if (string.IsNullOrEmpty(token))
+            return false;
+
+        var values = new SortedDictionary<string, string>(StringComparer.Ordinal)
+        {
+            ["auth_date"] = payload.AuthDate.ToString(System.Globalization.CultureInfo.InvariantCulture),
+            ["first_name"] = payload.FirstName,
+            ["id"] = payload.Id.ToString(System.Globalization.CultureInfo.InvariantCulture)
+        };
+
+        if (!string.IsNullOrWhiteSpace(payload.LastName))
+            values["last_name"] = payload.LastName;
+        if (!string.IsNullOrWhiteSpace(payload.PhotoUrl))
+            values["photo_url"] = payload.PhotoUrl;
+        if (!string.IsNullOrWhiteSpace(payload.Username))
+            values["username"] = payload.Username;
+
+        var dataCheckString = string.Join("\n", values.Select(pair => $"{pair.Key}={pair.Value}"));
+        var secretKey = SHA256.HashData(Encoding.UTF8.GetBytes(token));
+        var computedHashBytes = HMACSHA256.HashData(secretKey, Encoding.UTF8.GetBytes(dataCheckString));
+
+        byte[] hashBytes;
+        try
+        {
+            hashBytes = Convert.FromHexString(payload.Hash);
+        }
+        catch (FormatException)
+        {
+            return false;
+        }
+        catch (ArgumentException)
+        {
+            return false;
+        }
+
+        if (!CryptographicOperations.FixedTimeEquals(computedHashBytes, hashBytes))
+            return false;
+
+        var now = DateTimeOffset.UtcNow.ToUnixTimeSeconds();
+        if (now - payload.AuthDate > 86400)
+            return false;
+
+        telegramId = payload.Id;
+        name = string.IsNullOrWhiteSpace(payload.LastName)
+            ? payload.FirstName
+            : $"{payload.FirstName} {payload.LastName}";
+        return true;
+    }
+
     private static bool TryReadWebAppUser(string userJson, out long telegramId, out string name)
     {
         telegramId = 0;
@@ -152,3 +216,12 @@ public sealed class TelegramAuthService(IConfiguration configuration)
         }
     }
 }
+
+public sealed record TelegramLoginPayload(
+    [property: JsonPropertyName("id")] long Id,
+    [property: JsonPropertyName("first_name")] string FirstName,
+    [property: JsonPropertyName("last_name")] string? LastName,
+    [property: JsonPropertyName("username")] string? Username,
+    [property: JsonPropertyName("photo_url")] string? PhotoUrl,
+    [property: JsonPropertyName("auth_date")] long AuthDate,
+    [property: JsonPropertyName("hash")] string Hash);

src/GmRelay.Web/wwwroot/app.css

@@ -1,5 +1,5 @@
 /* ============================================
-   GM-Relay Design System v1.9.0
+   GM-Relay Design System v1.9.3
    Dark RPG Dashboard Theme
    ============================================ */
 
@@ -69,6 +69,21 @@
 
     /* Sidebar */
     --sidebar-width: 260px;
+
+    /* Telegram Mini App safe areas */
+    --gm-tg-safe-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
+    --gm-tg-safe-right: var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px));
+    --gm-tg-safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+    --gm-tg-safe-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px));
+    --gm-tg-content-safe-top: var(--tg-content-safe-area-inset-top, 0px);
+    --gm-tg-content-safe-right: var(--tg-content-safe-area-inset-right, 0px);
+    --gm-tg-content-safe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
+    --gm-tg-content-safe-left: var(--tg-content-safe-area-inset-left, 0px);
+    --gm-mini-app-top-inset: calc(var(--gm-tg-safe-top, 0px) + var(--gm-tg-content-safe-top, 0px));
+    --gm-mini-app-bottom-inset: calc(var(--gm-tg-safe-bottom, 0px) + var(--gm-tg-content-safe-bottom, 0px));
+    --gm-mini-app-left-inset: calc(var(--gm-tg-safe-left, 0px) + var(--gm-tg-content-safe-left, 0px));
+    --gm-mini-app-right-inset: calc(var(--gm-tg-safe-right, 0px) + var(--gm-tg-content-safe-right, 0px));
+    --gm-tg-viewport-height: 100dvh;
 }
 
 /* === Reset & Base === */
@@ -845,6 +860,7 @@ select option {
 /* === Telegram Mini App entry === */
 .mini-app-page {
     min-height: 100vh;
+    min-height: var(--gm-tg-viewport-height, 100dvh);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -882,6 +898,21 @@ select option {
     max-width: 720px;
 }
 
+body.telegram-mini-app {
+    min-height: var(--gm-tg-viewport-height, 100dvh);
+}
+
+body.telegram-mini-app .mini-app-page {
+    padding-top: calc(1rem + var(--gm-mini-app-top-inset, 0px));
+    padding-right: calc(1rem + var(--gm-mini-app-right-inset, 0px));
+    padding-bottom: calc(1rem + var(--gm-mini-app-bottom-inset, 0px));
+    padding-left: calc(1rem + var(--gm-mini-app-left-inset, 0px));
+}
+
+body.telegram-mini-app .content {
+    padding-bottom: calc(1.5rem + var(--gm-mini-app-bottom-inset, 0px));
+}
+
 /* === Mobile Sessions Cards (instead of table) === */
 .session-card-mobile {
     display: none;
@@ -970,12 +1001,24 @@ select option {
 
     .telegram-mini-app .content {
         padding: 0.75rem;
+        padding-bottom: calc(0.75rem + var(--gm-mini-app-bottom-inset, 0px));
     }
 
     .telegram-mini-app .page-container {
         padding: 0.75rem;
     }
 
+    body.telegram-mini-app .nav-header {
+        padding-top: calc(1.25rem + var(--gm-mini-app-top-inset, 0px));
+        padding-left: calc(1rem + var(--gm-mini-app-left-inset, 0px));
+        padding-right: calc(0.75rem + var(--gm-mini-app-right-inset, 0px));
+    }
+
+    body.telegram-mini-app .nav-toggle {
+        top: calc(0.75rem + var(--gm-mini-app-top-inset, 0px));
+        left: calc(0.75rem + var(--gm-mini-app-left-inset, 0px));
+    }
+
     h2 {
         font-size: 1.25rem;
     }

tests/GmRelay.Bot.Tests/Web/MiniAppDashboardTests.cs

@@ -10,6 +10,12 @@ public sealed class MiniAppDashboardTests
         Assert.Contains("@page \"/miniapp\"", miniAppPage, StringComparison.Ordinal);
         Assert.Contains("authenticateTelegramMiniApp", miniAppPage, StringComparison.Ordinal);
         Assert.Contains("/auth/telegram-webapp", miniAppPage, StringComparison.Ordinal);
+        Assert.Contains("watchTelegramMiniAppLogin", miniAppPage, StringComparison.Ordinal);
+        Assert.Contains("/auth/status", miniAppPage, StringComparison.Ordinal);
+        Assert.Contains("miniAppAuthStatus", miniAppPage, StringComparison.Ordinal);
+        Assert.Contains("telegram-webapp-missing", miniAppPage, StringComparison.Ordinal);
+        Assert.Contains("telegram-init-data-empty", miniAppPage, StringComparison.Ordinal);
+        Assert.Contains("telegram-auth-failed", miniAppPage, StringComparison.Ordinal);
     }
 
     [Fact]
@@ -20,6 +26,20 @@ public sealed class MiniAppDashboardTests
         Assert.Contains("telegram-web-app.js", appShell, StringComparison.Ordinal);
         Assert.Contains("window.authenticateTelegramMiniApp", appShell, StringComparison.Ordinal);
         Assert.Contains("Telegram.WebApp.initData", appShell, StringComparison.Ordinal);
+        Assert.Contains("window.waitForTelegramMiniAppInitData", appShell, StringComparison.Ordinal);
+        Assert.Contains("window.watchTelegramMiniAppLogin", appShell, StringComparison.Ordinal);
+        Assert.Contains("window.handleTelegramLogin", appShell, StringComparison.Ordinal);
+        Assert.Contains("/auth/telegram-login", appShell, StringComparison.Ordinal);
+        Assert.Contains("data-onauth", appShell, StringComparison.Ordinal);
+        Assert.DoesNotContain("data-auth-url", appShell, StringComparison.Ordinal);
+        Assert.Contains("setTimeout(resolve, 100)", appShell, StringComparison.Ordinal);
+        Assert.Contains("reloadOnReturn", appShell, StringComparison.Ordinal);
+        Assert.Contains("gmRelayMiniAppLoginLeftPage", appShell, StringComparison.Ordinal);
+        Assert.Contains("window.location.reload()", appShell, StringComparison.Ordinal);
+        Assert.Contains("syncTelegramMiniAppViewport", appShell, StringComparison.Ordinal);
+        Assert.Contains("safeAreaChanged", appShell, StringComparison.Ordinal);
+        Assert.Contains("contentSafeAreaChanged", appShell, StringComparison.Ordinal);
+        Assert.Contains("viewportChanged", appShell, StringComparison.Ordinal);
     }
 
     [Fact]
@@ -28,7 +48,11 @@ public sealed class MiniAppDashboardTests
         var program = await File.ReadAllTextAsync(FindRepositoryFile("src/GmRelay.Web/Program.cs"));
 
         Assert.Contains("MapPost(\"/auth/telegram-webapp\"", program, StringComparison.Ordinal);
+        Assert.Contains("MapPost(\"/auth/telegram-login\"", program, StringComparison.Ordinal);
         Assert.Contains("VerifyWebAppInitData", program, StringComparison.Ordinal);
+        Assert.Contains("VerifyLoginPayload", program, StringComparison.Ordinal);
+        Assert.Contains("MapGet(\"/auth/status\"", program, StringComparison.Ordinal);
+        Assert.Contains("authenticated", program, StringComparison.Ordinal);
     }
 
     [Fact]
@@ -39,6 +63,26 @@ public sealed class MiniAppDashboardTests
         Assert.Contains("mini-app-page", css, StringComparison.Ordinal);
         Assert.Contains("mini-app-auth-card", css, StringComparison.Ordinal);
         Assert.Contains("@media (max-width: 768px)", css, StringComparison.Ordinal);
+        Assert.Contains("--tg-safe-area-inset-top", css, StringComparison.Ordinal);
+        Assert.Contains("--tg-content-safe-area-inset-top", css, StringComparison.Ordinal);
+        Assert.Contains(".telegram-mini-app .nav-header", css, StringComparison.Ordinal);
+        Assert.Contains(".telegram-mini-app .nav-toggle", css, StringComparison.Ordinal);
+        Assert.Contains(".telegram-mini-app .mini-app-page", css, StringComparison.Ordinal);
+    }
+
+    [Fact]
+    public async Task LoginPage_ShouldAuthenticateMiniAppFallbackInsideCurrentWebView()
+    {
+        var loginPage = await File.ReadAllTextAsync(FindRepositoryFile("src/GmRelay.Web/Components/Pages/Login.razor"));
+
+        Assert.Contains(
+            "JS.InvokeVoidAsync(\"loadTelegramWidget\", BotUsername, \"/auth/telegram-login\")",
+            loginPage,
+            StringComparison.Ordinal);
+        Assert.Contains(
+            "JS.InvokeVoidAsync(\"watchTelegramMiniAppLogin\", \"/auth/status\", \"/\", false)",
+            loginPage,
+            StringComparison.Ordinal);
     }
 
     private static string FindRepositoryFile(string relativePath)

tests/GmRelay.Bot.Tests/Web/TelegramAuthServiceTests.cs

@@ -1,5 +1,6 @@
 using System.Security.Cryptography;
 using System.Text;
+using System.Text.Json;
 using GmRelay.Web.Services;
 using Microsoft.AspNetCore.Http;
 using Microsoft.Extensions.Configuration;
@@ -135,6 +136,125 @@ public sealed class TelegramAuthServiceTests
         Assert.False(verified);
     }
 
+    [Fact]
+    public void VerifyLoginPayload_ShouldAcceptValidTelegramWidgetCallbackPayload()
+    {
+        const string botToken = "test-bot-token";
+        var authDate = DateTimeOffset.UtcNow.ToUnixTimeSeconds();
+        var values = new Dictionary<string, string>
+        {
+            ["auth_date"] = authDate.ToString(),
+            ["first_name"] = "Ada",
+            ["id"] = "424242",
+            ["last_name"] = "Lovelace",
+            ["photo_url"] = "https://t.me/i/userpic/320/ada.jpg",
+            ["username"] = "ada"
+        };
+        var payload = new TelegramLoginPayload(
+            424242,
+            "Ada",
+            "Lovelace",
+            "ada",
+            "https://t.me/i/userpic/320/ada.jpg",
+            authDate,
+            ComputeTelegramHash(botToken, values));
+        var service = new TelegramAuthService(CreateConfiguration(botToken));
+
+        var verified = service.VerifyLoginPayload(payload, out var telegramId, out var name);
+
+        Assert.True(verified);
+        Assert.Equal(424242L, telegramId);
+        Assert.Equal("Ada Lovelace", name);
+    }
+
+    [Fact]
+    public void VerifyLoginPayload_ShouldRejectTamperedCallbackHash()
+    {
+        var payload = new TelegramLoginPayload(
+            424242,
+            "Ada",
+            null,
+            null,
+            null,
+            DateTimeOffset.UtcNow.ToUnixTimeSeconds(),
+            "00");
+        var service = new TelegramAuthService(CreateConfiguration("test-bot-token"));
+
+        var verified = service.VerifyLoginPayload(payload, out _, out _);
+
+        Assert.False(verified);
+    }
+
+    [Fact]
+    public void VerifyLoginPayload_ShouldRejectExpiredCallbackPayload()
+    {
+        const string botToken = "test-bot-token";
+        var authDate = DateTimeOffset.UtcNow.AddDays(-2).ToUnixTimeSeconds();
+        var values = new Dictionary<string, string>
+        {
+            ["auth_date"] = authDate.ToString(),
+            ["first_name"] = "Ada",
+            ["id"] = "424242"
+        };
+        var payload = new TelegramLoginPayload(
+            424242,
+            "Ada",
+            null,
+            null,
+            null,
+            authDate,
+            ComputeTelegramHash(botToken, values));
+        var service = new TelegramAuthService(CreateConfiguration(botToken));
+
+        var verified = service.VerifyLoginPayload(payload, out _, out _);
+
+        Assert.False(verified);
+    }
+
+    [Fact]
+    public void VerifyLoginPayload_ShouldRejectMissingRequiredCallbackFields()
+    {
+        var payload = new TelegramLoginPayload(
+            0,
+            "",
+            null,
+            null,
+            null,
+            DateTimeOffset.UtcNow.ToUnixTimeSeconds(),
+            "");
+        var service = new TelegramAuthService(CreateConfiguration("test-bot-token"));
+
+        var verified = service.VerifyLoginPayload(payload, out _, out _);
+
+        Assert.False(verified);
+    }
+
+    [Fact]
+    public void TelegramLoginPayload_ShouldDeserializeTelegramWidgetSnakeCaseJson()
+    {
+        var payload = JsonSerializer.Deserialize<TelegramLoginPayload>(
+            """
+            {
+              "id": 424242,
+              "first_name": "Ada",
+              "last_name": "Lovelace",
+              "username": "ada",
+              "photo_url": "https://t.me/i/userpic/320/ada.jpg",
+              "auth_date": 1714300000,
+              "hash": "abcdef"
+            }
+            """);
+
+        Assert.NotNull(payload);
+        Assert.Equal(424242L, payload.Id);
+        Assert.Equal("Ada", payload.FirstName);
+        Assert.Equal("Lovelace", payload.LastName);
+        Assert.Equal("ada", payload.Username);
+        Assert.Equal("https://t.me/i/userpic/320/ada.jpg", payload.PhotoUrl);
+        Assert.Equal(1714300000L, payload.AuthDate);
+        Assert.Equal("abcdef", payload.Hash);
+    }
+
     private static IConfiguration CreateConfiguration(string botToken) =>
         new ConfigurationBuilder()
             .AddInMemoryCollection(new Dictionary<string, string?>

tests/GmRelay.Bot.Tests/Web/WebStylesTests.cs

@@ -12,6 +12,19 @@ public sealed class WebStylesTests
             css);
     }
 
+    [Fact]
+    public async Task AppCss_ShouldReserveTelegramMiniAppSafeAreaForMobileChrome()
+    {
+        var appCss = await File.ReadAllTextAsync(FindRepositoryFile("src/GmRelay.Web/wwwroot/app.css"));
+        Assert.Contains("--gm-tg-safe-top", appCss, StringComparison.Ordinal);
+        Assert.Contains("--tg-safe-area-inset-top", appCss, StringComparison.Ordinal);
+        Assert.Contains("--tg-content-safe-area-inset-top", appCss, StringComparison.Ordinal);
+        Assert.Contains("env(safe-area-inset-top", appCss, StringComparison.Ordinal);
+        Assert.Contains(".telegram-mini-app .content", appCss, StringComparison.Ordinal);
+        Assert.Contains(".telegram-mini-app .nav-header", appCss, StringComparison.Ordinal);
+        Assert.Contains(".telegram-mini-app .nav-toggle", appCss, StringComparison.Ordinal);
+    }
+
     private static string FindRepositoryFile(string relativePath)
     {
         var directory = new DirectoryInfo(AppContext.BaseDirectory);