Seeking Help with Login Authentication and Router Configuration Issues

[Daniel-Fei]

Question

1. I have integrated a page I developed with the login authentication example code from the nicegui official website into a single file. Here is the code:

from router import Router
from nicegui import Client, app, ui
from typing import Optional
from fastapi import Request
from fastapi.responses import RedirectResponse
from starlette.middleware.base import BaseHTTPMiddleware





# in reality users passwords would obviously need to be hashed
passwords = {'user1': 'pass1', 'user2': 'pass2'}
unrestricted_page_routes = {'/login'}





class AuthMiddleware(BaseHTTPMiddleware):
    """This middleware restricts access to all NiceGUI pages.

    It redirects the user to the login page if they are not authenticated.
    """

    async def dispatch(self, request: Request, call_next):
        if not app.storage.user.get('authenticated', False):
            if request.url.path in Client.page_routes.values() 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)





@ui.page('/')
def main_page() -> None:
    with ui.column().classes('absolute-center items-center'):
        ui.label(f'Hello {app.storage.user["username"]}!').classes('text-2xl')
        ui.button(on_click=lambda: (app.storage.user.clear(), ui.navigate.to('/login')), icon='logout') \
            .props('outline round')
            
            
            
            
            
@ui.page('/login')
def login() -> Optional[RedirectResponse]:
    def try_login() -> None:  # local function to avoid passing username and password as arguments
        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', '/'))  # go back to where the user wanted to go
        else:
            ui.notify('Wrong username or password', color='negative')

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

            
            



@ui.page('/{id}')  # All other pages are handled by the router but registered to show the SPA index page
def main(id: str | None = None):
    
    patients = [
        {'id': '21221', 'name':'Patient1', 'gender': 'male'},
        {'id': '11223', 'name':'Patient2', 'gender': 'female'},
        {'id': '31225', 'name':'Patient3', 'gender': 'male'}
        ]
    first_patient = patients[0]
    
    router = Router()
    
    with ui.header(elevated=False):
        with ui.tabs() as tabs:
            summary_tab = ui.tab('summary', label='Summary', icon='o_contact_emergency')
        
        complete_list = [i['id'] for i in patients]
        print(complete_list)
        ui.select(
            value=complete_list[0],  # Default selection.
            options=complete_list,  # Patient options for selection.
            on_change=lambda e: (router.open(f'/{e.value}'))  # Navigate on selection change.
        ).classes('w-40').style('width:222px;max-height:70px;').props('outlined input-class=text-white')
        
    for _, patient in enumerate(patients):
        @router.add(f"/{patient['id']}")
        def generate_patient_page(patient=patient):  # Use closure to fix the current loop variable value
            with ui.tab_panels(tabs, value=summary_tab):
                with ui.tab_panel(summary_tab):
                    app.add_static_files('/examples', 'one')
                    ui.label(f"Some NiceGUI Examples (for patient {patient['id']})").classes('text-h5')
                    ui.link('AI interface', '/examples/main.py')
                    ui.image('/examples/sample.jpg')

    router.frame()
    
    router.open(f"/{first_patient['id']}")








ui.run(storage_secret='IAmAGoldenSecret')

2. I am using the router code from the official NiceGUI example, which is:

from typing import Callable, Dict, Union
from nicegui import background_tasks, helpers, ui


class RouterFrame(ui.element, component='router_frame.js'):
    pass





class Router():

    def __init__(self) -> None:
        self.routes: Dict[str, Callable] = {}
        self.content: ui.element = None

    def add(self, path: str):
        def decorator(func: Callable):
            self.routes[path] = func
            return func
        return decorator

    def open(self, target: Union[Callable, str]) -> None:
        try:
            if isinstance(target, str):
                path = target
                builder = self.routes[target]
            else:
                path = {v: k for k, v in self.routes.items()}[target]
                builder = target

            async def build() -> None:
                with self.content:
                    ui.run_javascript(f'''
                        if (window.location.pathname !== "{path}") {{
                            history.pushState({{page: "{path}"}}, "", "{path}");
                        }}
                    ''')
                    result = builder()
                    if helpers.is_coroutine_function(builder):
                        await result
            self.content.clear()
            background_tasks.create(build())
        except KeyError as e:
            if str(e) == "'/'":
                # 对于特定的KeyError ('/')，选择忽略它或者进行特定的处理
                pass
            else:
                # 其他KeyError可以按需处理或重新抛出
                raise

    def frame(self) -> ui.element:
        self.content = RouterFrame().on('open', lambda e: self.open(e.args))
        return self.content

3. I am using the router_frame.js code from the official NiceGUI example, which is:

export default {
  template: "<div><slot></slot></div>",
  mounted() {
    window.addEventListener("popstate", (event) => {
      if (event.state?.page) {
        this.$emit("open", event.state.page);
      }
    });
    const connectInterval = setInterval(async () => {
      if (window.socket.id === undefined) return;
      this.$emit("open", window.location.pathname);
      clearInterval(connectInterval);
    }, 10);
  },
  props: {},
};

4. Overall, the code runs well, but there are three issues I've been unable to resolve and am seeking your help. Thank you very much in advance!
5. Issue 1:
   When I access http://127.0.0.1:8080 or http://127.0.0.1:8080/login, the page automatically redirects to http://127.0.0.1:8080/login. However, when I access other URLs, such as http://127.0.0.1:8080/21221 or http://127.0.0.1:8080/whatever, it bypasses the login page and directly displays the content of the "http://127.0.0.1:8080/21221" page (where "21221" is the first element in the router list). How to ensure that users must log in before accessing any other pages?
6. Issue 2:
   Besides the login issue, there is another problem. When I try to access a non-existent page, such as http://127.0.0.1:8080/whatever, the command line shows an error because it cannot find content related to that page, and the browser directly displays the content of the "http://127.0.0.1:8080/21221" page. Is there a way to handle non-existent pages without command line errors and have the browser show something like "404 Page Not Found" message instead?

The command line error looks like:

'/PageDoesntExist555'
Traceback (most recent call last):
  File "C:\Users\hero\anaconda3\Lib\site-packages\nicegui\events.py", line 407, in handle_event
    result = handler(arguments) if expects_arguments else handler()
             ^^^^^^^^^^^^^^^^^^
  File "C:\Users\Desktop\wonderfulProject\router.py", line 71, in <lambda>
    self.content = RouterFrame().on('open', lambda e: self.open(e.args))
                                                      ^^^^^^^^^^^^^^^^^
  File "C:\Users\Desktop\wonderfulProject\router.py", line 45, in open
    builder = self.routes[target]
              ~~~~~~~~~~~^^^^^^^^
KeyError: 'PageDoesntExist555'

7. Issue 3:
   Is there a way to automatically log out a user after a certain period of time (for example, 1 hour) following a successful login?

🌻 🌻 🌻 Thank you so much! 🌻 🌻 🌻

[rodja]

Hello @Daniel-Fei, thanks for reaching out. Packing three issues in one post makes each individual solution hard to track. I'll try my best to answer them in one sweep but try separate issues in the future.

1: due to the Router you can remove the AuthMiddleware (which normally checks the permissions). You need to do so inside the router class. This is something we should implement in the upcoming SPA API in #2811.
2: this also should be implemented in the Router.
3: Yes. You can start a timer when the user logs in; or even better: for each user remember an timestamp for "last activity" and then have one timer to check if an app.storage.user is "out of time". You can then simply set authenticated of the app.storage.user to False.

[Daniel-Fei]

Hello @rodja,

Thank you very much for your prompt reply.

I apologize for combining three questions into one post. My intention was to minimize the number of posts, but I did not consider that this might complicate things for future readers. I will make sure to separate issues into different posts in the future, and I appreciate you pointing this out.

With your guidance, I successfully resolved the first two issues. The program is now running well 😆😆😆

Additionally, regarding the third issue, if possible, could you teach me further how to record the last activity time of a user and how to set a timeout with ui.timer to automatically log out the user? I look forward to your further help, thank you very much!

[rodja]

Well... I can try to give you a rough sketch:

Use something like app.storage.user.update({'last_active': time()}) on successful login and in a timer on every user page. The auto-logout after 20 sec would be something global like this:

def auto_logout():
    for storage in app.storage._users.values():
        if not storage['authenticated']:
            continue
        deadline = time() - 20
        if storage['last_active'] < deadline:
            storage['authenticated'] = False

ui.timer(10, auto_logout)

[Daniel-Fei]

Many thanks, I have successfully resolved the issue with your help! I really enjoy using nicegui, thank you for all your efforts, and I look forward to its continuous improvement!