FastAPI and Frontend Integration: How to Implement Frontend User Authentication?

Frontend and Backend Development
1

I’m developing a frontend application for the first time, and I’m utilizing FastAPI for the backend. I’ve set up JWT for security, ensuring that my backend endpoints are properly tested. Now, I’ve incorporated a small frontend app and need guidance on how to limit access to authenticated users using a valid token. In the backend, I’m restricting access to non-frontend endpoints using JWT with the following code:

current_user: User = Security(get_current_active_user, scopes=["user_read"])

For my frontend, I created an endpoint to retrieve customer data:

@customers_router.get("/customers", tags=["home"])
async def get_customers(request: Request, limit: int = 10):
    customer_records = DB.customer.find()
    customers = await customer_records.to_list(length=limit)
    processed_customers = list(map(adjust_customer_id, customers))
    return templates.TemplateResponse("customer.html", {"request": request, "customers": processed_customers})

I need help understanding how to ensure that users, with a valid token, can access the “/customers” page. What am I missing in my implementation?

2

To handle user auth on frontend, you basically need to store your JWT token safely in localStorage or cookies. Then, attach this token as Bearer in headers for every request to server. Make sure token is not exposed to JS easily, this way invalid token can’t access /customers.