How to navigate using starlette routing as described in docs?

[xiaogangzhu]

Hi,
I am trying to make a shiny app which requires user authentication. That means I should have a log in page and also several app pages for different kind of user.

I checked the document about routing of shiny app using starlette.
https://shiny.posit.co/py/docs/routing.html

Is there any way to add some button and navigate between each pages? For example if I click on on button it will direct me to another route? Any tutorials of the user authentication will be welcome. Thank you!

[xiaogangzhu]

any update？

[karangattu]

Here is a minimalistic authentication app I have demoed in the past

The app uses a reactive flag (authenticated) to decide which UI to show. Clicking the login or logout buttons changes this flag, which in turn automatically triggers the UI to update to the correct view.

[karangattu]

If you want the code for a Starlette application that serves two separate Shiny applications

# app.py
import uvicorn
from starlette.applications import Starlette
from starlette.responses import RedirectResponse
from starlette.routing import Mount, Route

from shiny import App, Session, reactive, render, ui

USERS = {"admin": "password123", "user": "mypass"}

login_app_ui = ui.page_fluid(
    ui.tags.head(
        ui.tags.script(
            """
        Shiny.addCustomMessageHandler('redirect', function(message) {
            window.location.href = message.url;
        });
        """
        )
    ),
    ui.div(
        {
            "style": "max-width: 400px; margin: 100px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
        },
        ui.h2("Login", {"style": "text-align: center; margin-bottom: 30px;"}),
        ui.input_text("username", "Username", placeholder="Enter username"),
        ui.input_password("password", "Password", placeholder="Enter password"),
        ui.div(
            {"style": "margin-top: 20px;"},
            ui.input_action_button(
                "login_btn", "Login", class_="btn-primary", style="width: 100%;"
            ),
        ),
        ui.output_ui("login_status_ui"),
    ),
)


def login_server(input, output, session: Session):
    # Create a reactive value to track login status
    login_status = reactive.Value("")

    @reactive.Effect
    @reactive.event(input.login_btn)
    async def handle_login():
        username = input.username()
        password = input.password()

        if USERS.get(username) == password:
            login_status.set("")
            await session.send_custom_message("redirect", {"url": "/dashboard"})
        else:
            login_status.set("❌ Invalid credentials.")

    @output
    @render.ui
    def login_status_ui():
        if login_status.get():
            return ui.p(
                login_status.get(),
                style="color: red; text-align: center; margin-top: 15px;",
            )
        else:
            return ui.div()


login_app = App(login_app_ui, login_server)


dashboard_app_ui = ui.page_fluid(
    ui.tags.head(
        ui.tags.script(
            """
        Shiny.addCustomMessageHandler('redirect', function(message) {
            window.location.href = message.url;
        });
        """
        )
    ),
    ui.div(
        {"style": "padding: 20px;"},
        ui.div(
            {
                "style": "display: flex; justify-content: space-between; align-items: center;"
            },
            ui.h1("Dashboard", {"style": "color: #007bff;"}),
            ui.input_action_button(
                "logout_btn", "Logout", class_="btn-outline-secondary"
            ),
        ),
        ui.hr(),
        ui.p("Welcome to the protected dashboard!"),
        ui.p(
            "You have successfully logged in.", style="color: green; font-weight: bold;"
        ),
        ui.div(
            {
                "style": "margin-top: 30px; padding: 15px; background-color: #f8f9fa; border-radius: 5px;"
            },
            ui.h4("Available Users:"),
            ui.tags.ul(
                ui.tags.li("Username: admin, Password: password123"),
                ui.tags.li("Username: user, Password: mypass"),
            ),
        ),
    ),
)


def dashboard_server(input, output, session: Session):
    @reactive.Effect
    @reactive.event(input.logout_btn)
    async def handle_logout():
        await session.send_custom_message("redirect", {"url": "/login"})


dashboard_app = App(dashboard_app_ui, dashboard_server)


routes = [
    Route("/", lambda req: RedirectResponse(url="/login")),
    Mount("/login", app=login_app),
    Mount("/dashboard", app=dashboard_app),
]

app = Starlette(routes=routes)

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

1. Install the required packages - pip install shiny starlette uvicorn
2. Run python app.py
3. Navigate to http://localhost:8000 to access the app

[karangattu]

Will add an example in py-shiny website