FastAPI login, question on setting cookie

[CJRockball]

Hi Sam,

I have been learning how to set up a basic database and an interface with Fastapi. I've looked through a couple of different examples, including yours "How to create a FastAPI Web App with authentication".

I got it up and running, including login, with Openapi. Then I tried adding a simple web ui, also with Fastapi. The problemI ran into was setting the jwt cookie in the browser, during login. I found a lot of examples where they created a response from a dict and the did set.cookie and returned the response. This worked well for Openapi, but not for a browser. Then I tried your example and it worked perfectly (It sounds like a quick fix, but this took me working on and off on the problem for two weeks).

I still have some questions though.

1. Your example (code below) sends the web page as a response to the login function. Can you elaborate on why you do this? I found no other examples doing this.
2. Why do you call the login function as a function and not through the web link with requests or httpx?

response = RedirectResponse("/", status.HTTP_302_FOUND)
login_for_access_token(response=response, form_data=form)
form.__dict__.update(msg="Login Successful!")
console.log("[green]Login successful!!!!")
return response

Best regards,
Patrick

[SamEdwardes]

Thanks for the question Patrick! I will get back to you in the next couple of days.

[SamEdwardes]

Hi Patrick - I will try to provide some more details. For anyone else reading this, here is a link to the blog post in question: https://samedwardes.com/2022/04/14/fastapi-webapp-with-auth.

In general, here is what happens:

• User presses login button.
• A POST request is made to /auth/login (the login_post function).
• That function calls login_for_access_token
• In login_for_access_token, if the access token is successfully created, it is added to the response as a cookie:

# Set an HttpOnly cookie in the response. `httponly=True` prevents 
    # JavaScript from reading the cookie.
    response.set_cookie(
        key=settings.COOKIE_NAME, 
        value=f"Bearer {access_token}", 
        httponly=True
    ) 

• This cookie is included in the RedirectResponse that is returned by the login_post function.
• This cookie will be included in future requests from the browser to your API, hence proving you are authenticated.

Hopefully this helps explain. When playing around with the app I suggest haveing dev tools open in your browser. In the network tab you can see the headers and cookies that are part of each request.

In the application tab you can see any cookies that are set.

[SamEdwardes]

To more directly answer your second question:

Why do you call the login function as a function and not through the web link with requests or httpx?

That is a good point... maybe it does not need to be an endpoint and a function. It might be the case that the endpoint is required when you are using the built in OpenAPI docs login mechanism.