Fix the automatic logout functionality when the backend returns 401 or 403 error code

Author: sinkozs

backend/app/api/deps.py

@@ -1,5 +1,5 @@
 from collections.abc import Generator
-from typing import Annotated, Optional
+from typing import Annotated
 
 import jwt
 from fastapi import Depends, HTTPException, status, Cookie

backend/app/api/routes/login.py

@@ -25,7 +25,7 @@ def login_access_token(
         session: SessionDep, form_data: Annotated[OAuth2PasswordRequestForm, Depends()]
 ) -> JSONResponse:
     """
-    OAuth2 compatible token login, get an access token for future requests (sent in a HTTP-only cookie)
+    OAuth2-compatible token login: get an access token for future requests (sent in an HTTP-only cookie)
     """
     user = crud.authenticate(
         session=session, email=form_data.username, password=form_data.password
@@ -35,7 +35,7 @@ def login_access_token(
     elif not user.is_active:
         raise HTTPException(status_code=400, detail="Inactive user")
     access_token_expires = timedelta(minutes=settings.ACCESS_TOKEN_EXPIRE_MINUTES)
-    return security.set_response_cookie(user.id, access_token_expires)
+    return security.set_auth_cookie(user.id, access_token_expires)
 
 
 @router.post("/login/test-token", response_model=UserPublic)
@@ -124,15 +124,4 @@ def logout() -> JSONResponse:
     """
     Delete the HTTP-only cookie during logout
     """
-
-    response = JSONResponse(content={"message": "Logout successful"})
-
-    response.delete_cookie(
-        key="http_only_auth_cookie",
-        path="/",
-        domain=None,
-        httponly=True,
-        samesite="lax",
-        secure=False,  # Should be True in production
-    )
-    return response
+    return security.delete_auth_cookie()

backend/app/core/security.py

@@ -1,3 +1,4 @@
+import os
 from datetime import datetime, timedelta, timezone
 from typing import Any
 import jwt
@@ -18,19 +19,34 @@ def create_access_token(subject: str | Any, expires_delta: timedelta) -> str:
     return encoded_jwt
 
 
-def set_response_cookie(subject: str | Any, expires_delta: timedelta) -> Response:
+def set_auth_cookie(subject: str | Any, expires_delta: timedelta) -> Response:
     access_token = create_access_token(subject, expires_delta)
     response = JSONResponse(
         content={"message": "Login successful"}
     )
+    # Note: The secure flag on cookies ensures they're only sent over encrypted HTTPS connections. For local development (HTTP) set it to False
     response.set_cookie(
         key="http_only_auth_cookie",
         value=access_token,
         httponly=True,
         max_age=3600,
         expires=3600,
         samesite="lax",
-        secure=False,
+        secure=True,
+    )
+    return response
+
+
+def delete_auth_cookie() -> Response:
+    response = JSONResponse(content={"message": "Logout successful"})
+
+    response.delete_cookie(
+        key="http_only_auth_cookie",
+        path="/",
+        domain=None,
+        httponly=True,
+        samesite="lax",
+        secure=False,  # Should be True in production
     )
     return response
 

frontend/src/client/sdk.gen.ts

@@ -232,6 +232,7 @@ export class LoginService {
    * @throws ApiError
    */
   public static testToken(): CancelablePromise<LoginTestTokenResponse> {
+    console.log("test token")
     return __request(OpenAPI, {
       method: "POST",
       url: "/api/v1/login/test-token",

frontend/src/main.tsx

@@ -13,13 +13,10 @@ import { ApiError, OpenAPI } from "./client"
 import { CustomProvider } from "./components/ui/provider"
 
 OpenAPI.BASE = import.meta.env.VITE_API_URL
-OpenAPI.TOKEN = async () => {
-  return localStorage.getItem("access_token") || ""
-}
 
 const handleApiError = (error: Error) => {
   if (error instanceof ApiError && [401, 403].includes(error.status)) {
-    localStorage.removeItem("access_token")
+    localStorage.removeItem("is_authenticated")
     window.location.href = "/login"
   }
 }