Having Trouble Utilizing <ProtectedRoute />

[joeyame]

Over the weekend I was setting up a leptos project with user auth, and just got that working. I figured some routes, like admin panels, should be protected, but I can't see how to use the <ProtectedRoute /> in a meaningful way.

I made a server function that returns an Option and set up a resource that would call the function and return true/false depending on the state of the user enum. I then used this resource in the <ProtectedRoute>'s condition attribute. This kinda works. When I visit the page without being logged in, I get redirected to the login screen. But, when I'm logged in, it also redirects me to the login screen. I think what's going on is the route is rendering and redirecting before the server function finishes running.

So, my question is, how are protected routes supposed to be used? Is there a way to call the server function in the component only during SSR? That way the logged in user can directly navigate to the dashboard without being redirected away?

[gbj]

ProtectedRoute does not work well with async/resources because it only checks the condition once, IIRC. I'd suggest using regular routes, and wrapping the route Outlet in a Suspense that checks the resource and shows the Outlet or not, as in this example: https://book.leptos.dev/router/16_routes.html#conditional-routes

[joeyame]

Hey Greg, thanks for the quick reply.

I think I'm going to do something similar to that example with the <Redirect> node. That should fit my use case well 🤞

[joeyame]

Turns out mixing the <Redirect> element with the aforementioned <Outlet> method serves my use case well. I'm not sure that it's implemented well, but I'll share some snippets in case anyone googles with the same issues as me. Here is the breakdown:

1. I have a auth::get_current_user() server function which strips the password from the user model and passes it to the frontend.
2. A signal was created to trigger that server function
   let (user_update_ready, trigger_user) = create_signal(true);
3. A resource is attached to that signal and runs the server function any time the signal is written to.

   let user = create_resource(user_update_ready, move |_| async move {
       auth::get_current_user().await.unwrap()
   });

4. The login/register routes have a <Suspense><Show><Redirect> that redirects logged-in users to the dashboard

    <Route path="/auth" view=move || {
        view! {
            <Suspense>
                <Show when=move || user().is_some_and(|u| u.is_some())>
                    <Redirect path="/dashboard" />
                </Show>
            </Suspense>
            <Outlet />
        }
    }>
        <Route path="login" view=move || view! { <auth::login::LoginPage user_signal=trigger_user /> } />
        <Route path="register" view=auth::register::RegisterPage />
    </Route> // auth

5. The dashboard has the opposite setup, that redirects unauthenticated users to the login page

    <Route path="/dashboard" view=move || {
        view! {
            <Suspense>
                <Show when=move || user().is_some_and(|u| u.is_none())>
                    <Redirect path="/auth/login" />
                </Show>
            </Suspense>
            <Outlet />
        }
    }>
        <Route path="" view=dashboard::DashboardPage />
    </Route> // dashboard

6. The signal that triggers re-checking the user auth is then passed into the login, register and logout pages, where those <ActionForms> can trigger updates without reloading the page!

Overall a slick framework. I wouldn't be surprised if there were better ways to do this, but this is what I could get working for now.

[ozpv]

Just as a heads up for you and anyone else doing this, replace "is_some_and" with "is_none_or" in the /dashboard route. Otherwise if for some reason your resource is None, it will unlock the dashboard page. I'm taking a similar approach to yours but using an action with a () param instead of a signal + a resource. That way I can just do this to trigger an update:

let logged_in = create_action(|_: &()| async {
        some_verification_fn().await
});

// somewhere else down the line
logged_in.dispatch(());

and my implementation in <main>:

<Route path="/login" view=move || view! {
                        <Suspense fallback=|| view! { <p>"Loading \"/login\"..."</p> }>
                            // check if the user is logged in
                            <Show when=move || { logged_in.value().get().is_some_and(|res| res.is_ok()) }>
                                <Redirect path="/protected"/>
                            </Show>
                        </Suspense>
                        // otherwise
                        <Outlet/>
                    }>
    <Route path="" view=LoginForm ssr=SsrMode::InOrder/>
</Route>

<Route path="/protected" view=move || view! {
                        <Suspense fallback=|| view! { <p>"Loading \"/protected\"..."</p> }>
                            // when the user isn't logged in
                            <Show when=move || { logged_in.value().get().is_none_or(|res| res.is_err()) }>
                                <Redirect path="/login"/>
                            </Show>
                        </Suspense>
                        <Outlet/>
                    }>
    <Route path="" view=Protected/>
</Route>

My server function returns a Result<(), ServerFnError> and yours seems to return some Option, so ignore the .is_ok() and .is_err() change