api auth

2026-06-01 00:47:26 +04:00
parent 49f69f6af0
commit 4d8dc6b59c
22 changed files with 1266 additions and 353 deletions
--- a/docs/TELEGRAM_USERAUTH_BACKEND.md
+++ b/docs/TELEGRAM_USERAUTH_BACKEND.md
@@ -0,0 +1,327 @@
+# Telegram UserAuth Backend Contract
+
+This document extracts the existing Telegram login flow into a repo-neutral contract for reuse in other projects.
+
+The UI behavior, payloads, polling cadence, and session model stay the same. Only route names and cookie naming are generalized.
+
+## Endpoint Renaming
+
+| Current app contract | Reusable contract |
+|---|---|
+| `GET /auth/session` | `GET /userauth/session` |
+| `POST /auth/qr/create` | `POST /userauth/qr/create` |
+| `GET /auth/qr/poll?token=...` | `GET /userauth/qr/poll?token=...` |
+| `POST /auth/qr/confirm` | `POST /userauth/qr/confirm` |
+| `GET /auth/telegram/callback` | `GET /userauth/telegram/callback` |
+| `POST /auth/logout` | `POST /userauth/logout` |
+| `POST /websession/{sessionId}` | `POST /usersession/{sessionId}` |
+| Cookie `dx_session` | Cookie `userauth_session` |
+
+## Flow Summary
+
+There are two supported flows.
+
+### 1. Direct login from button
+
+1. Frontend opens `https://t.me/{botUsername}?start=auth_{callbackUrl}`.
+2. Telegram bot creates a session and sends the user a login button.
+3. The button points to `GET /userauth/telegram/callback?token={sessionId}`.
+4. Backend sets `userauth_session` cookie and redirects back to the storefront.
+5. Frontend calls `GET /userauth/session` and becomes authenticated.
+
+### 2. QR login from desktop
+
+1. Frontend opens dialog.
+2. Frontend calls `POST /userauth/qr/create`.
+3. Backend returns `{ token, url }` where `url` is a Telegram deep link.
+4. Frontend renders a QR from that URL.
+5. User scans QR and bot calls `POST /userauth/qr/confirm`.
+6. Frontend polls `GET /userauth/qr/poll?token=...` every 3 seconds.
+7. When status becomes `confirmed`, backend returns session payload and sets the cookie.
+8. Frontend syncs local cart using `POST /usersession/{sessionId}`.
+
+## Session Shape
+
+The frontend expects this exact response shape for the authenticated session.
+
+```json
+{
+  "sessionId": "550e8400-e29b-41d4-a716-446655440000",
+  "telegramUserId": 123456789,
+  "username": "ivan_petrov",
+  "displayName": "Ivan Petrov",
+  "active": true,
+  "expiresAt": "2026-05-21T14:30:00Z"
+}
+```
+
+| Field | Type | Required | Notes |
+|---|---|---|---|
+| `sessionId` | string | yes | Session identifier used in cart sync |
+| `telegramUserId` | number | yes | Telegram user ID |
+| `username` | string or null | no | Telegram username |
+| `displayName` | string | yes | User-facing full name |
+| `active` | boolean | yes | `false` means expired session |
+| `expiresAt` | ISO 8601 string | yes | Used by frontend refresh scheduling |
+
+Recommended TTL:
+
+- Session TTL: 24 hours
+- QR token TTL: 5 minutes
+
+## HTTP Contract
+
+### `POST /userauth/qr/create`
+
+Creates a one-time QR login token when the dialog opens.
+
+Request body:
+
+```json
+{}
+```
+
+Response `200`:
+
+```json
+{
+  "token": "dG9rZW4tYWJjMTIz",
+  "url": "https://t.me/userauth_bot?start=login_dG9rZW4tYWJjMTIz"
+}
+```
+
+Requirements:
+
+- Generate a cryptographically secure token.
+- Save token with status `pending`.
+- Return a Telegram deep link in `url`.
+- Rate limit to 5 requests per minute per IP.
+
+### `GET /userauth/qr/poll?token={token}`
+
+Called every 3 seconds until confirmation or expiration.
+
+Possible responses:
+
+Pending:
+
+```json
+{ "status": "pending" }
+```
+
+Confirmed:
+
+```json
+{
+  "status": "confirmed",
+  "session": {
+    "sessionId": "550e8400-e29b-41d4-a716-446655440000",
+    "telegramUserId": 123456789,
+    "username": "ivan_petrov",
+    "displayName": "Ivan Petrov",
+    "active": true,
+    "expiresAt": "2026-05-21T14:30:00Z"
+  }
+}
+```
+
+Expired:
+
+```json
+{ "status": "expired" }
+```
+
+Behavior:
+
+- If confirmed, set cookie `userauth_session` in the response.
+- Delete or invalidate the QR token after the first successful confirmed poll.
+- If token is unknown or expired, return `status: "expired"`.
+
+### `POST /userauth/qr/confirm`
+
+Internal endpoint called by the Telegram bot after the user scans the QR code.
+
+Required header:
+
+```text
+X-Bot-Secret: <shared secret between bot and backend>
+```
+
+Request body:
+
+```json
+{
+  "token": "dG9rZW4tYWJjMTIz",
+  "telegram_user": {
+    "id": 123456789,
+    "first_name": "Ivan",
+    "last_name": "Petrov",
+    "username": "ivan_petrov"
+  }
+}
+```
+
+Response `200`:
+
+```json
+{ "status": "ok" }
+```
+
+Behavior:
+
+- Validate `X-Bot-Secret`.
+- Validate token exists and is still `pending`.
+- Create a user session.
+- Store session ID on the QR token.
+- Mark QR token as `confirmed`.
+
+### `GET /userauth/session`
+
+Returns the currently active session based on the cookie.
+
+Frontend behavior depends on this endpoint in two places:
+
+- initial auth check on app startup
+- fallback polling if QR token creation fails
+
+Response `200`:
+
+```json
+{
+  "sessionId": "550e8400-e29b-41d4-a716-446655440000",
+  "telegramUserId": 123456789,
+  "username": "ivan_petrov",
+  "displayName": "Ivan Petrov",
+  "active": true,
+  "expiresAt": "2026-05-21T14:30:00Z"
+}
+```
+
+Error handling:
+
+- Any non-200 response is treated by the frontend as unauthenticated.
+
+### `GET /userauth/telegram/callback?token={sessionId}`
+
+Used for direct Telegram login from the primary button flow.
+
+Behavior:
+
+- Read the `token` query param.
+- Resolve it to a valid active session.
+- Set cookie `userauth_session`.
+- Redirect user to the storefront URL.
+
+### `POST /userauth/logout`
+
+Clears the backend session and expires the cookie.
+
+Request body:
+
+```json
+{}
+```
+
+Response `200`:
+
+```json
+{ "message": "ok" }
+```
+
+### `POST /usersession/{sessionId}`
+
+Synchronizes local cart immediately after successful login.
+
+Request body:
+
+```json
+[
+  {
+    "itemID": 123,
+    "quantity": 2,
+    "colour": "#ff0000",
+    "size": "XL",
+    "price": 1500
+  }
+]
+```
+
+Notes:
+
+- This payload is unchanged from the existing implementation.
+- `price` is already discounted on the frontend side.
+- The frontend skips the call if cart is empty.
+
+## Telegram Deep Link Format
+
+Direct login link format:
+
+```text
+https://t.me/{botUsername}?start=auth_{urlEncodedCallbackUrl}
+```
+
+QR login link format:
+
+```text
+https://t.me/{botUsername}?start=login_{qrToken}
+```
+
+Important limit:
+
+- Telegram limits the `start` payload to 64 characters.
+- A base64url encoding of 32 random bytes plus `login_` fits safely.
+
+## Cookie Requirements
+
+Use these cookie settings for the frontend to work correctly across site and API origins.
+
+| Property | Value |
+|---|---|
+| Name | `userauth_session` |
+| Path | `/` |
+| HttpOnly | `true` |
+| Secure | `true` |
+| SameSite | `None` |
+| MaxAge | `86400` |
+| Domain | your shared parent domain, for example `.example.com` |
+
+## CORS Requirements
+
+Because the frontend sends credentials, backend must return an explicit origin.
+
+Required headers:
+
+```text
+Access-Control-Allow-Origin: https://your-frontend.example
+Access-Control-Allow-Credentials: true
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type
+```
+
+Do not use `*` for `Access-Control-Allow-Origin` together with credentials.
+
+## Frontend Runtime Expectations
+
+The current dialog behavior is fixed and should be preserved by backend responses.
+
+- QR polling interval: every 3 seconds
+- QR expiration on frontend: after 100 checks
+- If QR creation fails, frontend falls back to direct login URL and session polling
+- After login, frontend closes the dialog and re-checks session
+
+## Minimal Backend Checklist
+
+- Implement all six `userauth` endpoints and the `usersession` sync endpoint.
+- Store sessions for 24 hours.
+- Store QR tokens for 5 minutes.
+- Protect `POST /userauth/qr/confirm` with `X-Bot-Secret`.
+- Set `userauth_session` cookie on confirmed QR poll and direct callback.
+- Return the exact session JSON shape.
+- Support credentialed CORS.
+
+## Bot Checklist
+
+- Handle `/start login_{token}` and call `POST /userauth/qr/confirm`.
+- Handle `/start auth_{callbackUrl}` and provide a button that opens the callback URL.
+- Send success and expiration messages back to the user.
+- Share the same `X-Bot-Secret` value with backend.
--- a/docs/telegram-login-dialog.html
+++ b/docs/telegram-login-dialog.html
@@ -0,0 +1,551 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Telegram Login Dialog</title>
+  <style>
+    :root {
+      --bg-page: linear-gradient(135deg, #f4f7fb 0%, #e8eef4 100%);
+      --bg-card: #ffffff;
+      --bg-hover: #f0f0f0;
+      --text-primary: #1a1a1a;
+      --text-secondary: #666666;
+      --accent-color: #497671;
+      --accent-light: rgba(73, 118, 113, 0.1);
+      --telegram: #2aabee;
+      --telegram-hover: #229ed9;
+      --border: #e8e8e8;
+      --shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      color: var(--text-primary);
+      background: var(--bg-page);
+    }
+
+    .page {
+      min-height: 100vh;
+      display: grid;
+      grid-template-columns: minmax(320px, 448px) minmax(320px, 560px);
+      gap: 32px;
+      padding: 40px 32px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .panel {
+      background: rgba(255, 255, 255, 0.72);
+      border: 1px solid rgba(255, 255, 255, 0.8);
+      border-radius: 28px;
+      padding: 24px;
+      box-shadow: 0 18px 50px rgba(38, 52, 73, 0.12);
+      backdrop-filter: blur(14px);
+    }
+
+    .info h1 {
+      margin: 0 0 12px;
+      font-size: 32px;
+      line-height: 1.1;
+    }
+
+    .info p {
+      margin: 0 0 18px;
+      color: var(--text-secondary);
+      line-height: 1.6;
+    }
+
+    .state-switcher {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin: 20px 0 24px;
+    }
+
+    .state-switcher button {
+      border: 1px solid #cfd8e3;
+      border-radius: 999px;
+      background: #fff;
+      color: var(--text-primary);
+      padding: 10px 14px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: 0.2s ease;
+    }
+
+    .state-switcher button.active {
+      border-color: var(--accent-color);
+      background: var(--accent-light);
+      color: var(--accent-color);
+    }
+
+    .api-grid {
+      display: grid;
+      gap: 12px;
+      margin-top: 20px;
+    }
+
+    .api-card {
+      background: #fff;
+      border: 1px solid #eef2f7;
+      border-radius: 16px;
+      padding: 14px 16px;
+    }
+
+    .api-card strong {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 14px;
+    }
+
+    .api-card code {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: #f3f7fb;
+      color: #21425f;
+      font-size: 13px;
+    }
+
+    .api-card p {
+      margin: 8px 0 0;
+      font-size: 13px;
+    }
+
+    .login-overlay {
+      position: relative;
+      min-height: 700px;
+      border-radius: 28px;
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: fadeIn 0.2s ease;
+      padding: 16px;
+    }
+
+    .login-dialog {
+      position: relative;
+      background: var(--bg-card);
+      border-radius: 20px;
+      padding: 32px 28px;
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+      box-shadow: var(--shadow);
+      animation: scaleIn 0.25s ease;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 50%;
+      background: var(--bg-hover);
+      color: var(--text-secondary);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+    }
+
+    .close-btn:hover {
+      background: #e0e0e0;
+      color: #333;
+    }
+
+    .login-icon {
+      margin: 0 auto 16px;
+      width: 72px;
+      height: 72px;
+      border-radius: 50%;
+      background: var(--accent-light);
+      color: var(--accent-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .login-dialog h2 {
+      margin: 0 0 8px;
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+
+    .login-desc {
+      margin: 0 0 24px;
+      font-size: 14px;
+      color: var(--text-secondary);
+      line-height: 1.5;
+    }
+
+    .telegram-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      padding: 14px 24px;
+      border: none;
+      border-radius: 12px;
+      background: var(--telegram);
+      color: #fff;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .telegram-btn:hover {
+      background: var(--telegram-hover);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
+    }
+
+    .telegram-btn:active {
+      transform: translateY(0);
+    }
+
+    .tg-icon {
+      flex-shrink: 0;
+    }
+
+    .qr-section {
+      margin-top: 20px;
+    }
+
+    .qr-hint {
+      margin: 0 0 12px;
+      font-size: 13px;
+      color: #999;
+    }
+
+    .qr-container {
+      display: inline-flex;
+      padding: 12px;
+      background: #fff;
+      border-radius: 12px;
+      border: 1px solid var(--border);
+    }
+
+    .qr-container img {
+      display: block;
+      border-radius: 4px;
+    }
+
+    .qr-loading {
+      align-items: center;
+      justify-content: center;
+      width: 204px;
+      height: 204px;
+    }
+
+    .qr-loading .spinner,
+    .login-status .spinner {
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    .qr-loading .spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid #e0e0e0;
+      border-top-color: var(--accent-color);
+    }
+
+    .qr-expired {
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 204px;
+      height: 204px;
+      cursor: pointer;
+      color: #999;
+      transition: color 0.2s ease;
+    }
+
+    .qr-expired:hover {
+      color: var(--accent-color);
+    }
+
+    .qr-expired span {
+      font-size: 13px;
+    }
+
+    .login-note {
+      margin: 16px 0 0;
+      font-size: 12px;
+      color: #999;
+      line-height: 1.4;
+    }
+
+    .login-status {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 16px;
+      color: var(--text-secondary);
+      font-size: 14px;
+    }
+
+    .login-status .spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid #e0e0e0;
+      border-top-color: var(--accent-color);
+    }
+
+    .dialog-content[data-state="checking"] .login-status {
+      display: flex;
+    }
+
+    .dialog-content[data-state="checking"] .action-block,
+    .dialog-content[data-state="loading"] .qr-ready,
+    .dialog-content[data-state="loading"] .qr-expired,
+    .dialog-content[data-state="expired"] .qr-ready,
+    .dialog-content[data-state="expired"] .qr-loading,
+    .dialog-content[data-state="error"] .qr-loading,
+    .dialog-content[data-state="error"] .qr-expired,
+    .dialog-content[data-state="checking"] .qr-section,
+    .dialog-content[data-state="checking"] .login-note {
+      display: none;
+    }
+
+    .dialog-content[data-state="ready"] .qr-loading,
+    .dialog-content[data-state="ready"] .qr-expired,
+    .dialog-content[data-state="ready"] .qr-error,
+    .dialog-content[data-state="loading"] .qr-ready,
+    .dialog-content[data-state="loading"] .qr-expired,
+    .dialog-content[data-state="loading"] .qr-error,
+    .dialog-content[data-state="expired"] .qr-loading,
+    .dialog-content[data-state="expired"] .qr-ready,
+    .dialog-content[data-state="expired"] .qr-error,
+    .dialog-content[data-state="error"] .qr-loading,
+    .dialog-content[data-state="error"] .qr-expired {
+      display: none;
+    }
+
+    .dialog-content[data-state="error"] .qr-ready {
+      display: inline-flex;
+    }
+
+    .metadata {
+      margin-top: 22px;
+      padding-top: 18px;
+      border-top: 1px solid #e9edf2;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .metadata ul {
+      margin: 10px 0 0;
+      padding-left: 18px;
+    }
+
+    .metadata li + li {
+      margin-top: 6px;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes scaleIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    @media (max-width: 980px) {
+      .page {
+        grid-template-columns: 1fr;
+        padding: 24px 16px 32px;
+      }
+
+      .login-overlay {
+        min-height: 560px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .panel {
+        border-radius: 22px;
+        padding: 18px;
+      }
+
+      .login-dialog {
+        padding: 24px 20px;
+        border-radius: 16px;
+      }
+
+      .qr-container img {
+        width: 140px;
+        height: 140px;
+      }
+
+      .qr-loading,
+      .qr-expired {
+        width: 164px;
+        height: 164px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <section class="panel info">
+      <h1>Telegram Login Dialog</h1>
+      <p>
+        Standalone extraction of the current login popup: same layout, same visual states,
+        same QR flow, but with reusable neutral endpoint names for moving into a separate repo.
+      </p>
+
+      <div class="state-switcher" aria-label="Dialog state switcher">
+        <button class="active" data-state-btn="ready" type="button">Ready</button>
+        <button data-state-btn="loading" type="button">QR Loading</button>
+        <button data-state-btn="checking" type="button">Checking</button>
+        <button data-state-btn="expired" type="button">Expired</button>
+        <button data-state-btn="error" type="button">Fallback</button>
+      </div>
+
+      <div class="api-grid">
+        <div class="api-card">
+          <strong>Start QR session</strong>
+          <code>POST /userauth/qr/create</code>
+          <p>Returns a one-time token and Telegram deeplink for the QR image.</p>
+        </div>
+        <div class="api-card">
+          <strong>Poll QR confirmation</strong>
+          <code>GET /userauth/qr/poll?token=...</code>
+          <p>Returns pending, confirmed, or expired. On confirmed, also returns the user session.</p>
+        </div>
+        <div class="api-card">
+          <strong>Read current session</strong>
+          <code>GET /userauth/session</code>
+          <p>Cookie-based session lookup used for initial auth check and fallback polling.</p>
+        </div>
+        <div class="api-card">
+          <strong>Sync cart after login</strong>
+          <code>POST /usersession/{sessionId}</code>
+          <p>Existing cart payload is preserved. Only the namespace is generalized for reuse.</p>
+        </div>
+      </div>
+
+      <div class="metadata">
+        <strong>Behavior kept intact</strong>
+        <ul>
+          <li>Open Telegram directly from the primary button.</li>
+          <li>Show QR immediately and poll every 3 seconds.</li>
+          <li>Expire the QR after 100 checks and allow manual refresh.</li>
+          <li>Re-check cookie session if QR creation fails.</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="panel">
+      <div class="login-overlay">
+        <div class="login-dialog">
+          <button class="close-btn" type="button" aria-label="Close dialog">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"></path>
+            </svg>
+          </button>
+
+          <div class="dialog-content" data-state="ready" id="dialog-content">
+            <div class="login-icon">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+              </svg>
+            </div>
+
+            <h2>Login required</h2>
+            <p class="login-desc">Please log in via Telegram to proceed with your order.</p>
+
+            <div class="login-status checking">
+              <div class="spinner"></div>
+              <span>Checking...</span>
+            </div>
+
+            <div class="action-block">
+              <button class="telegram-btn" type="button">
+                <svg class="tg-icon" width="22" height="22" 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"></path>
+                </svg>
+                Log in with Telegram
+              </button>
+
+              <div class="qr-section">
+                <p class="qr-hint">Or scan the QR code</p>
+
+                <div class="qr-container qr-loading">
+                  <div class="spinner"></div>
+                </div>
+
+                <div class="qr-container qr-ready">
+                  <img
+                    src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https%3A%2F%2Ft.me%2Fuserauth_bot%3Fstart%3Dlogin_sample_token"
+                    alt="QR Code"
+                    width="180"
+                    height="180"
+                    loading="eager"
+                  />
+                </div>
+
+                <div class="qr-container qr-expired" role="button" tabindex="0" aria-label="Refresh QR code">
+                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M1 4v6h6M23 20v-6h-6"></path>
+                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
+                  </svg>
+                  <span>QR code expired. Click to refresh</span>
+                </div>
+              </div>
+
+              <p class="login-note">You will be redirected back after login.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    const content = document.getElementById('dialog-content');
+    const buttons = document.querySelectorAll('[data-state-btn]');
+
+    buttons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const state = button.getAttribute('data-state-btn');
+        content.setAttribute('data-state', state);
+
+        buttons.forEach((candidate) => candidate.classList.remove('active'));
+        button.classList.add('active');
+      });
+    });
+  </script>
+</body>
+</html>