Basic Auth example code does not work

Dash Python
1

Dear colleagues,

I copy and pasted the example code in Add Authentication to your Dash App | Dash for Python Documentation | Plotly for the Basic Auth method, but when I try to login with username hello and password world, it does not work. It fails a few times and then the dialog box disappears and a “Login Required” HTML page appears.

1 Like
2

Hi,

I’ve just tested the guide tutorial and everything seems to work fine. Can you post your code so we can check if something is wrong?

Greeting,

Sempah

3

Thank you for the response. This is my code so far, you will notice that’s the exact same code from Example page:

import dash
import dash_auth
import dash_core_components as dcc
import dash_html_components as html
import plotly

# Keep this out of source code repository - save in a file or a database
VALID_USERNAME_PASSWORD_PAIRS = {
    'hello': 'world'
}

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

app.layout = html.Div([
    html.H1('Welcome to the app'),
    html.H3('You are successfully authorized'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['A', 'B']],
        value='A'
    ),
    dcc.Graph(id='graph')
], className='container')

@app.callback(
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('dropdown', 'value')])
def update_graph(dropdown_value):
    return {
        'layout': {
            'title': 'Graph of {}'.format(dropdown_value),
            'margin': {
                'l': 20,
                'b': 20,
                'r': 10,
                't': 60
            }
        },
        'data': [{'x': [1, 2, 3], 'y': [4, 1, 2]}]
    }

if __name__ == '__main__':
    app.run_server(debug=True)

And this is my requirements.txt

certifi==2019.9.11
chardet==3.0.4
Click==7.0
dash==1.4.1
dash-auth==1.2.0
dash-core-components==1.3.1
dash-daq==0.2.2
dash-html-components==1.0.1
dash-renderer==1.1.2
dash-table==4.4.1
Flask==1.1.1
Flask-Compress==1.4.0
Flask-SeaSurf==0.2.2
future==0.18.1
idna==2.8
itsdangerous==1.1.0
Jinja2==2.10.3
MarkupSafe==1.1.1
numpy==1.17.3
pandas==0.25.2
pkg-resources==0.0.0
plotly==4.2.1
python-dateutil==2.8.0
pytz==2019.3
requests==2.22.0
retrying==1.3.3
six==1.12.0
ua-parser==0.8.0
urllib3==1.25.6
Werkzeug==0.16.0
4

I too am having the same issue when using the sample code.

Did you ever find a resolution to this?

5

same problem.
’
import dash
import dash_auth
import dash_core_components as dcc
import dash_html_components as html
import plotly

#we need to keep usernames in a file or database
#source code repository.
VALID_USERNAME_PASSWORD_PAIRS = {
‘hello’: ‘world’
}

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name,external_stylesheets = external_stylesheets)

auth = dash_auth.BasicAuth(
app,
VALID_USERNAME_PASSWORD_PAIRS
)

app.layout = html.Div([
html.H1(‘Welcome to the app’),
html.H3(‘You are successfully authorized’),
dcc.Dropdown(
id = ‘dropdown’,
options = [{‘label’:i,‘value’:i} for i in [‘A’,‘B’]],
value = ‘A’
),
dcc.Graph(id=‘graph’)
],className = ‘container’)

@app.callback(
dash.dependencies.Output(‘graph’,‘figure’),
[dash.dependencies.Input(‘dropdown’,‘value’)])
def update_graph(dropdown_value):
return{
‘layout’ : {
‘title’ : ‘Graph of {}’.format(dropdown_value),
‘margin’ : {
‘l’ : 20,
‘b’ : 20,
‘r’ : 10,
‘t’ : 60
}
},
‘data’ : [{‘x’ : [1,2,3], ‘y’ : [4,1,2]}]
}

if name == ‘main’:
app.run_server(debug = True)’

6

I should really use markdown.

I had this problem earlier , what i did was i uninstalled dash 1.2.0 as used in the example.

and pip installed dash-auth == 1.3.2

7

Have the same issues when deployed on beanstalk… Works locally for some reason.
We are using 1.3.2

8

Tip for anyone trying to deploy to AWS EB

You will need to enable authentication on the web-server, as the headers come back as None and will cause abort of the login.

See this post: How do I deploy Dash to Elastic Beanstalk with Basic Authentication

9

im meant I unistalled *dash-auth 1.2.0

10

Hello ynjathi,

Thank you for that. It works perfectly now.

11

I still have issues. I have hosted it on RHEL and it does not work there. Works locally. My version of dash-auth is 1.3.2. Any suggestions would be greatly appretiated.

12

If anyone is having this issue specifically on certain hosting platforms (but not when running locally), this is what fixed it for me on my AWS EC2 instance using mod_wsgi and apache2:

In your /etc/apache2/sites-enabled/[your site].conf file, add the following line within the virtualhost tags

WSGIPassAuthorization On

Restart apache and it should work.

13

Hi hbhargava,
Thank you very much, that solved it for me. I’m running on Google Computer engine, Apache 2 and mod_wsgi. Thanks for sharing this! All the best!