Launch background task only after successful login

[fabiog1901]

Hello, I need some guidance please on how to resolve this little problem, I'm sure it's simple but can't see the obvious solution.

I have configured protected pages so that the content is shown only if a user is logged in: I setup the on_load event trigger on rx.page to check if the user is logged in, and that works great, no problem there.

Only AFTER a successful login, I want to start the background task State.fetch_all_clusters. I tried putting that in the on_mount event trigger, but on_mount gets fired concurrently, so what happens is, upon visiting the website /clusters, I see the list of clusters (as they have been fetched because the bg task fetch_all_clusters is active) and a split second after I'm redirected to /login as the user is not authenticated yet.

@rx.page(
    route="/clusters",
    title="Clusters",
    on_load=BaseState.check_login,
)
@template
def clusters():
    return rx.flex(
        rx.text(
            "Clusters",
            class_name="p-2 text-8xl font-semibold",
        ),
        rx.hstack(new_cluster_dialog(), direction="row-reverse", class_name="p-4"),
        rx.flex(clusters_table(), class_name="flex-1 flex-col overflow-y-scroll p-2"),
        class_name="flex-1 flex-col overflow-hidden",
        on_mount=State.fetch_all_clusters,
    )

This is the bg task

    @rx.event(background=True)
    async def fetch_all_clusters(self):
        if self.is_already_running:
            return
        async with self:
            self.is_already_running = True

        while True:
            if self.router.page.path != "/clusters":
                print("clusters.py: Stopping background task.")
                async with self:
                    self.is_already_running = False
                break

            async with self:
                self.clusters = db.get_all_clusters()
            await asyncio.sleep(5)

I am a bit confused by this behavior. Even if fetch_all_clusters weren't invoked, I'd still see the (empty) page for a split second before being redirected. It seems that on_load and on_mount events are processed concurrently, but I would imagine that on_load should be processed first, and on_mount only after on_load has completed.

How can I make sure that the login is checked first before any other operation takes place, such as mounting the website or firing off bg tasks please?

[larsblumberg]

Add a state variable like AuthState.is_logged_in: bool = False. Set to True only once the user is logged in. Reset state on logout.

To avoid a blank page, return something else than your page if user is not logged in:

def my_page() -> rx.Component:
    return rx.cond(
        ~AuthState.is_logged_in,
        rx.spinner(),
        rx.box(
            # your actual page content
        )
    )

In your page on_load function you can check the auth state as well and redirect to a login page if the user isn't authenticated yet. Otherwise start the background task, etc.

[fabiog1901]

Thanks Lars, that works well, I added the rx.cond to the template so that applies for every page!

Curious though, how do you start the bg task from my on_load? My understanding, bg tasks can be invoked only by return or yield.

[masenf]

your fetch_all_clusters should also be checking if the user is logged in and only return data if the user is authorized to view that data. any frontend checks to redirect to /login or similar should not be viewed as protection; the only data in your app that is truly protected would be data returned from a backend event handler or computed var that checks if the user is authenticated before returning the data.

on_load vs on_mount

on_load is coordinated by the backend during navigation events -- it is tied to the rx.State.is_hydrated variable and can only be processed if/when the backend is connected.

on_mount is triggered on the frontend when a component mounts, it can be fired very early on during page load, before the backend is even up.

So, I think it makes good sense to attach data loading events to the components that need to use that data via on_mount, but you need to be double checking the auth status in those data fetching events.

Either on_load or on_mount may take a background event (or list of events)

[masenf]

@fabiog1901 that's not protected at all. because you're taking the user as a parameter, anyone can pass whatever they want for that...

42/_event,["event", {"name": "reflex___state____state.state___base____app_state.delete_cluster", "payload": {"cluster_id": "2", "webuser": {"username": "admin", "role": "admin"}}, "handler": null, "token": "18c1bc1d-75de-44e4-a211-ff16f5b4414c", ...}]

you need to keep the authenticated user context on the server in a backend var, and only set it after you have validated the user credential. basically do not trust anything coming into an event handler unless you have validated it.

[fabiog1901]

Thanks for confirming Masen, that's what I was fearing.

I've tried though with the approach I believe you're suggesting but I'm clearly not getting it. I have tried with a rx.cond but not sure how to substitute the if in this case as I'm not returning rx components.

When added in this way, I cannot get the basic python str from the Var object BaseState.user.username. It comes up as

reflex___state____state__cp___state___base____base_state.user?.["username"] when I check how the db sees the parameter I sent. That confuses me as basestate is on the server (IIUC) and so is obviously the db module which I'm using to write to the database.

    @rx.event
    def delete_cluster(self, cluster_id: str):
        if BaseState.user.role == "admin":
            msg_id = db.delete_data(id=cluster_id, user=BaseState.user.username)
            return rx.toast.info(f"Cluster {msg_id.id} deleted.")
        else:
            return rx.window_alert("not authorized")

How would you code it? I have authenticated the user and its username, role, and other vars are stored in a variable in the BaseState

class BaseState(rx.State):
    """The base state for the app."""

    user: Optional[User] = None

It's an awesome framework but I struggle with certain aspects still

[fabiog1901]

Actually, I think I got it now @masenf . I reviewed the twitter example and now the State of the page inherits from BaseState.

That allows me to do use self.webuser

@rx.event
    def delete_cluster(self, cluster_id: str):
        db.insert_event_log(
            self.webuser.username,
            "DELETE_CLUSTER",
            {"cluster_id": cluster_id, "job_id": msg_id.id},
        )
        return rx.toast.info(f"Job {msg_id.id} requested.")

Thank you so much, I believe I'm in a better spot now!

[masenf]

I would suggest storing the user in a backend-only variable, so you can trust it's not getting accidentally modified by frontend requests, then expose it via computed var for frontend rendering. Something like this:

class BaseState(rx.State):
    """The base state for the app."""

    _user: Optional[User] = None

    @rx.var
    def user(self) -> User | None:
        return self._user


class DeleteState(rx.State):
    @rx.event
    async def delete_cluster(self, cluster_id: str):
        base_state = await self.get_state(BaseState)    # use get_state to get the instance associated with the current user
        if base_state._user.role == "admin":
            msg_id = db.delete_data(id=cluster_id, user=base_state._user.username)
            return rx.toast.info(f"Cluster {msg_id.id} deleted.")
        else:
            return rx.window_alert("not authorized")

[fabiog1901]

Thanks for the code snippet, @masenf !

Knowing the best practices in the rx framework around user Authentication (eg, via OIDC - okta, google sso, etc..) and Authorization (using JWT's embedded scopes for example) along with tangible examples is invaluable. I suggest this example of yours to be mentioned in the official docs. I very much appreciated the guidance here to get me past this obstacle 🙏