NavBar to display login vs logout button depending on logged in status

Dash Python
1

I’m trying to implement a simple NavBar that has the login/logout button - if user is not logged in - for the login button to appear - but once the user is logged it - for the bar to display the logout button

How can I get the layout adjusted dynamically?

#APP LAYOUT
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    navbar_with_login,
    html.Div(id='page-content'),
])

#MAIN ROUTING
@app.callback(
        Output('page-content', 'children'),
        Input('url', 'pathname')
             )
def display_page(pathname):
    if pathname == '/':
        return layout_front_page
    if pathname == '/login':
        return login

#NAVBAR
navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Login", href="/login")),
		#How to dynamically display login vs logout here>
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="NavbarSimple",
    brand_href="#",
    color="primary",
    dark=True,
)
2

Assuming you are using something like current_user from flask, you could simply modify your callback display_page to also modify the children in dbc.NavbarSimple depending on the authentication status.

3

thank you!

ended up getting it to work like this:

header = dbc.Navbar(
    dbc.Container(
        [
            dbc.NavbarBrand("website.com", href="/"),
            dbc.Nav(
                [
                    dbc.NavItem(dbc.NavLink('login', id='user-action', href='Login')),
                ]
            )
        ],
    ),
)


@app.callback(
    [Output('user-action', 'children'),
     Output('user-action', 'href'),
     ],
    [Input('page-content', 'children')])
def user_logout(input1):
    if current_user.is_authenticated:
        return 'logout', '/logout'
    else:
        return 'login', '/login'