set up an authorization session using tokens and cookies

src/App.jsx

@@ -1,37 +1,108 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
-import { ThemeProvider, CssBaseline, Switch, Box } from "@mui/material";
+import { ThemeProvider, CssBaseline, Switch, Box, CircularProgress } from "@mui/material";
 import Dashboard from "./Components/Layout/Dashboard";
 import LoginModal from "./Components/UI/LoginModal";
 import { lightTheme, darkTheme } from "./Style/theme";
-import Logo from './assets/images/logo.svg?react';  // Импорт как компонента
+import Logo from './assets/images/logo.svg?react';
+import { checkAuth } from "./Components/UI/auth"; // Убедитесь, что путь правильный
 
 function App() {
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [authState, setAuthState] = useState({
-    const [showLoginModal, setShowLoginModal] = useState(true);
+        isAuthenticated: false,
+        isLoading: true,
+        user: null
+    });
+    const [showLoginModal, setShowLoginModal] = useState(false);
     const [isDarkMode, setIsDarkMode] = useState(
         window.matchMedia("(prefers-color-scheme: dark)").matches
     );
 
     const theme = useMemo(() => (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);
 
-    const handleLogin = () => {
+    useEffect(() => {
-        setIsAuthenticated(true);
+        const verifyAuth = async () => {
+            try {
+                const authStatus = await checkAuth();
+
+                setAuthState({
+                    isAuthenticated: authStatus.isAuthenticated,
+                    isLoading: false,
+                    user: authStatus.user || null
+                });
+
+                setShowLoginModal(!authStatus.isAuthenticated);
+            } catch (error) {
+                console.error('Auth verification error:', error);
+                setAuthState({
+                    isAuthenticated: false,
+                    isLoading: false,
+                    user: null
+                });
+                setShowLoginModal(true);
+            }
+        };
+
+        verifyAuth();
+    }, []);
+
+    const handleLogin = (userData) => {
+        setAuthState({
+            isAuthenticated: true,
+            isLoading: false,
+            user: userData
+        });
         setShowLoginModal(false);
     };
 
+    const handleLogout = async () => {
+        try {
+            await fetch('http://192.168.2.39:3000/api/auth/logout', {
+                method: 'POST',
+                credentials: 'include'
+            });
+            localStorage.removeItem('access_token');
+            setAuthState({
+                isAuthenticated: false,
+                isLoading: false,
+                user: null
+            });
+            setShowLoginModal(true);
+        } catch (error) {
+            console.error('Logout failed:', error);
+        }
+    };
+
+    if (authState.isLoading) {
+        return (
+            <ThemeProvider theme={theme}>
+                <CssBaseline />
+                <Box sx={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '100vh',
+                    flexDirection: 'column',
+                    gap: 2
+                }}>
+                    <CircularProgress />
+                    <p>Проверка авторизации...</p>
+                </Box>
+            </ThemeProvider>
+        );
+    }
+
     return (
         <ThemeProvider theme={theme}>
             <CssBaseline />
-            {!isAuthenticated && showLoginModal ? (
+            {!authState.isAuthenticated && showLoginModal ? (
                 <>
-                    {/* Логотип */}
                     <Box
                         component="div"
                         sx={{
                             position: "fixed",
                             top: 24,
-                            left: "50%",    // Сдвигаем начало логотипа в центр
+                            left: "50%",
-                            transform: "translateX(-50%)", // Смещаем назад на половину ширины логотипа
+                            transform: "translateX(-50%)",
                             zIndex: 1200,
                             '& svg': {
                                 width: 400,
@@ -55,9 +126,15 @@ function App() {
                     bgcolor: "background.default",
                     color: "text.primary"
                 }}>
-                    <Dashboard />
+                    <Dashboard
+                        user={authState.user}
+                        onLogout={handleLogout}
+                    />
                     <Box sx={{ position: "absolute", top: 10, right: 10 }}>
-                        <Switch checked={isDarkMode} onChange={() => setIsDarkMode((prev) => !prev)} />
+                        <Switch
+                            checked={isDarkMode}
+                            onChange={() => setIsDarkMode((prev) => !prev)}
+                        />
                     </Box>
                 </Box>
             )}

src/Components/UI/LoginModal.jsx

@@ -16,9 +16,9 @@ const LoginModal = ({ onLogin, onClose }) => {
     e.preventDefault();
 
     try {
-      // Отправляем данные на бэкенд
+      const response = await fetch('http://192.168.2.39:3000/api/auth/login', {
-      const response = await fetch(`${import.meta.env.VITE_BACK_URL}/api/auth/login`, {
         method: 'POST',
+        credentials: 'include',
         headers: {
           'Content-Type': 'application/json',
         },
@@ -28,8 +28,9 @@ const LoginModal = ({ onLogin, onClose }) => {
       const data = await response.json();
 
       if (data.success) {
-        onLogin(); // Успешная авторизация
+        localStorage.setItem('access_token', data.access_token);
-        onClose(); // Закрыть модальное окно
+        onLogin(data.user); // Передаем данные пользователя
+        onClose();
       } else {
         setError(data.message || "Неверный логин или пароль");
       }

src/Components/UI/auth.jsx

@@ -0,0 +1,20 @@
+export const checkAuth = async () => {
+    try {
+        const response = await fetch('http://192.168.2.39:3000/api/auth/check', {
+            method: 'GET',
+            credentials: 'include', // Важно для отправки cookies
+            headers: {
+                'Authorization': `Bearer ${localStorage.getItem('access_token') || ''}`,
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error('Not authenticated');
+        }
+
+        return await response.json();
+    } catch (err) {
+        console.error('Auth check failed:', err);
+        return { isAuthenticated: false };
+    }
+};