Async Auth

from fasthtml.common import Div, fast_app, Button, Output, Script

js = """
// auth is a promise returned by our authentication system
const auth = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("super-dummy-token");
  }, 300);
});

// await the auth token and store it somewhere
let authToken = null;
auth.then((token) => {
    authToken = token
})

// gate htmx requests on the auth token
htmx.on("htmx:confirm", (e)=> {
    // if there is no auth token
    if(authToken == null) {
        // stop the regular request from being issued
        e.preventDefault() 
        // only issue it once the auth promise has resolved
        auth.then(() => e.detail.issueRequest()) 
    }
})

// add the auth token to the request as a header
htmx.on("htmx:configRequest", (e)=> {
    e.detail.headers["AUTH"] = authToken
})
"""

app, rt = fast_app(hdrs=[Script(js)])


@app.get
def page():
    return Div(cls="container grid")(
        Button("An htmx-Powered button", hx_post=example, hx_target="next output"), Output("--")
    )


@app.post
def example(request):
    return "Method call with token: " + request.headers["AUTH"]

Server Calls