JWT in httponly cookie instead of HTTP header

[dokterbob]

This is an initial research ticket to pave the way towards improving the way we do authentication within chainlit (so between frontend and backend, not between backend and 3rd parties).

Steps

• Inventory of pre-existing issues
• Inventory of relevant backend/frontend code
• Inventory of relevant documentation of pre-existing situation
• Inventory of 3rd party and/or common solutions (can/should we use some library?)
• POC implementation
• Clear spec of feature
• Implementation of feature

Current approach

We're keeping the JWT in localStorage, sending it along for every API request which requires authentication.
This approach is used for all clients (frontend, copilot and the React client library).

Limits to current approach

XSS vulnerabilities

We have been made aware that the combination of having the token in localStorage, where JS can access it and being able to upload files to the same domain allows crafting of link able to steal user's authentication token and thus session and history.

This is in part caused by #1101.

Authentication for get_file()

We're adding links to files on the server. To authenticate requests for these files, whilst still allowing normal HTML tags (e.g. <img src="<url>" over src=URL.createObjectURL(blob) and fetch()), sending auth data in a httponly cookie will do the trick.

Issues

• Files not protected when auth is enabled #1101
• fix(security): add auth to /project/file get endpoint #1438
• Test and resolve issue with get_file and upload_file #1441

Caveats

Copilot auth works differently

Ref: https://docs.chainlit.io/deploy/copilot#authentication

Issues

• How to Handle AccessToken Authentication in Copilot #756
• Authentication Failure in Copilot Mode: Missing Headers #771

Cookie-based auth requires CSRF protection

Discussion

Alternative: streaming file download, setting src to blob

This approach seems more tricky -- but it's less 'stateful' and we don't need to change as much, server side.
Might be a lot of edge cases for all the different Elements we use though.

https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

HTTP only cookies

• https://pragmaticwebsecurity.com/articles/oauthoidc/localstorage-xss
• https://medium.com/@BenedekGagyi/storing-tokens-securely-what-about-xss-f59c08b06f1a

Possibly relevant issues

• Chainlit Authentication behind nginx reverse proxy #1139
• Auth re-think #1265
• Chainlit Copilot failures when behind a LB with cookie based sticky sessions #1279
• User Sessions shared across multiple users behind Proxy or VPN #1407
• Use cookies rather than query params for session id #1442
• Use persistable sessions instead of context #1513

Code

Client

Log-in callback

Handled client side, once user's login is validated server-side (see server code below), here:

1. chainlit/frontend/src/router.tsx

   Line 34 in 45866b2

   path: '/login/callback',

2. chainlit/frontend/src/pages/AuthCallback.tsx

   Line 8 in 45866b2

   export default function AuthCallback() {

React client useAuth()

chainlit/libs/react-client/src/api/hooks/auth.ts

Line 16 in 45866b2

export const useAuth = () => {

Server

httponly cookie should be set here:

1. chainlit/backend/chainlit/server.py

   Line 365 in 45866b2

   async def login(form_data: OAuth2PasswordRequestForm = Depends()):

2. chainlit/backend/chainlit/server.py

   Line 405 in 45866b2

   async def header_auth(request: Request):

And/or possibly here:

1. chainlit/backend/chainlit/server.py

   Line 477 in 45866b2

   async def oauth_callback(

2. chainlit/backend/chainlit/server.py

   Line 567 in 45866b2

   async def oauth_azure_hf_callback(

And should be read here:
https://github.com/Chainlit/chainlit/blob/main/backend/chainlit/auth.py

Where the JWT is created/validated here:

chainlit/backend/chainlit/auth.py

Line 51 in 45866b2

def create_jwt(data: User) -> str:

It should be removed here:

chainlit/backend/chainlit/server.py

Line 397 in 45866b2

async def logout(request: Request, response: Response):

Documentation

Current situation

• https://docs.chainlit.io/deploy/copilot#authentication
• https://fastapi.tiangolo.com/tutorial/security/simple-oauth2/
• https://fastapi.tiangolo.com/tutorial/security/first-steps/

Future situation

• https://fastapi.tiangolo.com/tutorial/cookie-params/
• https://fastapi.tiangolo.com/advanced/response-cookies/

Prior efforts

FastAPI/cookie based JWT

• https://stackoverflow.com/a/74637970/231332
• OAuth2: how to store the access_token in a cookie fastapi/fastapi#9151
• 🛠 Native JWT support fastapi/fastapi#3305

External libraries

Instead of 'rolling our own', perhaps we should consider getting rid of this code and replace it by one or more well-supported libraries.

• fastapi-jwt (well maintained, minimal, does what we want, doesn't do what we don't want, 100% code coverage)

• FastAPI Users

• FastAPI Sessions

• httpx-oauth (used by FastAPI Users)

• fastapi-nextauth-jtw

• auhtlib

• aioauth

[nethi]

@dokterbob I am assuming this is primarily for default frontend right ? I am assuming we will still have ability to get a chainlit access token and pass it in custom frontends.

Also, passing access token directly is also critical for copilot to work today