How to trigger a page refresh? (modifying dash-flask-login)

Dash Python
1

Hi there

I’m experimenting with dash-flask-login (GitHub - RafaelMiquelino/dash-flask-login: Implementation of Flask-login on top of Dash.) and making some changes to it. The GitHub code has a a login page at ‘/’ and a ‘success’ page at ‘/success’, for when a valid login is entered.

I want to change this so that the login page is still at ‘/’, but when a valid login is entered, the success page is loaded at ‘/’.

How I’ve tried to achieve this is as follows:

login.py:

@app.callback(Output('urlLogin', 'pathname'),
          [Input('loginButton', 'n_clicks')],
          [State('usernameBox', 'value'),
           State('passwordBox', 'value')])
def sucess(n_clicks, username, password):
user = User.query.filter_by(username=username).first()
if user:
    if check_password_hash(user.password, password):
        login_user(user)
        return '/'
    else:
        pass
else:
    pass

I have changed return ‘/success’ to return ‘/’ i.e. stay on same page

In index.py, I’m handling page URL routing like so:

@app.callback(Output('pageContent', 'children'),
          [Input('url', 'pathname')])

def displayPage(pathname):
if pathname == ‘/’:
if current_user.is_authenticated:
return home.layout
else:
return login.layout

Where home.layout is my ‘success’ layout.

However, this isn’t working as expected. When a valid login is entered, the page just doesn’t change/refresh and it just stays like this:

21
212560×1600 348 KB

But if I refresh the page manually, I then see home.layout as I am now logged in.

Is my callback in login.py correct? It’s like I need to trigger a page refresh rather than returning ‘/’ (which the Url is at anyway) - is that possible?

2

I have this running on http://chris369.pythonanywhere.com now if it helps visualise my problem.

username = test, password = test1. On entering these details and clicking “login” nothing happens. But if you then click Refresh you will see the “login successful” layout.

I want this successful login layout to be shown automatically when the user clicks login. How can I achieve this?

index.py:

> app.layout = html.Div([
>     dcc.Location(id='url', refresh=False),
>     html.Div([
>         navBar,
>         html.Div(id='pageContent')
>     ])
> ], id='table-wrapper')
> 
> 
> 
> @app.callback(Output('pageContent', 'children'),
>               [Input('url', 'pathname')])
> def displayPage(pathname):
>     if pathname == '/':
>         if current_user.is_authenticated:
>             return home.layout
>         else:
>             return login.layout

login.py:

> 
> layout = dbc.Container([
>     html.Br(),
>     dbc.Container([
>         dcc.Location(id='urlLogin', refresh=True),
>         dbc.Container(
>             html.Img(
>                 src='/assets/dash-logo-stripe.svg',
>                 className='center'
>             ),
>         ),
>         dbc.Container([
>             dcc.Input(
>                 placeholder='Enter your username',
>                 type='text',
>                 id='usernameBox',
>                 className='form-control'
>             ),
>             html.Br(),
>             dcc.Input(
>                 placeholder='Enter your password',
>                 type='password',
>                 id='passwordBox',
>                 className='form-control'
>             ),
>             html.Br(),
>             html.Button(
>                 children='Login',
>                 n_clicks=0,
>                 type='submit',
>                 id='loginButton',
>                 className='btn btn-primary btn-lg'
>             ),
>             dbc.Container(id='outputState', children='')
>         ], className='form-group'),
>     ], className='jumbotron')
> ])
> 
> 
> @app.callback(Output('urlLogin', 'pathname'),
>               [Input('loginButton', 'n_clicks')],
>               [State('usernameBox', 'value'),
>                State('passwordBox', 'value')])
> def sucess(n_clicks, username, password):
>     user = User.query.filter_by(username=username).first()
>     if user:
>         if check_password_hash(user.password, password):
>             login_user(user)
>             return '/'
>         else:
>             pass
>     else:
>         pass
3

Have decided to just revert back to the example on GitHub and redirected the user to another pathname

4

Hi Chris, any update on this? Found your code on Github, nice work! I wanted to do the same thing you are trying, by googling I found that you already asked the question lol. If anybody knows a solution, that would be great!

5

Glad you like it :slight_smile: but unfortunately I did not find a solution for this and so stick with having my login view at “/“ and my logged in view at “/somethingelse”!

If you find (or anyone else has) a more elegant way to do this I’ll update the Github project :+1: