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

backend/internal/handlers/auth_handlers.go

@@ -4,6 +4,8 @@ import (
 	"encoding/json"
 	"os"
 
+	"strings"
+
 	"gitea.d3m0k1d.ru/d3m0k1d/d3m0k1d.ru/backend/internal/auth"
 	"gitea.d3m0k1d.ru/d3m0k1d/d3m0k1d.ru/backend/internal/logger"
 	"gitea.d3m0k1d.ru/d3m0k1d/d3m0k1d.ru/backend/internal/repositories"
@@ -73,7 +75,7 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 	code := c.Query("code")
 	if code == "" {
 		h.logger.Error("missing code")
-		c.JSON(400, gin.H{"error": "missing code"})
+		c.Redirect(302, "https://d3m0k1d.ru/login?error=missing_code")
 		return
 	}
 
@@ -82,7 +84,7 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 	token, err := h.config.Exchange(c.Request.Context(), code)
 	if err != nil {
 		h.logger.Error("Exchange failed: " + err.Error())
-		c.JSON(500, gin.H{"error": "exchange failed", "details": err.Error()})
+		c.Redirect(302, "https://d3m0k1d.ru/login?error=auth_failed")
 		return
 	}
 
@@ -90,7 +92,7 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 	resp, err := client.Get("https://api.github.com/user")
 	if err != nil {
 		h.logger.Error("Get failed: " + err.Error())
-		c.JSON(500, gin.H{"error": "get request failed to github", "details": err.Error()})
+		c.Redirect(302, "https://d3m0k1d.ru/login?error=github_api_failed")
 		return
 	}
 
@@ -98,14 +100,14 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 	err = json.NewDecoder(resp.Body).Decode(&ghUser)
 	if err != nil {
 		h.logger.Error("Decode failed: " + err.Error())
-		c.JSON(500, gin.H{"error": "decode failed", "details": err.Error()})
+		c.Redirect(302, "https://d3m0k1d.ru/login?error=decode_failed")
 		return
 	}
 
 	isreg, err := h.repo.IsRegistered(c.Request.Context(), ghUser.GithubID)
 	if err != nil {
 		h.logger.Error("Database check failed: " + err.Error())
-		c.JSON(500, gin.H{"error": "database error", "details": err.Error()})
+		c.Redirect(302, "https://d3m0k1d.ru/login?error=database_error")
 		return
 	}
 
@@ -114,7 +116,7 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 		id, err = h.repo.Register(c.Request.Context(), ghUser)
 		if err != nil {
 			h.logger.Error("Registration failed: " + err.Error())
-			c.JSON(500, gin.H{"error": "registration failed", "details": err.Error()})
+			c.Redirect(302, "https://d3m0k1d.ru/login?error=registration_failed")
 			return
 		}
 	} else {
@@ -122,7 +124,7 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 		user, err := h.repo.GetUserByGithubID(c.Request.Context(), ghUser.GithubID)
 		if err != nil {
 			h.logger.Error("Failed to fetch user: " + err.Error())
-			c.JSON(500, gin.H{"error": "failed to fetch user", "details": err.Error()})
+			c.Redirect(302, "https://d3m0k1d.ru/login?error=user_fetch_failed")
 			return
 		}
 		id = user.ID
@@ -138,26 +140,17 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 		Email:       ghUser.Email,
 		AvatarURL:   ghUser.AvatarURL,
 	}
+
 	jwtToken, err := auth.GenerateJWT(user)
 	if err != nil {
 		h.logger.Error("JWT generation failed: " + err.Error())
-		c.JSON(500, gin.H{"error": "token generation failed", "details": err.Error()})
+		c.Redirect(302, "https://d3m0k1d.ru/login?error=token_failed")
 		return
 	}
 
 	h.logger.Info("Authentication successful for user: " + ghUser.GithubLogin)
 
-	c.SetCookie(
+	c.Redirect(302, "https://d3m0k1d.ru/auth/callback#token="+jwtToken)
-		"auth_token",
-		jwtToken,
-		3600*24*30,
-		"/",
-		"",
-		true,
-		true,
-	)
-
-	c.Redirect(302, "https://d3m0k1d.ru")
 }
 
 // GetSession godoc
@@ -169,12 +162,18 @@ func (h *AuthHandlers) CallbackGithub(c *gin.Context) {
 // @Failure 401 {object} map[string]string "Unauthorized"
 // @Router /session [get]
 func (h *AuthHandlers) GetSession(c *gin.Context) {
-	tokenString, err := c.Cookie("auth_token")
+	authHeader := c.GetHeader("Authorization")
-	if err != nil {
+	if authHeader == "" {
 		c.JSON(401, gin.H{"error": "unauthorized"})
 		return
 	}
 
+	tokenString := strings.TrimPrefix(authHeader, "Bearer ")
+	if tokenString == authHeader {
+		c.JSON(401, gin.H{"error": "invalid authorization header"})
+		return
+	}
+
 	user, err := auth.ValidateJWT(tokenString)
 	if err != nil {
 		c.JSON(401, gin.H{"error": "invalid token"})

frontend/index.html

@@ -1,42 +1,117 @@
 <!doctype html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="title"
+            content="d3m0k1d - DevOps Engineer & InfoSec Student | Go Backend Developer"
+        />
+        <meta
+            name="keywords"
+            content="DevOps, InfoSec, Backend Developer, Go, Linux, Security, Portfolio, Programming, Personal Website, Personal blog, DSTU, Don State Technical Unversity, Unix"
+        />
+        <script type="application/ld+json">
+            {
+                "@context": "https://schema.org",
+                "@type": "Person",
+                "name": "d3m0k1d",
+                "url": "https://d3m0k1d.ru",
+                "jobTitle": "DevOps Engineer",
+                "description": "DevOps Engineer, InfoSec student at DSTU, and Go backend developer",
+                "alumniOf": {
+                    "@type": "EducationalOrganization",
+                    "name": "Don State Technical University"
+                },
+                "knowsAbout": [
+                    "DevOps",
+                    "Information Security",
+                    "Backend Development",
+                    "Go",
+                    "Linux",
+                    "Infrastructure Automation"
+                ],
+                "sameAs": ["https://github.com/d3m0k1d"]
+            }
+        </script>
+        <link rel="canonical" href="https://d3m0k1d.ru" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+        <meta name="author" content="d3m0k1d" />
+        <meta name="robots" content="index, follow" />
+        <title>d3m0k1d - DevOps Engineer & InfoSec Student</title>
 
-<head>
+        <style>
-    <meta charset="UTF-8" />
+            #initial-loader {
-    <link rel="icon" type="image/png" href="/favicon.png" />
+                position: fixed;
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                inset: 0;
-    <meta name="title" content="d3m0k1d - DevOps Engineer & InfoSec Student | Go Backend Developer" />
+                background: #000;
-    <meta name="keywords"
+                display: flex;
-        content="DevOps, InfoSec, Backend Developer, Go, Linux, Security, Portfolio, Programming, Personal Website, Personal blog, DSTU, Don State Technical Unversity, Unix" />
+                flex-direction: column;
-    <script type="application/ld+json">
+                align-items: center;
-    {
+                justify-content: center;
-        "@context": "https://schema.org",
+                z-index: 9999;
-        "@type": "Person",
+                font-family: monospace;
-        "name": "d3m0k1d",
+            }
-        "url": "https://d3m0k1d.ru",
-        "jobTitle": "DevOps Engineer",
-        "description": "DevOps Engineer, InfoSec student at DSTU, and Go backend developer",
-        "alumniOf": {
-            "@type": "EducationalOrganization",
-            "name": "Don State Technical University"
-        },
-        "knowsAbout": ["DevOps", "Information Security", "Backend Development", "Go", "Linux", "Infrastructure Automation"],
-        "sameAs": [
-            "https://github.com/d3m0k1d",
 
-        ]
+            #initial-loader .spinner {
-    }
+                width: 48px;
-    </script>
+                height: 48px;
-    <link rel="canonical" href="https://d3m0k1d.ru" />
+                border: 3px solid rgba(255, 255, 255, 0.1);
-    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+                border-top-color: hsl(270, 73%, 63%);
-    <meta name="author" content="d3m0k1d" />
+                border-radius: 50%;
-    <meta name="robots" content="index, follow" />
+                animation: spin 1s linear infinite;
-    <title>d3m0k1d - DevOps Engineer & InfoSec Student</title>
+            }
-</head>
 
-<body>
+            #initial-loader .text {
-    <div id="root"></div>
+                margin-top: 16px;
-    <script type="module" src="/src/main.tsx"></script>
+                color: #666;
-</body>
+                font-size: 14px;
+            }
 
+            #initial-loader .cursor {
+                color: hsl(270, 73%, 63%);
+                animation: blink 1s infinite;
+            }
+
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            @keyframes blink {
+                0%,
+                50% {
+                    opacity: 1;
+                }
+                51%,
+                100% {
+                    opacity: 0;
+                }
+            }
+
+            /* Скрываем loader когда React готов */
+            body.loaded #initial-loader {
+                opacity: 0;
+                pointer-events: none;
+                transition: opacity 0.3s ease-out;
+            }
+        </style>
+    </head>
+
+    <body>
+        <!-- Initial loader -->
+        <div id="initial-loader">
+            <div class="spinner"></div>
+            <div class="text">
+                <span class="cursor">$</span> loading<span class="cursor"
+                    >_</span
+                >
+            </div>
+        </div>
+
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>

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
+                  <button
-                    href="/logout"
+                    onClick={() => {
-                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
+                      setIsOpen(false);
-                    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>

frontend/vite.config.ts

@@ -5,4 +5,13 @@ import tailwindcss from "@tailwindcss/vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
 });