added usage of httpOnly cookies for jwt token storage (instead of localStorage)

Author: HardMax71

backend/app/api/routes/auth.py

@@ -6,7 +6,7 @@
 from app.core.security import security_service
 from app.db.repositories.user_repository import UserRepository, get_user_repository
 from app.schemas.user import UserCreate, UserInDB, UserResponse
-from fastapi import APIRouter, Depends, HTTPException, Request
+from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from fastapi.security import OAuth2PasswordRequestForm
 from slowapi import Limiter
 from slowapi.util import get_remote_address
@@ -18,6 +18,7 @@
 @router.post("/login")
 async def login(
         request: Request,
+        response: Response,
         form_data: OAuth2PasswordRequestForm = Depends(),
         user_repo: UserRepository = Depends(get_user_repository),
 ) -> Dict[str, str]:
@@ -79,7 +80,18 @@ async def login(
         },
     )
 
-    return {"access_token": access_token, "token_type": "bearer"}
+    # Set httpOnly cookie for secure token storage
+    response.set_cookie(
+        key="access_token",
+        value=access_token,
+        max_age=settings.ACCESS_TOKEN_EXPIRE_MINUTES * 60,  # Convert to seconds
+        httponly=True,
+        secure=True,  # HTTPS only
+        samesite="strict",  # CSRF protection
+        path="/",
+    )
+
+    return {"message": "Login successful", "username": user.username}
 
 
 @router.post("/register", response_model=UserResponse)
@@ -181,3 +193,37 @@ async def verify_token(
             detail="Invalid token",
             headers={"WWW-Authenticate": "Bearer"},
         ) from e
+
+
+@router.post("/logout")
+async def logout(
+        request: Request,
+        response: Response,
+) -> Dict[str, str]:
+    logger.info(
+        "Logout attempt",
+        extra={
+            "client_ip": get_remote_address(request),
+            "endpoint": "/logout",
+            "user_agent": request.headers.get("user-agent"),
+        },
+    )
+
+    # Clear the httpOnly cookie
+    response.delete_cookie(
+        key="access_token",
+        path="/",
+        secure=True,
+        httponly=True,
+        samesite="strict",
+    )
+
+    logger.info(
+        "Logout successful",
+        extra={
+            "client_ip": get_remote_address(request),
+            "user_agent": request.headers.get("user-agent"),
+        },
+    )
+
+    return {"message": "Logout successful"}

backend/app/core/security.py

@@ -5,13 +5,24 @@
 from app.config import get_settings
 from app.db.repositories.user_repository import UserRepository, get_user_repository
 from app.schemas.user import UserInDB
-from fastapi import Depends, HTTPException, status
+from fastapi import Depends, HTTPException, Request, status
 from fastapi.security import OAuth2PasswordBearer
 from passlib.context import CryptContext
 
 oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/api/v1/login")
 
 
+def get_token_from_cookie(request: Request) -> str:
+    token = request.cookies.get("access_token")
+    if not token:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Authentication token not found",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    return token
+
+
 class SecurityService:
     def __init__(self) -> None:
         self.pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
@@ -39,7 +50,7 @@ def create_access_token(
 
     async def get_current_user(
             self,
-            token: str = Depends(oauth2_scheme),
+            token: str = Depends(get_token_from_cookie),
             user_repo: UserRepository = Depends(get_user_repository),
     ) -> UserInDB:
         credentials_exception = HTTPException(

frontend/src/components/Header.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Link, navigate } from "svelte-routing";
-  import { authToken, username, logout as authLogout } from "../stores/auth.js";
+  import { isAuthenticated, username, logout as authLogout } from "../stores/auth.js";
   import { theme, toggleTheme } from "../stores/theme.js";
   import { fade } from 'svelte/transition';
   import { onMount, onDestroy } from 'svelte';
@@ -49,8 +49,8 @@
     isMenuActive = false;
   }
 
-  function handleLogout() {
-    authLogout();
+  async function handleLogout() {
+    await authLogout();
     closeMenu();
     navigate('/login');
   }
@@ -98,7 +98,7 @@
         </button>
 
         <div class="hidden lg:flex items-center space-x-3">
-          {#if $authToken}
+          {#if $isAuthenticated}
             <span class="text-sm text-fg-muted dark:text-dark-fg-muted hidden xl:inline">Welcome, <span class="font-medium text-fg-default dark:text-dark-fg-default">{$username}!</span></span>
             <button on:click={handleLogout} class="btn btn-secondary-outline btn-sm">
               Logout
@@ -128,7 +128,7 @@
       <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
 
         <div class="pt-3 mt-2 border-t border-border-default dark:border-dark-border-default">
-          {#if $authToken}
+          {#if $isAuthenticated}
             <div class="px-3 py-2">
                <div class="text-sm font-medium text-fg-default dark:text-dark-fg-default">{$username}</div>
                <div class="text-xs text-fg-muted dark:text-dark-fg-muted">Logged in</div>

frontend/src/main.js

@@ -1,5 +1,8 @@
 import App from './App.svelte';
 import './app.css';
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
 
 const app = new App({
   target: document.body,

frontend/src/routes/Editor.svelte

@@ -3,7 +3,7 @@
     import {fade, fly, slide} from "svelte/transition";
     import {get, writable} from "svelte/store";
     import axios from "axios";
-    import {authToken, logout as authLogout} from "../stores/auth.js";
+    import {isAuthenticated, logout as authLogout, verifyAuth} from "../stores/auth.js";
     import {addNotification} from "../stores/notifications.js";
     import Spinner from "../components/Spinner.svelte";
     import {navigate} from "svelte-routing";
@@ -78,7 +78,7 @@
     let showOptions = false;
     let showSavedScripts = false;
 
-    let isAuthenticated = false;
+    let authenticated = false;
     let savedScripts = [];
     let scriptName = createPersistentStore("scriptName", "");
     let currentScriptId = createPersistentStore("currentScriptId", null);
@@ -126,12 +126,15 @@
     }
 
     onMount(async () => {
-        unsubscribeAuth = authToken.subscribe(token => {
-            const wasAuthenticated = isAuthenticated;
-            isAuthenticated = !!token;
-            if (!wasAuthenticated && isAuthenticated && editorView) {
+        // Verify authentication status on startup
+        await verifyAuth();
+        
+        unsubscribeAuth = isAuthenticated.subscribe(authStatus => {
+            const wasAuthenticated = authenticated;
+            authenticated = authStatus;
+            if (!wasAuthenticated && authenticated && editorView) {
                 loadSavedScripts();
-            } else if (wasAuthenticated && !isAuthenticated) {
+            } else if (wasAuthenticated && !authenticated) {
                 savedScripts = [];
                 showSavedScripts = false;
                 currentScriptId.set(null);
@@ -184,7 +187,7 @@
             }
         });
 
-        if (isAuthenticated) {
+        if (authenticated) {
             await loadSavedScripts();
         }
     });
@@ -334,11 +337,10 @@
     }
 
     async function loadSavedScripts() {
-        if (!isAuthenticated) return;
-        const authTokenValue = get(authToken);
+        if (!authenticated) return;
         try {
             const response = await axios.get(`/api/v1/scripts`, {
-                headers: {Authorization: `Bearer ${authTokenValue}`},
+                withCredentials: true, // Use cookies for authentication
             });
             savedScripts = response.data || [];
         } catch (err) {
@@ -371,7 +373,7 @@
     }
 
     async function saveScript() {
-        if (!isAuthenticated) {
+        if (!authenticated) {
             addNotification("Please log in to save scripts.", "warning");
             return;
         }
@@ -381,7 +383,6 @@
             return;
         }
         const scriptValue = get(script);
-        const authTokenValue = get(authToken);
         const currentIdValue = get(currentScriptId);
         let operation = currentIdValue ? 'update' : 'create';
 
@@ -391,14 +392,14 @@
                 response = await axios.put(
                     `/api/v1/scripts/${currentIdValue}`,
                     {name: nameValue, script: scriptValue},
-                    {headers: {Authorization: `Bearer ${authTokenValue}`}}
+                    {withCredentials: true}
                 );
                 addNotification("Script updated successfully.", "success");
             } else {
                 response = await axios.post(
                     `/api/v1/scripts`,
                     {name: nameValue, script: scriptValue},
-                    {headers: {Authorization: `Bearer ${authTokenValue}`}}
+                    {withCredentials: true}
                 );
                 currentScriptId.set(response.data.id);
                 addNotification("Script saved successfully.", "success");
@@ -414,18 +415,17 @@
     }
 
     async function deleteScript(scriptIdToDelete) {
-        if (!isAuthenticated) return;
+        if (!authenticated) return;
         const scriptToDelete = savedScripts.find(s => s.id === scriptIdToDelete);
         const confirmMessage = scriptToDelete
             ? `Are you sure you want to delete "${scriptToDelete.name}"?`
             : "Are you sure you want to delete this script?";
 
         if (!confirm(confirmMessage)) return;
 
-        const authTokenValue = get(authToken);
         try {
             await axios.delete(`/api/v1/scripts/${scriptIdToDelete}`, {
-                headers: {Authorization: `Bearer ${authTokenValue}`},
+                withCredentials: true,
             });
             addNotification("Script deleted successfully.", "success");
             if (get(currentScriptId) === scriptIdToDelete) {
@@ -517,7 +517,7 @@
 
     function toggleSavedScripts() {
         showSavedScripts = !showSavedScripts;
-        if (showSavedScripts && isAuthenticated) {
+        if (showSavedScripts && authenticated) {
             loadSavedScripts();
         }
     }
@@ -893,7 +893,7 @@
 
                     <!-- Right Column: Saved Scripts -->
                     <div class="w-1/2 space-y-3">
-                        {#if isAuthenticated}
+                        {#if authenticated}
                             <h4 class="text-xs font-medium text-fg-muted dark:text-dark-fg-muted uppercase tracking-wider">
                                 Saved Scripts
                             </h4>

frontend/src/stores/auth.js

@@ -1,19 +1,8 @@
 import { writable } from 'svelte/store';
 import {backendUrl} from "../config.js";
 
-function createPersistentStore(key, startValue) {
-    const storedValue = localStorage.getItem(key);
-    const store = writable(storedValue ? JSON.parse(storedValue) : startValue);
-
-    store.subscribe(value => {
-        localStorage.setItem(key, JSON.stringify(value));
-    });
-
-    return store;
-}
-
-export const authToken = createPersistentStore("auth_token", null);
-export const username = createPersistentStore("username", null);
+export const isAuthenticated = writable(false);
+export const username = writable(null);
 
 export async function login(email, password) {
     try {
@@ -26,6 +15,7 @@ export async function login(email, password) {
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded',
             },
+            credentials: 'include',
             body: formData
         });
 
@@ -35,16 +25,58 @@ export async function login(email, password) {
         }
 
         const data = await response.json();
-        authToken.set(data.access_token);
-        username.set(email);
+        // Token is now stored in httpOnly cookie, just update auth state
+        isAuthenticated.set(true);
+        username.set(data.username || email);
         return true;
     } catch (error) {
         console.error("Login failed:", error);
         throw error;
     }
 }
 
-export function logout() {
-    authToken.set(null);
-    username.set(null);
+export async function logout() {
+    try {
+        const response = await fetch('/api/v1/logout', {
+            method: 'POST',
+            credentials: 'include',
+        });
+
+        // Clear auth state regardless of response (cookie might be expired)
+        isAuthenticated.set(false);
+        username.set(null);
+
+        if (!response.ok) {
+            console.warn('Logout request failed, but cleared local auth state');
+        }
+    } catch (error) {
+        console.error('Logout error:', error);
+        isAuthenticated.set(false);
+        username.set(null);
+    }
+}
+
+export async function verifyAuth() {
+    try {
+        const response = await fetch('/api/v1/verify-token', {
+            method: 'GET',
+            credentials: 'include',
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            isAuthenticated.set(data.valid);
+            username.set(data.username);
+            return data.valid;
+        } else {
+            isAuthenticated.set(false);
+            username.set(null);
+            return false;
+        }
+    } catch (error) {
+        console.error('Auth verification failed:', error);
+        isAuthenticated.set(false);
+        username.set(null);
+        return false;
+    }
 }