feat: change auth type from cookies to localstorage add loadpage, test auth to prod

frontend/src/App.tsx

@@ -1,12 +1,18 @@
 import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useEffect } from "react";
 import Navigation from "./components/Navigation.tsx";
 import Footer from "./components/Footer.tsx";
+import AuthCallback from "./components/AuthCallback.tsx";
 import Home from "./pages/Home.tsx";
 import About from "./components/Skills.tsx";
 import Login from "./pages/Login.tsx";
 
 function App() {
+  useEffect(() => {
+    document.body.classList.add("loaded");
+  }, []);
+
   return (
     <BrowserRouter>
       <div className="min-h-screen flex flex-col">
@@ -23,6 +29,7 @@ function App() {
               }
             />
             <Route path="/login" element={<Login />} />
+            <Route path="/auth/callback" element={<AuthCallback />} />
           </Routes>
         </main>
         <Footer />

frontend/src/components/AuthCallback.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function AuthCallback() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+    const params = new URLSearchParams(hash);
+    const token = params.get("token");
+
+    if (token) {
+      localStorage.setItem("auth_token", token);
+
+      navigate("/");
+    } else {
+      navigate("/login?error=no_token");
+    }
+  }, [navigate]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[hsl(270,73%,63%)] mx-auto mb-4"></div>
+        <p className="text-gray-400">Completing authentication...</p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Navigation.tsx

@@ -17,18 +17,41 @@ export default function Navigation() {
 
   const checkAuth = async () => {
     try {
-      const response = await fetch("/api/auth/session");
+      const token = localStorage.getItem("auth_token");
+
+      if (!token) {
+        setIsLoading(false);
+        return;
+      }
+
+      const response = await fetch("/api/v1/auth/session", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
       if (response.ok) {
         const data = await response.json();
         setUser(data.user);
+        console.log("User loaded:", data.user);
+      } else {
+        console.error("Token invalid, removing");
+        localStorage.removeItem("auth_token");
       }
     } catch (error) {
       console.error("Auth check failed:", error);
+      localStorage.removeItem("auth_token");
     } finally {
       setIsLoading(false);
     }
   };
 
+  const handleLogout = () => {
+    localStorage.removeItem("auth_token");
+    setUser(null);
+    window.location.href = "/";
+  };
+
   const getInitials = (user: User): string => {
     if (user.name) {
       return user.name.substring(0, 2).toUpperCase();
@@ -49,18 +72,26 @@ export default function Navigation() {
     return (
       <>
         {user ? (
-          <div className="relative cursor-pointer">
+          <div
+            className="relative cursor-pointer group"
+            onClick={handleLogout}
+            title={`Logout (${user.name || user.email})`}
+          >
             {user.avatar ? (
               <img
                 src={user.avatar}
                 alt={user.name || user.email || "User"}
-                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)]"
+                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)] group-hover:border-red-500 transition-colors"
               />
             ) : (
-              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm">
+              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm group-hover:from-red-500 group-hover:to-red-600 transition-colors">
                 {getInitials(user)}
               </div>
             )}
+            {/* Tooltip при наведении */}
+            <div className="absolute top-12 right-0 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+              Click to logout
+            </div>
           </div>
         ) : (
           <a
@@ -186,13 +217,15 @@ export default function Navigation() {
                   <div className="py-3 px-4 text-sm text-gray-600">
                     {user.name || user.email}
                   </div>
-                  <a
-                    href="/logout"
-                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
-                    onClick={() => setIsOpen(false)}
+                  <button
+                    onClick={() => {
+                      setIsOpen(false);
+                      handleLogout();
+                    }}
+                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600 text-left"
                   >
                     Logout
-                  </a>
+                  </button>
                 </>
               )}
             </div>