Changing logout location

[Caracks]

I am writing to discuss a potential enhancement for the authentication and user experience in our Streamlit web application. Specifically, I have noticed that our current implementation restricts the placement of the logout button to only the "main" or "sidebar" locations, which may not align with certain design requirements.

Currently, the Streamlit-Authenticator library allows us to position the logout button using the following code snippet:

authenticator.logout('Logout', 'sidebar', key='unique_key')

However, we are looking to achieve a more flexible layout where we can place the logout button in a custom location, specifically within a header section. This customization would improve the overall user experience and align better with our application's design.

Here is an overview of our current setup:

Main Page Code:

if st.session_state["authentication_status"]:
    col1, col2, col3 = st.columns([10, 1, 0.01])

    with col1:
        st.write(' ')

    with col2:
        authenticator.logout('Logout', 'sidebar', key='unique_key')

    with col3:
        st.write(' ')

    with open("project_contents/cdp.css") as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

    with open("project_contents/nav.py") as f:
        exec(f.read())

Navbar Code (in nav.py):

nav_bar = """
<nav class="navbar fixed-top navbar-expand-lg bg-light">
  <!-- ... (other navbar content) -->
  <div>
    <a class="btn btn-secondary" href="#" onclick="logout()">Logout</a>
  </div>
</nav>
"""
# ... (other code)

# set streamlit header z-index
st.markdown('''
<style>
.stApp header {
    z-index: 0;
}
</style>
''', unsafe_allow_html=True)

As part of this enhancement request, we would like to insert the logout button within the header section, immediately after "Button 3" (as illustrated in the provided image ).

We believe that this enhancement will provide a seamless and cohesive user experience while retaining the benefits of the Streamlit-Authenticator library.

Could you please evaluate the feasibility of incorporating this customization into our application? We appreciate your consideration and expertise in this matter. If further clarification or technical details are needed, I would be more than happy to provide them.

Thank you for your time and support.

[mkhorasani]

Hey @Caracks, sure I will try to address this feature as it is indeed a necessity. Please stay tuned for a future release.

[mkhorasani]

Hi @Caracks, this feature has been implemented in release v0.3.1. You can now opt to implement the logout logic programmatically without rendering the logout button by passing location='unrendered' to the button. This way you can create your own button or way of implementing a logout.