# How to Create Login Screen with Dash?

**URL:** <https://community.plotly.com/t/how-to-create-login-screen-with-dash/73638>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [March 16, 2023, 1:03pm UTC](https://community.plotly.com/t/how-to-create-login-screen-with-dash/73638 "2023-03-16T13:03:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![VitorSales](https://avatars.discourse-cdn.com/v4/letter/v/439d5e/32.png) [@VitorSales](https://community.plotly.com/u/VitorSales)\
**Post date:** [March 16, 2023, 1:03pm UTC](https://community.plotly.com/t/how-to-create-login-screen-with-dash/73638/1 "2023-03-16T13:03:58Z")

</div>

I need to make a login screen before I can navigate between pages in the application.

- The user must enter a name and password.
- The password must be hash.

Below I will pass the model of the application.

**dash\_app.py**

import dash  
import dash\_bootstrap\_components as dbc

estilos = [“[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css)”, “[https://fonts.googleapis.com/icon?family=Material+Icons](https://fonts.googleapis.com/icon?family=Material+Icons)”, dbc.themes.COSMO]

dbc\_css = “[https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.4/dbc.min.css](https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.4/dbc.min.css)”

dash\_app = dash.Dash( **name** , external\_stylesheets=estilos + [dbc\_css])

dash\_app.config[‘suppress\_callback\_exceptions’] = True

dash\_app.scripts.config.serve\_locally = True

server = dash\_app.server

# \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

**myindex.py**

from dash import html, dcc  
from dash.dependencies import Input, Output  
import dash\_bootstrap\_components as dbc  
from dash\_app import \*  
from components import navbar, tela1, tela2

content = html.Div(id=“page-content”)

dash\_app.layout = dbc.Container(children=[  
dbc.Row([  
dcc.Location(id=‘url’),  
navbar.layout  
]),  
dbc.Row([  
dbc.Col([  
content  
], md=12, style={‘background-color’: ‘#000000’, ‘height’: ‘100%’})  
])  
], fluid=True, style={“padding”: “0px”}, className=“dbc”)

@dash\_app.callback(Output(‘page-content’, ‘children’), [Input(‘url’, ‘pathname’)])  
def render\_page(pathname):

```
if pathname == '/' or pathname == '/tela1':
    return tela1.layout
        
if pathname == '/tela2':
    return tela2.layout 

```

if **name** == ‘ **main** ’:  
dash\_app.run\_server(port=8050, debug=True)

# \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

- components  
**navbar.py**

from dash import html  
import dash\_bootstrap\_components as dbc

layout = dbc.NavbarToggler([

```
          dbc.NavLink("tela1", href="/tela1", active="exact"),
          dbc.NavLink("tela2", href="/tela2", active="exact"),

```

], style={‘list-style’:‘none’, ‘display’: ‘flex’, ‘justify-content’: ‘space-around’, ‘align-items’: ‘center’,  
‘height’: ‘8vh’, ‘background-color’:‘#051D40’})

# \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

- components  
**tela1.py**

import dash\_bootstrap\_components as dbc  
from dash import html

layout = dbc.Col([  
dbc.Row([  
html.Legend(‘Tela1’, style={‘color’:‘white’}),  
]),  
], style={‘padding’:‘10px’})

# \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

- components  
**tela2.py**

import dash\_bootstrap\_components as dbc  
from dash import dcc, html

layout = dbc.Col([  
dbc.Row([  
html.Legend(‘Tela2’, style={‘color’:‘white’}),  
]),  
], style={‘padding’:‘10px’})

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [March 17, 2023, 9:08am UTC](https://community.plotly.com/t/how-to-create-login-screen-with-dash/73638/2 "2023-03-17T09:08:54Z")

</div>

Hi, did you use the forum search? We had this question come up a few times in the past.