Creating a form that handles POSTs that works without wasm enabled

[steadygaze]

tldr I want to create a POST version of a simple form like The <Form> Component chapter of the Leptos book that still works when wasm is disabled.

Hello, I'm in the process of creating some forms to handle email login codes. The general flow is

1. User enters their email into the form and submits it.
2. We email the user a login code and ask the user for it.
3. The user enters the login code and submits it.
4. We log them in/give them a session cookie or redirect them to register, etc.

(POST is better than GET for this use case because I don't want to show the form inputs in the address bar, the user's browsing history, etc., and submitting the same inputs again isn't necessarily repeatable as the login code is temporary/ephemeral.)

I created a form (a couple of ActionForm components guarded by Show) that entirely relied on server actions to handle POSTing and showing the second stage of the form, but then I realized that this doesn't "gracefully degrade"/still work if wasm is disabled. When a user submits an ActionForm with wasm disabled, it does POST to the endpoint but also seems to just refresh the existing page. To work around this, I realized I could make the different stages live at separate URLs and have the previous stage POST to the next stage. In the case that wasm is disabled but we still use SSR, this would render on the server and still work perfectly. The problem is that a #[component] can only handle a GET. If I try posting to an endpoint that I set up the Leptos router for, it simply 404s. I looked at leptos_router and the leptos_actix integration, and also didn't see anything that looked relevant for enabling the POST verb for a component.

In the Leptos book, there is a good example:

async fn fetch_results() {
    // some async function to fetch our search results
}

#[component]
pub fn FormExample() -> impl IntoView {
    // reactive access to URL query strings
    let query = use_query_map();
    // search stored as ?q=
    let search = move || query.read().get("q").unwrap_or_default();
    // a resource driven by the search string
    let search_results = Resource::new(search, |_| fetch_results());

    view! {
        <Form method="GET" action="">
            <input type="search" name="q" value=search/>
            <input type="submit"/>
        </Form>
        <Transition fallback=move || ()>
            /* render search results */
            {todo!()}
        </Transition>
    }
}

As a user, I want to be able to just change method="GET" to method="POST" and use_query_map to use_params_map and have it work pretty much the same. Is this something the framework doesn't support at the moment, or am I wanting to do it the wrong way?

[benwis]

I would suggest redirecting in the server function after receiving the POST request, and include whatever data you want to show in the url/cookies/etc.

…

On Fri, Feb 14, 2025, at 4:39 PM, Steady Gaze wrote: *tldr* I want to create a POST version of a simple form like The <Form> Component <https://book.leptos.dev/router/20_form.html> chapter of the Leptos book that still works when wasm is disabled. Hello, I'm in the process of creating some forms to handle email login codes. The general flow is 1. User enters their email into the form and submits it. 2. We email the user a login code and ask the user for it. 3. The user enters the login code and submits it. 4. We log them in/give them a session cookie or redirect them to register, etc. (POST is better than GET for this use case because I don't want to show the form inputs in the address bar, the user's browsing history, etc., and submitting the same inputs again isn't necessarily repeatable as the login code is temporary/ephemeral.) I created a form (a couple of `ActionForm` components guarded by `Show`) that entirely relied on server actions to handle POSTing and showing the second stage of the form, but then I realized that this doesn't "gracefully degrade"/still work if wasm is disabled. When a user submits an `ActionForm` with wasm disabled, it does POST to the endpoint but also seems to just refresh the existing page. To work around this, I realized I could make the different stages live at separate URLs and have the previous stage POST to the next stage. In the case that wasm is disabled but we still use SSR, this would render on the server and still work perfectly. The problem is that a `#[component]` can only handle a GET. If I try posting to an endpoint that I set up the Leptos router for, it simply 404s. I looked at `leptos_router` and the `leptos_actix` integration, and also didn't see anything that looked relevant for enabling the POST verb for a component. In the Leptos book, there is a good example: async fn fetch_results() { // some async function to fetch our search results } #[component] pub fn FormExample() -> impl IntoView { // reactive access to URL query strings let query = use_query_map(); // search stored as ?q= let search = move || query.read().get("q").unwrap_or_default(); // a resource driven by the search string let search_results = Resource::new(search, |_| fetch_results()); view! { <Form method="GET" action=""> <input type="search" name="q" value=search/> <input type="submit"/> </Form> <Transition fallback=move || ()> /* render search results */ {todo!()} </Transition> } } As a user, I want to be able to just change `method="GET"` to `method="POST"` and `use_query_map` to `use_params_map` and have it work pretty much the same. Is this something the framework doesn't support at the moment, or am I wanting to do it the wrong way? — Reply to this email directly, view it on GitHub <#3609>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVBTCLJW7AYBIRR4QYTJWT2P2EDPAVCNFSM6AAAAABXFWY7NSVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXHE3DQMZYGA>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[steadygaze]

After thinking about it, I think I understand what you mean.

1. Use ActionForm pointed at a server action using the post method.
2. In the server action, set some cookies (which are not HTTP only to not have to do another roundtrip to check them), then redirect the user to the next stage.
3. When the next stage is rendering, we can read the cookies and use them to render in all cases (wasm, no wasm, SSR, etc.).

I guess it would work, but

• it feels much more convoluted to me compared to an equivalent GET form
• I think people would have a hard time thinking of doing it this way on their own, given a typical mental model of how POST forms are supposed to work, though maybe it's subjective

But thanks for your suggestion; it should be enough to unblock me. The one other more minor con I can think of is that it is one extra roundtrip when wasm is disabled.

With wasm enabled it is still one roundtrip:

1. POST server action
2. Receive new cookies and redirect
3. (Single page app/without making a new request) render the redirected page

Without wasm enabled it would be two roundtrips:

1. POST form
2. Receive new cookies and redirect
3. Request redirected page
4. Receive redirected page

In a "traditional"/web 1.0 app this would still be one roundtrip.

[steadygaze]

It's up to you, but I would consider making it so that components can directly handle POST requests (and potentially other verbs, if you can think of a use for them). I kind of assume it will be too difficult for me to do and touch too many Leptos internals, but if not, I would be willing to contribute something like this if I have the time.

[gbj]

This is something I've experimented with before, and the router has been built for a long time to support multiple methods/HTTP verbs. My experience has been that it's very rare that users actually do this (rare to the point that it looks like I forgot to add the methods prop when I rewrote the router in 0.7 and nobody has noticed over the 6 months or so between the beta releases and now). In general handling POST requests in a component-based framework like this ends up not being a particularly ergonomic pattern, because you end up writing a bunch of special-cased code that only runs when WASM is not enabled.

[steadygaze]

Just an update on this: I now understand this paradigm pretty well and have implemented it in https://github.com/steadygaze/questarch/blob/183559e0d805d712568daf34978ba936c538bdde/src/components/auth/email.rs#L41. One advantage of using only (POST + redirect) to submit the form and (GET + cookies) for the next stage that I didn't think of is that it makes the "confirm form resubmission" problem go away; you can freely refresh the page until the cookies expire after the configured duration.

I think it might be helpful to have an example of it in the examples, or maybe in a future "cookbook" section of the Leptos book. I can contribute either when I have time.

[benwis]

We do actually support POST requests to components, you’d have to exclude it from our automatic routing for Axum/Actix and then write your own route I would suggest looking at the todo_app examples, they use this pattern. With wasm disabled it returns a 302 redirect to the next page

…

On Fri, Feb 14, 2025, at 5:54 PM, Steady Gaze wrote: It's up to you, but I would consider making it so that components can directly handle POST requests (and potentially other verbs, if you can think of a use for them). I kind of assume it will be too difficult for me to do and touch too many Leptos internals, but if not, I would be willing to contribute something like this if I have the time. — Reply to this email directly, view it on GitHub <#3609 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVBTCPUYNG4DTBMCNGF4DD2P2M4FAVCNFSM6AAAAABXFWY7NSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMRQGY4DONQ>. You are receiving this because you commented.Message ID: ***@***.***>