After authentication the events are executed on another user

[Mte90]

Question

So I developed an application, the login is based on https://github.com/zauberzeug/nicegui/blob/63a0881b109c588fd20b4b96244828a447907a40/examples/authentication/main.py using the middleware and app.storage.user.

The problem is after the 2 users login, when the second user press a button the event is executed on the first user.
This doesn't make so much sense, if I print on the middleware what is the user of the request is the second user but the action is happening on the first one. So it is like that on server side there are some issues understanding who is the right user browser/session.

I checked #85 and I see that now the data aren't shared.
#82 here instead there is a discussion about socket authentication but is old so I don't know how much is thrustable.

Now I can't share the whole app code but I am asking for suggestions about what to check for the issue. This happens locally but also on a server with nginx as reverse proxy.
I have the various pages on different python files that are loaded one after one before executing ui.run (after adding the middleware).
I don't use refreshable as we update some part of the ui after pressing the button and not everything.
I saw #3233 that is kind of similar of my issue.

An example:

class Dashboard():
    def __init__(self):
        self.create_page()

def create_page(self):
        @ui.page("/dashboard")
        async def page():
            progress = await self.load_data()
            if progress is False:
                return
            self.load_template()

            with ui.row().classes("relative w-full justify-center p-0 max-w-full"):
				with ui.label("aperti").classes(
				                    "flex flex-row-reverse justify-center items-center border-b-4 p-0 pr-2 pl-1 font-extrabold tracking-tighter text-lg text-secondary text-capitalize"
				                ) as self.view_title:
					self.myfunction() # I can call this function also in other part of the app that change self.view_title
[...]

Getting the user from app.storage.user on the action it is the right one but the user window is the wrong one, it is like it is keeping in memory that reference and not where the page is executed.

[Mte90]

Adding more information (instead of editing the first topic).

self.myfuction in my case is an async function so I am using await that doens't work with refreshable.

Also this example doesn't work

        for client in Client.instances.values():
            if not client.has_socket_connection:
                continue
            with client:
                if ui.context.client.tab_id == client.tab_id:
					ui.notify("hey")
                    await self.my_function()

I saw the various client instances in Client.instances but in this way I should use the right client but doens't seems as it just happens on the other window.
The notification is happening in both the instances.

[falkoschindler]

I think there's no way around boiling it down to a minimal reproducible code example.
Why is it important to provide a minimal reproducible example?

[Mte90]

The code is more smaller now. Thanks for the help!
I am getting crazy for the issue...

[rodja]

Thanks for sharing your example, @Mte90. It’s great that you’ve simplified the code. However, it still includes unnecessary complexity, making it harder for others to help.

A minimal reproducible example should include only the code needed to reproduce the issue—no abstractions like classes, multi-state components, or unrelated features. Extra code adds friction, leading to confusion or less engagement from those trying to assist.

Focusing on the essentials makes it easier to spot the problem, replicate it, and find a solution quickly. Could you simplify it further? Thanks!

[Mte90]

I reduced more the code but I don't think that is possible more. There is the code for the login page from the authentication examples and the page that has the issue after the login.
Pressing the button on the page change the content in the ohter user window, I left the list with vairous parameters to show that happens multiple times.
I left also the icon because I change also them so the issue is not just fixable changing the text but also the icon need a check.

If you just try the code you can see that in reality the code involved is just 20 lines.
I want you to help me so it is my interest to provide the best and minimal code but I don't think that for testing reasons is possible :-/

[falkoschindler]

Ok, but if you'd continue reducing code, you'd end up with this:

class Dashboard:
    def __init__(self):
        self.element = None

        @ui.page('/')
        async def page():
            self.element = ui.label('Hello')
            ui.button('Click me', on_click=lambda: self.element.set_text(self.element.text + '!'))

Dashboard()

As it turns out, this has nothing to do with authentication. But you're storing UI elements in a single Dashboard instance. So every page is accessing the same self.element.

[Mte90]

I was thinking that the issue was the authentication and not the class instance.
So a solution could be that self.element has an index to set the user id like self.element[user_id]['ui_element'].

[Mte90]

In that way works, it isn't the best option because keeps in memory stuff also when the user logged out.
I have to think what is the best way to save the reference for the UI elements between multiple users without so many troubles, I don't see in the docs something about it.

the modularization example I think that suffer of the same issue https://github.com/zauberzeug/nicegui/tree/main/examples/modularization

[falkoschindler]

Why do you need references to your UI elements? There are many other ways to keep the UI in sync across multiple clients. Here is a quick demonstration of binding, accessing all clients of a certain route, and updating parts of the UI using ui.refreshable or ui.refreshable_method:

class Dashboard:

    def __init__(self):
        self.active: bool = False
        self.message: str = ''

        @ui.page('/')
        async def page():
            ui.checkbox('Active').bind_value(self, 'active')
            ui.button('Notify', on_click=self.notify)
            ui.input('Message').on('keydown.enter', self.handle_message)
            self.display_message()

    def notify(self):
        for client in app.clients('/'):
            with client:
                ui.notify('Hey!')

    @ui.refreshable_method
    def display_message(self):
        ui.label(f'Message: {self.message} ({datetime.now()})')

    def handle_message(self):
        self.display_message.refresh()

Dashboard()

[Mte90]

In my case I have a dashboard with various elements that can be called from different methods, like modals and so on so I need to distinguish what is the user where I am doing the changes.
The reference approach is more like in PyQt or in the desktop world where you can get the object and do whatever you want and I think that simplify a lot when you have a complex UI.

[Mte90]

I see similar issues with mine https://www.reddit.com/r/nicegui/comments/1eq7nl9/access_page_builder_context_websocket_connection/

So mainly the issue is that with nicegui there isn't a way to reference items, like if I am able to store the parent with a function querySelector like in JS it would be more simple to find the element.
children method is a list and is not possible from that to find something with an id as example.
I think that #2811 it should fix those issues with the new decorators and the router but I am not sure.

[Mte90]

At the end with /dashboard/hashmd5 for dierent users I was able to have different instances that are unique per users.
It is a mix of different examples and other stuff to implement that system that reidrect the user to his dashboard.
Just sharing as reference/help for others:

#!/usr/bin/env python3
from fastapi import Request
from fastapi.responses import RedirectResponse
from starlette.middleware.base import BaseHTTPMiddleware
from nicegui import app, ui, Client
from nicegui.page import page
import urllib.parse
import hashlib

unrestricted_page_routes = {'/login'}

class AuthMiddleware(BaseHTTPMiddleware):

    async def dispatch(self, request: Request, call_next):
        if not app.storage.user.get('authenticated', False):
            if not request.url.path.startswith('/_nicegui') and request.url.path not in unrestricted_page_routes:
                app.storage.user['referrer_path'] = request.url.path  # remember where the user wanted to go
                return RedirectResponse('/login')
        return await call_next(request)

app.add_middleware(AuthMiddleware)

@app.exception_handler(404)
async def exception_handler_404(request: Request, exception: Exception):
    with Client(page(''), request=request) as client:
        # Check if the main page exist for the endpoint so if the user point to a non-existant anymore page automatically get redirect to right one
        path = urllib.parse.urlparse(str(request.url)).path.split('/')[1]
        for route in app.router.routes:
            if f'/{path}' == route.path:
                ui.navigate.to(f'/{path}')
                return client.build_response(request, 200)
        ui.label('Sorry, this page does not exist')
    return client.build_response(request, 404)

def hash_user():
    user = app.storage.user.get('username', False)[:15]
    return hashlib.md5(user.encode()).hexdigest()

class Dashboard():
    def __init__(self):
        self.create()

    def create(self):
        @ui.page('/dashboard')
        async def page():
            Dashboard_Single(hash_user())
            ui.navigate.to(f'/dashboard/{hash_user()}')

class Dashboard_Single():
    def __init__(self, user):
        self.element = {}
        self.user = user
        self.create_page()

    def create_page(self):
        @ui.page(f'/dashboard/{self.user}')
        async def page():
            if self.user != self.user:
                ui.navigate.to(f'/dashboard/{self.user}')
                return
            with ui.row():
                self.element['view_title'] = ui.label("aperti")
                with ui.row():
                    buttons = [
                        {"label": "open"},
                        {"label": "on_going"},
                        {"label": "completed"},
                        {"label": "archived"},
                    ]
                    with ui.button_group().props("push"):
                        for button in buttons:
                            ui.button(
                                button["label"],
                                on_click=lambda b=button: self.filter_button(b["label"]),
                            ).props("size=sm push stack")

    async def filter_button(self, status):
        self.element['view_title'].text = status

@ui.page('/login')
def login():
    def try_login() -> None:
        passwords = {'user1': 'pass', 'user2': 'pass', 'user3': 'pass'}
        if passwords.get(username.value) == password.value:
            app.storage.user.update({'username': username.value, 'authenticated': True})
            ui.navigate.to(app.storage.user.get('referrer_path', '/dashboard'))
        else:
            ui.notify('Wrong username or password', color='negative')

    if app.storage.user.get('authenticated', False):
        return RedirectResponse('/dashboard')
    with ui.card().classes('absolute-center'):
        username = ui.input('Username')
        password = ui.input('Password', password=True, password_toggle_button=True)
        ui.button('Log in', on_click=try_login)
    return None

Dashboard()

if __name__ in {'__main__', '__mp_main__'}:
    ui.run(storage_secret='THIS_NEEDS_TO_BE_CHANGED')