full-stack-fastapi-template icon indicating copy to clipboard operation
full-stack-fastapi-template copied to clipboard

Replace plaintext auth tokens with HttpOnly cookies

Open sinkozs opened this issue 7 months ago • 2 comments

Overview

Currently authentication tokens are sent in plain text format. This can be a security vulnerability because attackers can run malicious JS scripts in the browser to access the user's token and perform session hijacking. A recommended solution for this vulnerability is to send auth tokens in a Cookie with the HttpOnly flag set. HttpOnly cookies’ content is not accessible from JavaScript, preventing XSS attacks from stealing these tokens.

Backend changes:

  • We use the original create_access_token function to generate the JWT token but instead of returning it directly in the /login endpoint, we return a JSONResponse with an http-only cookie, which contains the token.
  • In the updated get_current_user function, now there is an APIKeyCookie dependency, but the way we decode the JWT token didn't change.
  • I implemented the /logout endpoint which deletes the cookie.
  • The cookie has a predefined expiration – after it expires, the user gets logged out automatically when they try to navigate to another page (which sends an authenticated request to the backend).
  • Updated the backend tests accordingly

Frontend changes:

  • In the frontend API calls, we should set the withCredentials=true parameter to include the cookies in the requests
  • Instead of sending the token in the headers, we should use the cookies request parameter
  • Instead of storing the access_token in localStorage (the token is not accessible from JS anymore), now we store the is_authenticated boolean value and use it to check authentication and remove it during logout

Before:

image

After:

image

sinkozs avatar Apr 30 '25 10:04 sinkozs