WIP: use HTTP-only cookie for authentication instead of sending the token in plain text

Author: sinkozs

backend/app/api/deps.py

@@ -1,9 +1,9 @@
 from collections.abc import Generator
-from typing import Annotated
+from typing import Annotated, Optional
 
 import jwt
-from fastapi import Depends, HTTPException, status
-from fastapi.security import OAuth2PasswordBearer
+from fastapi import Depends, HTTPException, status, Cookie
+from fastapi.security import OAuth2PasswordBearer, APIKeyCookie
 from jwt.exceptions import InvalidTokenError
 from pydantic import ValidationError
 from sqlmodel import Session
@@ -16,7 +16,7 @@
 reusable_oauth2 = OAuth2PasswordBearer(
     tokenUrl=f"{settings.API_V1_STR}/login/access-token"
 )
-
+cookie_scheme = APIKeyCookie(name="http_only_auth_cookie")
 
 def get_db() -> Generator[Session, None, None]:
     with Session(engine) as session:
@@ -27,27 +27,42 @@ def get_db() -> Generator[Session, None, None]:
 TokenDep = Annotated[str, Depends(reusable_oauth2)]
 
 
-def get_current_user(session: SessionDep, token: TokenDep) -> User:
+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,
+            detail="Not authenticated",
+        )
+
     try:
         payload = jwt.decode(
-            token, settings.SECRET_KEY, algorithms=[security.ALGORITHM]
+            http_only_auth_cookie,
+            settings.SECRET_KEY,
+            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,
             detail="Could not validate credentials",
         )
+
     user = session.get(User, token_data.sub)
     if not user:
         raise HTTPException(status_code=404, detail="User not found")
     if not user.is_active:
         raise HTTPException(status_code=400, detail="Inactive user")
+
     return 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

@@ -2,9 +2,8 @@
 from typing import Annotated, Any
 
 from fastapi import APIRouter, Depends, HTTPException
-from fastapi.responses import HTMLResponse
+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.core import security
@@ -24,7 +23,7 @@
 @router.post("/login/access-token")
 def login_access_token(
     session: SessionDep, form_data: Annotated[OAuth2PasswordRequestForm, Depends()]
-) -> Token:
+) -> JSONResponse:
     """
     OAuth2 compatible token login, get an access token for future requests
     """
@@ -36,11 +35,12 @@ 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 Token(
-        access_token=security.create_access_token(
-            user.id, expires_delta=access_token_expires
-        )
-    )
+    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)

backend/app/api/routes/users.py

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

backend/app/core/security.py

@@ -1,14 +1,13 @@
 from datetime import datetime, timedelta, timezone
 from typing import Any
-
 import jwt
 from passlib.context import CryptContext
-
+from fastapi.responses import JSONResponse
+from fastapi import Response
 from app.core.config import settings
 
 pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
 
-
 ALGORITHM = "HS256"
 
 
@@ -19,6 +18,23 @@ 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:
+    access_token = create_access_token(subject, expires_delta)
+    response = JSONResponse(
+        content={"message": "Login successful"}
+    )
+    response.set_cookie(
+        key="http_only_auth_cookie",
+        value=access_token,
+        httponly=True,
+        max_age=3600,
+        expires=3600,
+        samesite="lax",
+        secure=False,
+    )
+    return response
+
+
 def verify_password(plain_password: str, hashed_password: str) -> bool:
     return pwd_context.verify(plain_password, hashed_password)
 

frontend/src/client/core/ApiRequestOptions.ts

@@ -18,4 +18,5 @@ export type ApiRequestOptions<T = unknown> = {
   readonly responseHeader?: string
   readonly responseTransformer?: (data: unknown) => Promise<T>
   readonly url: string
+  readonly withCredentials?: boolean 
 }

frontend/src/client/core/request.ts

@@ -132,13 +132,9 @@ export const getHeaders = async <T>(
   options: ApiRequestOptions<T>,
 ): Promise<Record<string, string>> => {
   const [token, username, password, additionalHeaders] = await Promise.all([
-    // @ts-ignore
     resolve(options, config.TOKEN),
-    // @ts-ignore
     resolve(options, config.USERNAME),
-    // @ts-ignore
     resolve(options, config.PASSWORD),
-    // @ts-ignore
     resolve(options, config.HEADERS),
   ])
 
@@ -178,6 +174,8 @@ export const getHeaders = async <T>(
   } else if (options.formData !== undefined) {
     if (options.mediaType) {
       headers["Content-Type"] = options.mediaType
+    } else {
+      headers["Content-Type"] = "application/x-www-form-urlencoded"
     }
   }
 
@@ -203,15 +201,41 @@ export const sendRequest = async <T>(
 ): Promise<AxiosResponse<T>> => {
   const controller = new AbortController()
 
+  // Properly handle form data for URL-encoded submissions
+  let data = body;
+  
+  // If we have formData but it's not a FormData instance,
+  // and Content-Type is application/x-www-form-urlencoded
+  if (options.formData && !isFormData(options.formData) && 
+      headers["Content-Type"] === "application/x-www-form-urlencoded") {
+    // Use URLSearchParams or axios's built-in handling for url-encoded data
+    const params = new URLSearchParams();
+    Object.entries(options.formData).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        params.append(key, String(value));
+      }
+    });
+    data = params;
+  } else {
+    data = body ?? formData;
+  }
+
   let requestConfig: AxiosRequestConfig = {
-    data: body ?? formData,
+    data: data,
     headers,
     method: options.method,
     signal: controller.signal,
     url,
-    withCredentials: config.WITH_CREDENTIALS,
+    withCredentials: options.withCredentials ?? config.WITH_CREDENTIALS,
   }
 
+  console.log("Request config:", JSON.stringify({
+    url: requestConfig.url,
+    method: requestConfig.method,
+    headers: requestConfig.headers,
+    withCredentials: requestConfig.withCredentials
+  }));
+
   onCancel(() => controller.abort())
 
   for (const fn of config.interceptors.request._fns) {
@@ -367,15 +391,14 @@ export const request = <T>(
         if (options.responseTransformer && isSuccess(response.status)) {
           transformedBody = await options.responseTransformer(responseBody)
         }
-
         const result: ApiResult = {
           url,
           ok: isSuccess(response.status),
           status: response.status,
           statusText: response.statusText,
           body: responseHeader ?? transformedBody,
         }
-
+        console.log(result)
         catchErrorCodes(options, result)
 
         resolve(result.body)

frontend/src/client/sdk.gen.ts

@@ -183,7 +183,11 @@ export class LoginService {
       method: "POST",
       url: "/api/v1/login/access-token",
       formData: data.formData,
+      headers:  {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
       mediaType: "application/x-www-form-urlencoded",
+      withCredentials: true,
       errors: {
         422: "Validation Error",
       },
@@ -200,6 +204,7 @@ export class LoginService {
     return __request(OpenAPI, {
       method: "POST",
       url: "/api/v1/login/test-token",
+      withCredentials: true,
     })
   }
 
@@ -326,12 +331,20 @@ export class UsersService {
    * @returns UserPublic Successful Response
    * @throws ApiError
    */
-  public static readUserMe(): CancelablePromise<UsersReadUserMeResponse> {
-    return __request(OpenAPI, {
-      method: "GET",
-      url: "/api/v1/users/me",
-    })
-  }
+  // 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,
+  //   })
+  // }
 
   /**
    * Delete User Me

frontend/src/client/types.gen.ts

@@ -49,6 +49,9 @@ export type Token = {
   token_type?: string
 }
 
+export type HTTPOnlyCookie = {
+  message: string
+}
 export type UpdatePassword = {
   current_password: string
   new_password: string
@@ -136,7 +139,7 @@ export type LoginLoginAccessTokenData = {
   formData: Body_login_login_access_token
 }
 
-export type LoginLoginAccessTokenResponse = Token
+export type LoginLoginAccessTokenResponse = HTTPOnlyCookie
 
 export type LoginTestTokenResponse = UserPublic