Looking for advice on securing a login

[dnl0037]

Hi there! For the past couple of weeks, I've been building a web app for school using ReactPy. Now, I need to implement a login feature. I've written this code, but I'm sure it's far from perfect. Could you give me some advice on how to make it secure? Thanks!

@component
def login():
    passw, set_passw = use_state("")
    is_in, set_is_in = use_state(False)

    def handle_click(event):
        # do some verification logic with the db
        if passw == "123":
            set_is_in(not is_in)
        else:
            print("invalid password")

    def handle_change(event):
        set_passw(event["target"]["value"])

    _login = html.div(
        html.button({"on_click": handle_click}, "Log in"),
        html.input({"on_change": handle_change}))

    return dashboard() if is_in else _login

[rmorshea]

This will work, but the issue is that once you refresh the page you'll have to log in again. We don't have a built-in solution for this yet, but we're working on it.

[Archmonger]

Right now, persistent auth is only possible using ReactPy Django's use_scope object alongside the scope login functions within Django channels.

[dnl0037]

Thank you for your responses. What if I do this?... This script has a button that "verifies" the input with the database, and if it is correct, it generates a link-button to the admin page. Perhaps I can then set the _id to a global variable to retain it. Do you think this would generate a security problem or some other issue?

@component 
def login():
    _id, set_id = use_state("")
    passw, set_passw = use_state("")
    is_in, set_is_in = use_state(False)
    label, set_label = use_state("")

    def verify(event):
        # do some verification logic with the db
        if _id == "Daniel" and passw == "123":
            set_is_in(not is_in)
        else:
            set_label("Incorrect credentials")

    def handle_id_change(event):
        set_id(event["target"]["value"])
        set_label("")

    def handle_pass_change(event):
        set_passw(event["target"]["value"])
        set_label("")

    entry_div = html.div({"className": "entry_div"},
                         html.label({"id": "entry_label"}, "Credentials verified"),
                         link(html.button({"id": "entry_button"}, "Enter"), to=f"/{RANDOM_COMBINATION}admin"))

    return html.div({"className": "container"},
                    html.h1({"className": "login_h1"}, "LOG IN"),
                    html.div({"className": "id_container"},
                             html.label({"id": "id_label"}, "User"),
                             html.input({"id": "id_input", "on_change": handle_id_change}),
                             ),
                    html.div({"className": "pass_container"},
                             html.label({"id": "pass_label"}, "Password"),
                             html.input({"type": "password", "id": "pass_input", "on_change": handle_pass_change})
                             ),
                    html.button({"id": "verify_button", "on_click": verify}, "Verify"),
                    entry_div if is_in else html.div({"id": "wrong_pass"}, label),
                    html.style(stylesheet_css))

[Archmonger]

Since ReactPy runs entirely on your server, storing a database ID within use_state is safe.

But using the client to verify authentication is not safe.

You'll want to perform that verification on the server.

[pharouhk]

Thank you for your responses. What if I do this?... This script has a button that "verifies" the input with the database, and if it is correct, it generates a link-button to the admin page. Perhaps I can then set the _id to a global variable to retain it. Do you think this would generate a security problem or some other issue?

@component 
def login():
    _id, set_id = use_state("")
    passw, set_passw = use_state("")
    is_in, set_is_in = use_state(False)
    label, set_label = use_state("")

    def verify(event):
        # do some verification logic with the db
        if _id == "Daniel" and passw == "123":
            set_is_in(not is_in)
        else:
            set_label("Incorrect credentials")

    def handle_id_change(event):
        set_id(event["target"]["value"])
        set_label("")

    def handle_pass_change(event):
        set_passw(event["target"]["value"])
        set_label("")

    entry_div = html.div({"className": "entry_div"},
                         html.label({"id": "entry_label"}, "Credentials verified"),
                         link(html.button({"id": "entry_button"}, "Enter"), to=f"/{RANDOM_COMBINATION}admin"))

    return html.div({"className": "container"},
                    html.h1({"className": "login_h1"}, "LOG IN"),
                    html.div({"className": "id_container"},
                             html.label({"id": "id_label"}, "User"),
                             html.input({"id": "id_input", "on_change": handle_id_change}),
                             ),
                    html.div({"className": "pass_container"},
                             html.label({"id": "pass_label"}, "Password"),
                             html.input({"type": "password", "id": "pass_input", "on_change": handle_pass_change})
                             ),
                    html.button({"id": "verify_button", "on_click": verify}, "Verify"),
                    entry_div if is_in else html.div({"id": "wrong_pass"}, label),
                    html.style(stylesheet_css))

Hi there! For the past couple of weeks, I've been building a web app for school using ReactPy. Now, I need to implement a login feature. I've written this code, but I'm sure it's far from perfect. Could you give me some advice on how to make it secure? Thanks!

@component
def login():
    passw, set_passw = use_state("")
    is_in, set_is_in = use_state(False)

    def handle_click(event):
        # do some verification logic with the db
        if passw == "123":
            set_is_in(not is_in)
        else:
            print("invalid password")

    def handle_change(event):
        set_passw(event["target"]["value"])

    _login = html.div(
        html.button({"on_click": handle_click}, "Log in"),
        html.input({"on_change": handle_change}))

    return dashboard() if is_in else _login

Hi @dnl0037 , thanks for sharing this high level code. However, I implemented practically the same thing just to test and it works but the dashboard page is rendered only momentarily (for a split second) on successful verification before the login page is rendered permanently. Was this your experience too? If so, how did you work around it?

[dnl0037]

Hi. Due to the complexity of authentication in web apps, I decided to migrate my reactpy script to Django. Here I implemented standard Django login functionality, while using the reactpy components for the dashboard. You can find more information in the Django-ReactPy documentation:
https://reactive-python.github.io/reactpy-django/3.5.1/learn/add-reactpy-to-a-django-project/

[pharouhk]

Thanks a lot! You have no idea how helpful this was. Thanks again

[Archmonger]

Here's some information to keep you guys in the loop.

I've been thinking about our architecture behind login support within reactpy-django. Right now, my recommendation is to completely avoid ReactPy for login and use Django's standard login instead (same suggestion as @dnl0037).

I don't want to completely redevelop an authentication stack from the ground up for ReactPy. So, I am currently am leaning towards leveraging the upcoming django_form component and having special integration for Django's AuthenticationForm.