Implement logout function in both backend and frontend to delete HTTP-only cookie on logout

Author: sinkozs

backend/app/api/deps.py

@@ -31,7 +31,6 @@ def get_current_user(
         session: SessionDep,
         http_only_auth_cookie: str = Depends(cookie_scheme),
 ) -> User:
-    print("start get_current_user...")
     if not http_only_auth_cookie:
         raise HTTPException(
             status_code=status.HTTP_401_UNAUTHORIZED,
@@ -45,7 +44,6 @@ def get_current_user(
             algorithms=[security.ALGORITHM]
         )
         token_data = TokenPayload(**payload)
-        print(f"get_current_user token data: {token_data}")
     except (InvalidTokenError, ValidationError):
         raise HTTPException(
             status_code=status.HTTP_403_FORBIDDEN,
@@ -62,7 +60,6 @@ def get_current_user(
 
 
 CurrentUser = Annotated[User, Depends(get_current_user)]
-print(f"CurrentUser {CurrentUser}")
 
 def get_current_active_superuser(current_user: CurrentUser) -> User:
     if not current_user.is_superuser:

backend/app/api/routes/login.py

@@ -5,7 +5,7 @@
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.security import OAuth2PasswordRequestForm
 from app import crud
-from app.api.deps import CurrentUser, SessionDep, get_current_active_superuser
+from app.api.deps import CurrentUser, SessionDep, get_current_active_superuser, get_current_user
 from app.core import security
 from app.core.config import settings
 from app.core.security import get_password_hash
@@ -22,10 +22,10 @@
 
 @router.post("/login/access-token")
 def login_access_token(
-    session: SessionDep, form_data: Annotated[OAuth2PasswordRequestForm, Depends()]
+        session: SessionDep, form_data: Annotated[OAuth2PasswordRequestForm, Depends()]
 ) -> JSONResponse:
     """
-    OAuth2 compatible token login, get an access token for future requests
+    OAuth2 compatible token login, get an access token for future requests (sent in a HTTP-only cookie)
     """
     user = crud.authenticate(
         session=session, email=form_data.username, password=form_data.password
@@ -36,11 +36,6 @@ def login_access_token(
         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 Token(
-    #     access_token=security.create_access_token(
-    #         user.id, expires_delta=access_token_expires
-    #     ))
-
 
 
 @router.post("/login/test-token", response_model=UserPublic)
@@ -122,3 +117,22 @@ def recover_password_html_content(email: str, session: SessionDep) -> Any:
     return HTMLResponse(
         content=email_data.html_content, headers={"subject:": email_data.subject}
     )
+
+
+@router.post("/logout", dependencies=[Depends(get_current_user)])
+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

backend/app/api/routes/users.py

@@ -122,7 +122,6 @@ def read_user_me(current_user: CurrentUser) -> Any:
     """
     Get current user.
     """
-    print("read_user_me!!!!!!!")
     return current_user
 
 

frontend/src/client/sdk.gen.ts

@@ -15,6 +15,7 @@ import type {
   ItemsDeleteItemData,
   ItemsDeleteItemResponse,
   LoginLoginAccessTokenData,
+  LogoutResponse,
   LoginLoginAccessTokenResponse,
   LoginTestTokenResponse,
   LoginRecoverPasswordData,
@@ -66,6 +67,7 @@ export class ItemsService {
         skip: data.skip,
         limit: data.limit,
       },
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -88,6 +90,7 @@ export class ItemsService {
       url: "/api/v1/items/",
       body: data.requestBody,
       mediaType: "application/json",
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -111,6 +114,7 @@ export class ItemsService {
       path: {
         id: data.id,
       },
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -135,6 +139,7 @@ export class ItemsService {
       path: {
         id: data.id,
       },
+      withCredentials: true,
       body: data.requestBody,
       mediaType: "application/json",
       errors: {
@@ -160,6 +165,7 @@ export class ItemsService {
       path: {
         id: data.id,
       },
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -194,6 +200,31 @@ export class LoginService {
     })
   }
 
+
+    /**
+   * Login Access Token
+   * OAuth2 compatible token login, get an access token for future requests
+   * @param data The data for the request.
+   * @param data.formData
+   * @returns Token Successful Response
+   * @throws ApiError
+   */
+    public static logout(): CancelablePromise<LogoutResponse> {
+      return __request(OpenAPI, {
+        method: "POST",
+        url: "/api/v1/logout",
+        headers:  {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        mediaType: "application/x-www-form-urlencoded",
+        withCredentials: true,
+        errors: {
+          422: "Validation Error",
+        },
+      })
+    }
+  
+
   /**
    * Test Token
    * Test access token
@@ -331,20 +362,13 @@ export class UsersService {
    * @returns UserPublic Successful Response
    * @throws ApiError
    */
-  // public static readUserMe(): CancelablePromise<UsersReadUserMeResponse> {
-  //   console.log("readUserMe")
-  //   let r = __request(OpenAPI, {
-  //     method: "GET",
-  //     url: "/api/v1/users/me",
-  //     withCredentials: true,
-  //   })
-  //   console.log(r.promise)
-  //   return __request(OpenAPI, {
-  //     method: "GET",
-  //     url: "/api/v1/users/me",
-  //     withCredentials: true,
-  //   })
-  // }
+  public static readUserMe(): CancelablePromise<UsersReadUserMeResponse> {
+    return __request(OpenAPI, {
+      method: "GET",
+      url: "/api/v1/users/me",
+      withCredentials: true,
+    })
+  }
 
   /**
    * Delete User Me
@@ -356,6 +380,7 @@ export class UsersService {
     return __request(OpenAPI, {
       method: "DELETE",
       url: "/api/v1/users/me",
+      withCredentials: true,
     })
   }
 
@@ -375,6 +400,7 @@ export class UsersService {
       url: "/api/v1/users/me",
       body: data.requestBody,
       mediaType: "application/json",
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -397,6 +423,7 @@ export class UsersService {
       url: "/api/v1/users/me/password",
       body: data.requestBody,
       mediaType: "application/json",
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -468,6 +495,7 @@ export class UsersService {
       },
       body: data.requestBody,
       mediaType: "application/json",
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -488,6 +516,7 @@ export class UsersService {
     return __request(OpenAPI, {
       method: "DELETE",
       url: "/api/v1/users/{user_id}",
+      withCredentials: true,
       path: {
         user_id: data.userId,
       },

frontend/src/client/types.gen.ts

@@ -141,6 +141,8 @@ export type LoginLoginAccessTokenData = {
 
 export type LoginLoginAccessTokenResponse = HTTPOnlyCookie
 
+export type LogoutResponse = HTTPOnlyCookie
+
 export type LoginTestTokenResponse = UserPublic
 
 export type LoginRecoverPasswordData = {

frontend/src/hooks/useAuth.ts

@@ -58,9 +58,15 @@ const useAuth = () => {
     },
   })
 
-  const logout = () => {
-    localStorage.removeItem("access_token")
-    navigate({ to: "/login" })
+  const logout = async () => {
+    try {
+      await LoginService.logout();
+      localStorage.removeItem("access_token");
+      navigate({ to: "/login" });
+    } catch (error) {
+      console.error("Logout failed:", error);
+      navigate({ to: "/login" });
+    }
   }
 
   return {