Merge pull request #10 from BEDOLAGA-DEV/dev

Dev

src/api/client.ts

@@ -1,27 +1,21 @@
 import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios'
+import { tokenStorage, isTokenExpired, tokenRefreshManager } from '../utils/token'
 
 const API_BASE_URL = import.meta.env.VITE_API_URL || '/api'
 
-const TELEGRAM_INIT_STORAGE_KEY = 'telegram_init_data'
+// Настраиваем endpoint для refresh
+tokenRefreshManager.setRefreshEndpoint(`${API_BASE_URL}/cabinet/auth/refresh`)
 
 const getTelegramInitData = (): string | null => {
   if (typeof window === 'undefined') return null
 
   const initData = window.Telegram?.WebApp?.initData
   if (initData) {
-    try {
+    tokenStorage.setTelegramInitData(initData)
-      localStorage.setItem(TELEGRAM_INIT_STORAGE_KEY, initData)
-    } catch {
-      /* ignore storage errors */
-    }
     return initData
   }
 
-  try {
+  return tokenStorage.getTelegramInitData()
-    return localStorage.getItem(TELEGRAM_INIT_STORAGE_KEY)
-  } catch {
-    return null
-  }
 }
 
 export const apiClient = axios.create({
@@ -31,9 +25,24 @@ export const apiClient = axios.create({
   },
 })
 
-// Request interceptor - add auth token
+// Request interceptor - add auth token with expiration check
-apiClient.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+apiClient.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
-  const token = localStorage.getItem('access_token')
+  let token = tokenStorage.getAccessToken()
+
+  // Проверяем срок действия токена перед запросом
+  if (token && isTokenExpired(token)) {
+    // Используем централизованный менеджер для refresh
+    const newToken = await tokenRefreshManager.refreshAccessToken()
+    if (newToken) {
+      token = newToken
+    } else {
+      // Refresh не удался - редирект на логин
+      tokenStorage.clearTokens()
+      window.location.href = '/login'
+      return config
+    }
+  }
+
   if (token && config.headers) {
     config.headers.Authorization = `Bearer ${token}`
   }
@@ -45,38 +54,26 @@ apiClient.interceptors.request.use((config: InternalAxiosRequestConfig) => {
   return config
 })
 
-// Response interceptor - handle 401, refresh token
+// Response interceptor - handle 401 as fallback
 apiClient.interceptors.response.use(
   (response) => response,
   async (error: AxiosError) => {
     const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean }
 
+    // Если получили 401 и ещё не пробовали refresh (на случай если проверка exp не сработала)
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true
 
-      const refreshToken = localStorage.getItem('refresh_token')
+      const newToken = await tokenRefreshManager.refreshAccessToken()
-      if (refreshToken) {
+      if (newToken) {
-        try {
+        if (originalRequest.headers) {
-          const response = await axios.post(`${API_BASE_URL}/cabinet/auth/refresh`, {
+          originalRequest.headers.Authorization = `Bearer ${newToken}`
-            refresh_token: refreshToken,
-          })
-
-          const { access_token } = response.data
-          localStorage.setItem('access_token', access_token)
-
-          if (originalRequest.headers) {
-            originalRequest.headers.Authorization = `Bearer ${access_token}`
-          }
-
-          return apiClient(originalRequest)
-        } catch (refreshError) {
-          // Refresh failed, clear tokens and redirect to login
-          localStorage.removeItem('access_token')
-          localStorage.removeItem('refresh_token')
-          localStorage.removeItem('user')
-          window.location.href = '/login'
-          return Promise.reject(refreshError)
         }
+        return apiClient(originalRequest)
+      } else {
+        // Refresh не удался
+        tokenStorage.clearTokens()
+        window.location.href = '/login'
       }
     }
 
@@ -85,4 +82,3 @@ apiClient.interceptors.response.use(
 )
 
 export default apiClient
-

src/components/TopUpModal.tsx

@@ -19,7 +19,10 @@ const buildCryptoBotDeepLink = (url: string): string | null => {
       return `tg://resolve?domain=CryptoBot${parsed.search || ''}`
     }
     return null
-  } catch { return null }
+  } catch (e) {
+    console.warn('[TopUpModal] Failed to build CryptoBot deep link:', e)
+    return null
+  }
 }
 
 const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
@@ -28,7 +31,7 @@ const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
 
   // If inside Telegram Mini App, let Telegram handle t.me links
   if (isTelegramPaymentLink(url) && webApp?.openTelegramLink) {
-    try { webApp.openTelegramLink(url); return } catch { /* ignore */ }
+    try { webApp.openTelegramLink(url); return } catch (e) { console.warn('[TopUpModal] openTelegramLink failed:', e) }
   }
 
   // Prefer Telegram deep link specifically for CryptoBot invoices, but only when
@@ -37,7 +40,7 @@ const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
   const target = cb && !isTelegramPaymentLink(url) ? cb : url
 
   if (reservedWindow && !reservedWindow.closed) {
-    try { reservedWindow.location.href = target; reservedWindow.focus?.() } catch { /* ignore */ }
+    try { reservedWindow.location.href = target; reservedWindow.focus?.() } catch (e) { console.warn('[TopUpModal] Failed to use reserved window:', e) }
     return
   }
 
@@ -136,7 +139,7 @@ export default function TopUpModal({ method, onClose }: TopUpModalProps) {
       onClose()
     },
     onError: (error: unknown) => {
-      try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch { /* ignore */ }
+      try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch (e) { console.warn('[TopUpModal] Failed to close popup:', e) }
       popupRef.current = null
       const detail = (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail || ''
       if (detail.includes('not yet implemented')) setError(t('balance.useBot'))

src/store/auth.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import type { User } from '../types'
 import { authApi } from '../api/auth'
+import { tokenStorage, isTokenValid, tokenRefreshManager } from '../utils/token'
 
 export interface TelegramWidgetData {
   id: number
@@ -33,6 +34,10 @@ interface AuthState {
   loginWithEmail: (email: string, password: string) => Promise<void>
 }
 
+// Блокировка для предотвращения race condition при инициализации
+let initializePromise: Promise<void> | null = null
+let isInitializing = false
+
 export const useAuthStore = create<AuthState>()(
   persist(
     (set, get) => ({
@@ -44,8 +49,7 @@ export const useAuthStore = create<AuthState>()(
       isAdmin: false,
 
       setTokens: (accessToken, refreshToken) => {
-        localStorage.setItem('access_token', accessToken)
+        tokenStorage.setTokens(accessToken, refreshToken)
-        localStorage.setItem('refresh_token', refreshToken)
         set({
           accessToken,
           refreshToken,
@@ -64,10 +68,11 @@ export const useAuthStore = create<AuthState>()(
       logout: () => {
         const { refreshToken } = get()
         if (refreshToken) {
-          authApi.logout(refreshToken).catch(console.error)
+          authApi.logout(refreshToken).catch((error) => {
+            console.error('[Auth] Logout API call failed:', error)
+          })
         }
-        localStorage.removeItem('access_token')
+        tokenStorage.clearTokens()
-        localStorage.removeItem('refresh_token')
         set({
           accessToken: null,
           refreshToken: null,
@@ -79,9 +84,14 @@ export const useAuthStore = create<AuthState>()(
 
       checkAdminStatus: async () => {
         try {
+          const token = tokenStorage.getAccessToken()
+          if (!token || !isTokenValid(token)) {
+            set({ isAdmin: false })
+            return
+          }
           const response = await fetch('/api/cabinet/auth/me/is-admin', {
             headers: {
-              Authorization: `Bearer ${localStorage.getItem('access_token')}`,
+              Authorization: `Bearer ${token}`,
             },
           })
           if (response.ok) {
@@ -89,7 +99,7 @@ export const useAuthStore = create<AuthState>()(
             set({ isAdmin: data.is_admin })
           }
         } catch (error) {
-          console.error('Failed to check admin status:', error)
+          console.error('[Auth] Failed to check admin status:', error)
           set({ isAdmin: false })
         }
       },
@@ -99,65 +109,119 @@ export const useAuthStore = create<AuthState>()(
           const user = await authApi.getMe()
           set({ user })
         } catch (error) {
-          console.error('Failed to refresh user:', error)
+          console.error('[Auth] Failed to refresh user:', error)
         }
       },
 
       initialize: async () => {
-        set({ isLoading: true })
+        // Защита от race condition - если уже идёт инициализация, ждём её завершения
-        const accessToken = localStorage.getItem('access_token')
+        if (isInitializing && initializePromise) {
-        const refreshToken = localStorage.getItem('refresh_token')
+          return initializePromise
-
-        if (!accessToken || !refreshToken) {
-          set({ isLoading: false, isAuthenticated: false })
-          return
         }
 
-        try {
+        isInitializing = true
-          const user = await authApi.getMe()
+        initializePromise = (async () => {
-          set({
-            accessToken,
-            refreshToken,
-            user,
-            isAuthenticated: true,
-            isLoading: false,
-          })
-          // Check admin status
-          get().checkAdminStatus()
-        } catch (error) {
-          // Token might be expired, try to refresh
           try {
-            const response = await authApi.refreshToken(refreshToken)
+            set({ isLoading: true })
-            localStorage.setItem('access_token', response.access_token)
+
-            const user = await authApi.getMe()
+            // Миграция токенов из localStorage (для обратной совместимости)
-            set({
+            tokenStorage.migrateFromLocalStorage()
-              accessToken: response.access_token,
+
-              refreshToken,
+            const accessToken = tokenStorage.getAccessToken()
-              user,
+            const refreshToken = tokenStorage.getRefreshToken()
-              isAuthenticated: true,
+
-              isLoading: false,
+            if (!accessToken || !refreshToken) {
-            })
+              set({ isLoading: false, isAuthenticated: false })
-            // Check admin status
+              return
-            get().checkAdminStatus()
+            }
-          } catch {
+
-            // Refresh failed, logout
+            // Проверяем валидность токена перед использованием
-            localStorage.removeItem('access_token')
+            if (!isTokenValid(accessToken)) {
-            localStorage.removeItem('refresh_token')
+              // Используем централизованный менеджер для refresh
-            set({
+              const newToken = await tokenRefreshManager.refreshAccessToken()
-              accessToken: null,
+              if (newToken) {
-              refreshToken: null,
+                const user = await authApi.getMe()
-              user: null,
+                set({
-              isAuthenticated: false,
+                  accessToken: newToken,
-              isLoading: false,
+                  refreshToken,
-            })
+                  user,
+                  isAuthenticated: true,
+                  isLoading: false,
+                })
+                get().checkAdminStatus()
+              } else {
+                tokenStorage.clearTokens()
+                set({
+                  accessToken: null,
+                  refreshToken: null,
+                  user: null,
+                  isAuthenticated: false,
+                  isLoading: false,
+                })
+              }
+              return
+            }
+
+            try {
+              const user = await authApi.getMe()
+              set({
+                accessToken,
+                refreshToken,
+                user,
+                isAuthenticated: true,
+                isLoading: false,
+              })
+              get().checkAdminStatus()
+            } catch (error) {
+              console.error('[Auth] getMe failed, trying refresh:', error)
+              // Token might be invalid on server, try to refresh
+              const newToken = await tokenRefreshManager.refreshAccessToken()
+              if (newToken) {
+                try {
+                  const user = await authApi.getMe()
+                  set({
+                    accessToken: newToken,
+                    refreshToken,
+                    user,
+                    isAuthenticated: true,
+                    isLoading: false,
+                  })
+                  get().checkAdminStatus()
+                } catch (userError) {
+                  console.error('[Auth] getMe failed after refresh:', userError)
+                  tokenStorage.clearTokens()
+                  set({
+                    accessToken: null,
+                    refreshToken: null,
+                    user: null,
+                    isAuthenticated: false,
+                    isLoading: false,
+                  })
+                }
+              } else {
+                // Refresh failed, logout
+                tokenStorage.clearTokens()
+                set({
+                  accessToken: null,
+                  refreshToken: null,
+                  user: null,
+                  isAuthenticated: false,
+                  isLoading: false,
+                })
+              }
+            }
+          } finally {
+            isInitializing = false
+            initializePromise = null
           }
-        }
+        })()
+
+        return initializePromise
       },
 
       loginWithTelegram: async (initData) => {
         const response = await authApi.loginTelegram(initData)
-        localStorage.setItem('access_token', response.access_token)
+        tokenStorage.setTokens(response.access_token, response.refresh_token)
-        localStorage.setItem('refresh_token', response.refresh_token)
         set({
           accessToken: response.access_token,
           refreshToken: response.refresh_token,
@@ -169,8 +233,7 @@ export const useAuthStore = create<AuthState>()(
 
       loginWithTelegramWidget: async (data) => {
         const response = await authApi.loginTelegramWidget(data)
-        localStorage.setItem('access_token', response.access_token)
+        tokenStorage.setTokens(response.access_token, response.refresh_token)
-        localStorage.setItem('refresh_token', response.refresh_token)
         set({
           accessToken: response.access_token,
           refreshToken: response.refresh_token,
@@ -182,8 +245,7 @@ export const useAuthStore = create<AuthState>()(
 
       loginWithEmail: async (email, password) => {
         const response = await authApi.loginEmail(email, password)
-        localStorage.setItem('access_token', response.access_token)
+        tokenStorage.setTokens(response.access_token, response.refresh_token)
-        localStorage.setItem('refresh_token', response.refresh_token)
         set({
           accessToken: response.access_token,
           refreshToken: response.refresh_token,

src/utils/token.ts

@@ -0,0 +1,255 @@
+/**
+ * Утилиты для безопасной работы с JWT токенами
+ */
+
+const TOKEN_KEYS = {
+  ACCESS: 'access_token',
+  REFRESH: 'refresh_token',
+  USER: 'user',
+  TELEGRAM_INIT: 'telegram_init_data',
+} as const
+
+interface JWTPayload {
+  exp?: number
+  iat?: number
+  sub?: string
+  [key: string]: unknown
+}
+
+/**
+ * Декодирует JWT токен без верификации подписи
+ * Используется только для чтения payload на клиенте
+ */
+export function decodeJWT(token: string): JWTPayload | null {
+  try {
+    const parts = token.split('.')
+    if (parts.length !== 3) return null
+
+    const payload = parts[1]
+    const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'))
+    return JSON.parse(decoded)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Проверяет, истёк ли срок действия токена
+ * @param token JWT токен
+ * @param bufferSeconds Буфер в секундах до истечения (по умолчанию 30 сек)
+ */
+export function isTokenExpired(token: string | null, bufferSeconds = 30): boolean {
+  if (!token) return true
+
+  const payload = decodeJWT(token)
+  if (!payload?.exp) return true
+
+  const now = Math.floor(Date.now() / 1000)
+  return payload.exp <= now + bufferSeconds
+}
+
+/**
+ * Проверяет, валиден ли токен (не истёк и корректный формат)
+ */
+export function isTokenValid(token: string | null): boolean {
+  if (!token) return false
+  return !isTokenExpired(token)
+}
+
+/**
+ * Безопасное хранилище токенов
+ * Использует sessionStorage вместо localStorage для защиты от XSS
+ * Токены не сохраняются между сессиями браузера
+ */
+export const tokenStorage = {
+  getAccessToken(): string | null {
+    try {
+      return sessionStorage.getItem(TOKEN_KEYS.ACCESS)
+    } catch {
+      return null
+    }
+  },
+
+  getRefreshToken(): string | null {
+    try {
+      return sessionStorage.getItem(TOKEN_KEYS.REFRESH)
+    } catch {
+      return null
+    }
+  },
+
+  setTokens(accessToken: string, refreshToken: string): void {
+    try {
+      sessionStorage.setItem(TOKEN_KEYS.ACCESS, accessToken)
+      sessionStorage.setItem(TOKEN_KEYS.REFRESH, refreshToken)
+    } catch {
+      console.error('Failed to save tokens to sessionStorage')
+    }
+  },
+
+  setAccessToken(accessToken: string): void {
+    try {
+      sessionStorage.setItem(TOKEN_KEYS.ACCESS, accessToken)
+    } catch {
+      console.error('Failed to save access token to sessionStorage')
+    }
+  },
+
+  clearTokens(): void {
+    try {
+      sessionStorage.removeItem(TOKEN_KEYS.ACCESS)
+      sessionStorage.removeItem(TOKEN_KEYS.REFRESH)
+      sessionStorage.removeItem(TOKEN_KEYS.USER)
+      // Также очищаем localStorage для миграции со старой версии
+      localStorage.removeItem(TOKEN_KEYS.ACCESS)
+      localStorage.removeItem(TOKEN_KEYS.REFRESH)
+      localStorage.removeItem(TOKEN_KEYS.USER)
+    } catch {
+      // ignore
+    }
+  },
+
+  /**
+   * Миграция токенов из localStorage в sessionStorage
+   * Вызывается при инициализации для обратной совместимости
+   */
+  migrateFromLocalStorage(): void {
+    try {
+      const accessToken = localStorage.getItem(TOKEN_KEYS.ACCESS)
+      const refreshToken = localStorage.getItem(TOKEN_KEYS.REFRESH)
+
+      if (accessToken && !sessionStorage.getItem(TOKEN_KEYS.ACCESS)) {
+        sessionStorage.setItem(TOKEN_KEYS.ACCESS, accessToken)
+      }
+      if (refreshToken && !sessionStorage.getItem(TOKEN_KEYS.REFRESH)) {
+        sessionStorage.setItem(TOKEN_KEYS.REFRESH, refreshToken)
+      }
+
+      // Удаляем из localStorage после миграции
+      localStorage.removeItem(TOKEN_KEYS.ACCESS)
+      localStorage.removeItem(TOKEN_KEYS.REFRESH)
+    } catch {
+      // ignore
+    }
+  },
+
+  getTelegramInitData(): string | null {
+    try {
+      return sessionStorage.getItem(TOKEN_KEYS.TELEGRAM_INIT)
+    } catch {
+      return null
+    }
+  },
+
+  setTelegramInitData(data: string): void {
+    try {
+      sessionStorage.setItem(TOKEN_KEYS.TELEGRAM_INIT, data)
+    } catch {
+      // ignore
+    }
+  },
+}
+
+/**
+ * Централизованный менеджер обновления токенов
+ * Предотвращает множественные параллельные refresh запросы
+ */
+class TokenRefreshManager {
+  private isRefreshing = false
+  private refreshPromise: Promise<string | null> | null = null
+  private subscribers: ((token: string | null) => void)[] = []
+  private refreshEndpoint = '/api/cabinet/auth/refresh'
+
+  setRefreshEndpoint(endpoint: string): void {
+    this.refreshEndpoint = endpoint
+  }
+
+  /**
+   * Обновляет access token используя refresh token
+   * При множественных вызовах возвращает один и тот же Promise
+   */
+  async refreshAccessToken(): Promise<string | null> {
+    // Если уже идёт refresh - возвращаем существующий Promise
+    if (this.isRefreshing && this.refreshPromise) {
+      return this.refreshPromise
+    }
+
+    const refreshToken = tokenStorage.getRefreshToken()
+    if (!refreshToken) {
+      return null
+    }
+
+    this.isRefreshing = true
+    this.refreshPromise = this.doRefresh(refreshToken)
+
+    try {
+      const result = await this.refreshPromise
+      this.notifySubscribers(result)
+      return result
+    } finally {
+      this.isRefreshing = false
+      this.refreshPromise = null
+    }
+  }
+
+  private async doRefresh(refreshToken: string): Promise<string | null> {
+    try {
+      const response = await fetch(this.refreshEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ refresh_token: refreshToken }),
+      })
+
+      if (!response.ok) {
+        throw new Error(`Refresh failed: ${response.status}`)
+      }
+
+      const data = await response.json()
+      const newAccessToken = data.access_token
+
+      if (newAccessToken) {
+        tokenStorage.setAccessToken(newAccessToken)
+        return newAccessToken
+      }
+
+      return null
+    } catch (error) {
+      console.error('[TokenRefreshManager] Refresh failed:', error)
+      return null
+    }
+  }
+
+  /**
+   * Подписка на результат refresh (для ожидающих запросов)
+   */
+  subscribe(callback: (token: string | null) => void): () => void {
+    this.subscribers.push(callback)
+    return () => {
+      this.subscribers = this.subscribers.filter((cb) => cb !== callback)
+    }
+  }
+
+  private notifySubscribers(token: string | null): void {
+    this.subscribers.forEach((cb) => cb(token))
+    this.subscribers = []
+  }
+
+  /**
+   * Проверяет, идёт ли сейчас refresh
+   */
+  get isRefreshInProgress(): boolean {
+    return this.isRefreshing
+  }
+
+  /**
+   * Ожидает завершения текущего refresh (если есть)
+   */
+  async waitForRefresh(): Promise<string | null> {
+    if (this.refreshPromise) {
+      return this.refreshPromise
+    }
+    return tokenStorage.getAccessToken()
+  }
+}
+
+export const tokenRefreshManager = new TokenRefreshManager()