# Show and Tell: full authentication flow example, dash-auth-flow **URL:** \ **Category:** Dash Python\ **Tags:** show-and-tell\ **Created:** [August 18, 2019, 10:34pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415 "2019-08-18T22:34:33Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [August 18, 2019, 10:34pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/1 "2019-08-18T22:34:33Z")
[dash-auth-flow](https://github.com/russellromney/dash-auth-flow) Batteries-included authentication flow in [Dash](https://dash.plot.ly). This has landing pages and functions to run the entire authentication flow: - home - login - logout - register - forgot password - change password - view and edit profile details & password This uses `flask-login` on the backend, using some code from the very useful [dash-flask-login](https://github.com/RafaelMiquelino/dash-flask-login). Data is held in `users.db` . ```auto pip install pipenv pipenv install --ignore-pipfile pipenv shell python create_tables.py # test@test.com / test python app.py ``` [UI experience GIF](https://github.com/russellromney/dash-auth-flow/blob/master/example.gif) Example of logout screen: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/e29ee5e0276b26bd9258f7d38994b897259db725.png) Notes: - this uses MailJet as the email API. You need a [free MailJet API key](https://www.mailjet.com/email-api/) - your send-from email and API key/secret need to be entered in `config/keys.py` - if you want to use something else, change the `send_password_key` function in `utilities/auth.py` - add pages in `pages/` . - the app’s basic layout and routing happens in `app.py` - app is created and auth is built in `server.py` - config is in `utilities/config.txt` and `utilities/config.py` ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [August 19, 2019, 7:09pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/2 "2019-08-19T19:09:50Z")
I like what I made here, but the problem remains that each content page will start to load, with potentially sensitive information, regardless of whether a user is authenticated. So you have to repeatedly catch all the authentication errors in page callbacks, which is annoying. I’m going to figure out how to avoid this. ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [August 19, 2019, 10:22pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/3 "2019-08-19T22:22:06Z")
Example at [http://dash-auth-flow.herokuapp.com/login](http://dash-auth-flow.herokuapp.com/login) ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [February 18, 2020, 6:49pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/4 "2020-02-18T18:49:04Z")
An even simpler version of this is at [https://github.com/russellromney/basic-dash-auth-flow](https://github.com/russellromney/basic-dash-auth-flow) It just uses the Flask session object to validate or invalidate the user’s session, server-side. [![](https://raw.githubusercontent.com/russellromney/basic-dash-auth-flow/master/ui.gif) ](https://raw.githubusercontent.com/russellromney/basic-dash-auth-flow/master/ui.gif) ---
**Author:** ![Garik](https://avatars.discourse-cdn.com/v4/letter/g/7ba0ec/32.png) [@Garik](https://community.plotly.com/u/Garik)\ **Post date:** [May 15, 2020, 2:40pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/5 "2020-05-15T14:40:59Z")
hi, goog job. could you tell how can I implement this kind of stuff, in multi layout app, there is a nav bar, and on the nav bar are located hrefs to the layouts. ---
**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\ **Post date:** [May 17, 2020, 3:10pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/6 "2020-05-17T15:10:17Z")
Great work Russel!!! Congratulations ! I will try to implement it. ---
**Author:** ![kalt](https://avatars.discourse-cdn.com/v4/letter/k/b9e5f3/32.png) [@kalt](https://community.plotly.com/u/kalt)\ **Post date:** [June 9, 2020, 7:56am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/7 "2020-06-09T07:56:21Z")
Hey, really great work. Any idea on how to return the user ID into the app if the user is authenticated? ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [June 9, 2020, 2:08pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/8 "2020-06-09T14:08:00Z")
The user’s ID will be in the `current_user` Flask-Login object. See the user model definition in dash-auth-flow: [https://github.com/russellromney/dash-auth-flow/blob/df989323b4f253582773685afb7f2347256de6ce/utilities/auth.py#L22](https://github.com/russellromney/dash-auth-flow/blob/df989323b4f253582773685afb7f2347256de6ce/utilities/auth.py#L22) ```auto from flask_login import current_user # some code x = current_user.id ``` ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [June 9, 2020, 2:08pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/9 "2020-06-09T14:08:58Z")
The dash-auth-flow example implements all this with navbar, multi pages, etc. ---
**Author:** ![kalt](https://avatars.discourse-cdn.com/v4/letter/k/b9e5f3/32.png) [@kalt](https://community.plotly.com/u/kalt)\ **Post date:** [June 9, 2020, 3:31pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/10 "2020-06-09T15:31:32Z")
Hi, thank you for the fast reply. I am very new into dash and flask, so the dash\_auth\_flow looks very complicated tome at the moment. I tried to use the current\_user from the flask\_login in the simple example. I wanted to show the user name on the homepage if a user authentification was sucessful. So instead of writting html.H2(‘Homepage’) I tried html.H2(current\_user). However I always get the error message: AttributeError: ‘Flask’ object has no attribute ‘login\_manager’ Any idea what I am doing wrong? ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [June 9, 2020, 3:49pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/11 "2020-06-09T15:49:46Z")
Okay. Ignore the current\_user stuff for now as you are new to it (watch [https://www.youtube.com/watch?v=2dEM-s3mRLE](https://www.youtube.com/watch?v=2dEM-s3mRLE) for an overview and do the tutorial at [https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-v-user-logins](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-v-user-logins) for hands-on practice). Try this: put the user’s email into the Flask `session` variable. In the login page callback function, when the function does`session['authed']=True`, add the following code, replacing with the variable containing the user’s email: ```python session['email'] = the_user_email ``` Then in the home page, you can write a callback function that returns `session['email']` to the `children` property of the `html.H2` where you want it. Generally, you should learn about Flask and Dash a lot more before you use authentication. If you need authentication, you need to understand the framework well to make sure it is safe. ---
**Author:** ![Evenwiz](https://avatars.discourse-cdn.com/v4/letter/e/6a8cbe/32.png) [@Evenwiz](https://community.plotly.com/u/Evenwiz)\ **Post date:** [June 14, 2020, 6:54am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/12 "2020-06-14T06:54:59Z")
Great work here! May I know if the simple version of this is workable with a multipage app (I do not need to implement the full version since it is a basic app)? I tried to implement it but having issues preventing direct access when typing the full URL. ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [June 21, 2020, 12:33am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/13 "2020-06-21T00:33:48Z")
It works with a full app. In your routing function, make sure to check whether the user is authed before returning the page, and return the login page if not. ---
**Author:** ![Evenwiz](https://avatars.discourse-cdn.com/v4/letter/e/6a8cbe/32.png) [@Evenwiz](https://community.plotly.com/u/Evenwiz)\ **Post date:** [June 21, 2020, 1:36am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/14 "2020-06-21T01:36:17Z")
Thanks for the reply Russell. Do I need to add any codes to my multipage pages when doing this? Or this simplified version just has to make sure that the app.py callback is based on what you mentioned (meaning I only need to edit my multipage app app.py for this to work)? Appreciate a demo if you have the time for it and will certainly help new Dash users like me. ---
**Author:** ![nilaydeshmukh](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nilaydeshmukh](https://community.plotly.com/u/nilaydeshmukh)\ **Post date:** [September 23, 2020, 3:03am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/15 "2020-09-23T03:03:13Z")
Hey russellthehippo Can you guide me how we can deploy it on heroku, sines it required run create\_table.py firstly to create database but on heroku we can only give one file as our index or main file. ---
**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\ **Post date:** [September 23, 2020, 5:17am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/16 "2020-09-23T05:17:55Z")
Run create\_tables.py locally and save the sqlite3 database as part of the application that you upload to Heroku. That flat file that will work on Heroku. ---
**Author:** ![Oulx](https://avatars.discourse-cdn.com/v4/letter/o/f08c70/32.png) [@Oulx](https://community.plotly.com/u/Oulx)\ **Post date:** [November 25, 2020, 8:55pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/17 "2020-11-25T20:55:53Z")
instead of baking authentication and authorization inside the app itself, consider deploying an identity-aware proxy in front of your app, that would handle user authentication by integrating with your authentication provider (i.e. Google, Microsoft, Okta, Auth0) AND authorization (which users are allowed). There are open source, on-premise and cloud-managed solutions, depending on your deployment strategy. i.e. check out this example [https://github.com/gwrun/tutorials/tree/main/plotly-dash/docker-compose](https://github.com/gwrun/tutorials/tree/main/plotly-dash/docker-compose) ---
**Author:** ![nyck33](https://avatars.discourse-cdn.com/v4/letter/n/a8b319/32.png) [@nyck33](https://community.plotly.com/u/nyck33)\ **Post date:** [November 30, 2020, 12:17am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/18 "2020-11-30T00:17:26Z")
I just git cloned your repo and noticed that `config.txt` is in the main directory and not in folder `utilities`. Also, in Pycharm there is a read squiggly under `[database]` and `=` in `config.txt`. ---
**Author:** ![erixlie](https://avatars.discourse-cdn.com/v4/letter/e/65b543/32.png) [@erixlie](https://community.plotly.com/u/erixlie)\ **Post date:** [November 9, 2021, 6:37pm UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/19 "2021-11-09T18:37:08Z")
amazing example. Thank you very much for sharing!!! ---
**Author:** ![stu](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/stu/32/18439_2.png) [@stu](https://community.plotly.com/u/stu)\ **Post date:** [May 1, 2022, 4:42am UTC](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415/20 "2022-05-01T04:42:01Z")
Hi @russellthehippo, are you interested in adding multifactor authentication? Like Google Authenticator and others based on TOTP or HOTP. [Next page](https://community.plotly.com/t/show-and-tell-full-authentication-flow-example-dash-auth-flow/27415.md?page=2)