Integration of axum-gate with Leptos

[emirror-de]

I want to find an easy way to add route protection using axum-gate for a Leptos application, so I tried a few things to make this happen.

What already works pretty well is the recommended approach by using the leptos_axum::extract function as described in the book at server functions. You can find my example here.

However, I would love to get a possibility to protect the server functions or Leptos routes more convenient and without the boilerplate requirement on every server function. The boilerplate is always a possible failure in auth eg. by returning at the wrong point. What I am thinking of is a way to apply the Gate layer directly on the generated routes. I started trying it out, see the comments in this same example. I tried to split the routes into two components for the generation, see here. This attempt fails because Leptos is trying to add the user server function twice, because I am using leptos_routes twice.

It would be pretty nice to get a smooth solution for applying axum layer on parts of Leptos routes.

Questions:

1. Are there any ideas on how to do this in the current implementation of Leptos?
2. If not, would this be something interesting for Leptos to be added? And if yes, how could this look like?

[gbj]

You can avoid the runtime error due to duplicate routes by adding the server function paths to the "excluded routes" list while generating routes.

From the description, I'm a little unclear on whether you want all of the server function endpoints protected in the same way, or none of them, or some of them. The code below assumes you want all the server function endpoints protected, and only some of the application routes.

    let protected_routes = generate_route_list(ProtectedRoutesForRouteGeneration);
   
    // get a list of all of the server function endpoint paths
    let server_fn_paths = leptos::server_fn::axum::server_fn_paths()
        .map(|(path, _)| path.to_string())
        .collect::<Vec<_>>();
    // when generating unprotected routes, explicitly *exclude* server fn paths so there are no duplicates
    let unprotected_routes = generate_route_list_with_exclusions(
        UnprotectedRoutesForRouteGeneration,
        Some(server_fn_paths),
    );

    let app = Router::new()
        // .leptos_routes(&leptos_options, routes, {
        //     let leptos_options = leptos_options.clone();
        //     move || shell(leptos_options.clone())
        // })
        .leptos_routes(&leptos_options, protected_routes, {
            let leptos_options = leptos_options.clone();
            move || shell(leptos_options.clone())
        })
        .layer(admin_gate)
        .leptos_routes(&leptos_options, unprotected_routes, {
            let leptos_options = leptos_options.clone();
            move || shell(leptos_options.clone())
        })

[emirror-de]

Thanks for your fast reply! This definitely helped me understanding a bit more of the internals.

Sorry for the confusion, I am looking for an easy way to protect:

• some application routes, and
• some server fn endpoints.

Lets say this is the base application and server fn definitioins:

/// Contains the publicly available application routes
#[component]
pub fn PublicRoutes() -> impl IntoView {
    view! {
        <Route path=StaticSegment("") view=HomePage/>
    }
}

/// A publicly available server function.
#[server(endpoint = "public-api")]
pub fn publicly_available_api_fn() -> Result<(), ServerFnError> {
    Ok(())
}

/// Contains the routes protected by a layer.
#[component]
pub fn ProtectedRoutes() -> impl IntoView {
    view! {
        <Route path=StaticSegment("/protected") view=ProtectedView/>
    }
}

/// A server function that needs to be protected by a layer.
#[server(endpoint = "protected-user"]
pub fn protected_server_fn() -> Result<(), ServerFnError> {
    Ok(())
}

#[component]
pub fn App() -> impl IntoView {
    view! {
        <Router>
            <Routes fallback=|| "Page not found.".into_view()>
                <ProtectedRoutes />
                <PublicRoutes />
            </Routes>
        </Router>
    }
}

Now in the main function I would love to write something like this:

#[cfg(feature = "ssr")]
#[tokio::main]
async fn main() {
    let gate = ...; // the axum_gate::Gate layer that protects endpoints
    
    // generate the application routes
    let protected_app_routes = generate_application_route_list(ProtectedRoutes);
    let public_app_routes = generate_application_route_list(PublicRoutes);

    // generate the server fn routes
    let protected_server_fn_routes = generate_server_fn_route_list(vec!["protected-user"]);
    let public_server_fn_routes = generate_server_fn_route_list(vec!["public-api"]);
    // alternatively, may be more failsafe:
    // let protected_server_fn_routes = generate_server_fn_route_list(vec![path::to::protected_server_fn]);
    // let public_server_fn_routes = generate_server_fn_route_list(vec![path::to::publicly_available_api_fn]);

    let app = Router::new()
        .leptos_routes(&leptos_options, protected_app_routes, {
            let leptos_options = leptos_options.clone();
            move || shell(leptos_options.clone())
        })
        .leptos_server_routes(protected_server_fn_routes)
        .layer(gate) // Apply the layer to protect the routes
        .leptos_routes(&leptos_options, public_app_routes, {
            let leptos_options = leptos_options.clone();
            move || shell(leptos_options.clone())
        })
        .leptos_server_routes(public_server_fn_routes)
        .fallback(leptos_axum::file_and_error_handler(shell))
        .with_state(leptos_options);

    // Start server

}

How could this be realized? Is there already a solution available to this?

What I am doing in the example I linked in the question above is to wrap the eg ProtectedRoutes into a router component within the ProtectedRoutesForGeneration and use this for the generation. Then I put the ProtectedRoutes into the App to not have two Router components. But I find this a kind of noisy and confusing on the long run.
EDIT: And I did not solve the server fn split in there yet.

[gbj]

This seems worse to me than the approach you didn't like, which was using leptos_axum::extract() in individual server functions. If you use the extractor in individual server functions, then server functions that use it will automatically be protected, and those that don't won't; likewise, pages that call server functions that are protected will be protected, while pages that don't use any protected server functions will not be protected.

But I guess that's just a matter of taste. If you want to filter some server function routes, just filter the server_fn_paths in the example I gave so that you're only excluding the protected server function paths when generating the unprotected route list, rahter than excluding all of them.