Noob question on FastAPI +HTMX/Express.JS

badrul · October 10, 2023, 4:09pm

Hi all,

Thought I’d get some advice on how to set up my project.
I’m aiming to have a FastAPI backend, coupled with an HTMX based front end being served out out of Express.JS.

I completed the FastAPI tutorial (FastAPI/Python Code Sample: Basic API Authorization) but now not sure where to turn to figure out a front end solution that allows the user to login then requests a page from the fastapi backend.

The express.js tutorial I found seemed very similar to the fastapi backend one, and both tutorial ended with saying “now create the font end by selecting from one of the following…” before proceeding to give me a choice of React, Vue, and Svelte tutorials.

In case it’s not clear I’d like to use Express.Js for basic front end functionality, and then use FastAPI for specific things such as a chat page/component

tyf · October 12, 2023, 11:01pm

Hey @badrul welcome to the community!

Have you had a chance to check out our Express web app sample? That should cover getting tokens for a user on login - At that point you’d need to pass a user’s access token as an Authorization header to your API. Something similar to what is shown here in our React sample:

github.com

auth0-samples/auth0-react-samples/blob/e74badf48ad9c84d123b626245282d3d5bdd0c26/Sample-01/src/views/ExternalApi.js#L57


      
            } catch (error) {
              setState({
                ...state,
                error: error.error,
              });
            }
          
            await callApi();
          };
          
          const callApi = async () => {
            try {
              const token = await getAccessTokenSilently();
          
              const response = await fetch(`${apiOrigin}/api/external`, {
                headers: {
                  Authorization: `Bearer ${token}`,
                },
              });
          
              const responseData = await response.json();

badrul · October 13, 2023, 3:38pm

Hi thanks for the link - is that a react example you gave?

In any case, I’ve gone through every example I could find and have feedback for Okta/Auth0 (not sure if you work for them).
Would be lovely to have the following two items:

A starter kit for Express JS using Typescript (I had to get ChatGPT to write it for me in the end)
The starter kit that exists for Next.JS/React but updated to use the new app router rather than page router, and also in typescript

I’m ok piecing it all together (am currently working my way through this which I found through Google search, although just realised there is also this)

but just having starter kits for the above that just run out the box (with just an .env file that needs to be configured) would be enormously useful I feel.

Additionally, I found that by navigating from the main website sometimes I’d end up here:

and sometime’ s I’d end up here:

It would be good if there was some cohesion between the two (even if it’s just a link from one pointing to the other)

tyf · October 20, 2023, 12:32am

Hey @badrul thanks for following up and the additional feedback If you’re up for it, I definitely recommend sharing this in a feedback request.

system · December 22, 2023, 11:36pm

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.