How to hide the sidebar in multipages using streamlit_authentication package. Critical

Custom Components
1

Hi!

I am trying to implement the component streamlit_authenticator from
@mkhorasani in my multipage app. I don´t find the way of hiding the sidebar that automatically appears with the pages. That´s something that doesn´t seem to be secure from the external user, and I would like to hide it (not just certify that the user cannot go in if it´s not loged in). Any ideas on how to do so?

2

Hi @SERGIO_AYALA_MINANO, thank you for reaching out. Can you please share your source code?

3

Sure! Here you have my main.py:

# home.py
import streamlit as st
from services.database_service import get_credentials, get_cookie_info, get_preauthorized_emails
from streamlit_authenticator import Authenticate

# Set page configuration
st.set_page_config(page_title="Lubaq App", layout="wide")

def main():
    # Load authenticator configuration
    credentials = get_credentials()
    cookie_info = get_cookie_info()
    preauthorized = get_preauthorized_emails()

    # Initialize Streamlit authenticator
    authenticator = Authenticate(
        credentials,
        cookie_info['name'],
        cookie_info['key'],
        cookie_info['expiry_days'],
        preauthorized
    )

    # Attempt to authenticate the user
    name, authentication_status, username = authenticator.login('Login', 'main')

    if authentication_status:
        # If user is authenticated, show the app content
        # Here you can call your page display function or write your page content
        # For example:
        st.title(f"Welcome {name}!")
        # You could have buttons or other logic to navigate between pages
    elif authentication_status == False:
        st.error("Username/password is incorrect")
    elif authentication_status == None:
        st.warning("Please enter your username and password")

if __name__ == "__main__":
    main()

And then I have a folder called pages, with several pages inside as page_name.py each of them. Although I do the stop per each page, here the example:

# studies_list.py

import streamlit as st
import pandas as pd
from datetime import datetime

# Assume this function checks if the user is authenticated
def is_user_authenticated():
    # This should check an actual condition in your app's session state or other state mechanism
    return st.session_state.get("authentication_status", False)

# Check if user is authenticated at the very top before any page logic
if not is_user_authenticated():
    st.error("You must be logged in to view this page.")
    st.stop()  # Prevents the execution of the rest of the script

# The rest of your studies list page logic here since the user is authenticated
def display_studies_list_page():
    # Mock data in the form of a DataFrame (replace this with your actual data source)
    data = {
        # ... your data structure ...
    }

    studies = pd.DataFrame(data)

    # UI elements and DataFrame display
    st.title("Scheduled Studies List")
    # ... rest of your UI elements and logic for displaying studies ...

# Main logic
if __name__ == "__main__":
    display_studies_list_page()

The problem is that initially, the sidebar appears, and even if I check the status of the session_state and stop the page if the user is not logged in, I still see the sidebar with the page names. I would like to handle it in a safer way, that does not appear secure (from the outside). Here what I see:

image
image1895×712 20.8 KB

4

You could stop the other pages from loading if the user is not authorized;

# import libraries here

if not st.session_state.authentication_status:
    st.info('Please Login from the Home page and try again.')
    st.stop()

# rest of the operations

As proposed in this topic; How to manage a multipage app with user authentication - :balloon: Using Streamlit - Streamlit

Other options;
I found this library which supposedly has multipage-authentification (never used it);
bharath5673/streamlit-multipage-authentication (github.com)

I personally use multi_pages;
New package st-pages: change page names and icons in sidebar without changing filenames - :jigsaw: Custom Components - Streamlit

As I feel its more friendly towards the sidebar menu aswell with section, indentation etc.

5

Just to let you know, Streamlit 1.30.0 just introduced a configuration option to hide the left navigation. :slight_smile: client.showSidebarNavigation

6

We were waiting for that, just at the right time!!! many thanks :slight_smile:

7

Good! So just whoever needs it here you have how I sorted it out:

  1. Add the streamlit_authenticator in your main.py

  2. Include in the config.toml the:

[browser]
showSidebarNavigation = false
  1. Run the streamlit app with the command to hide the sideBar

--client.showSidebarNavigation=False

As I have a Dockerfile, I included it in the command:

CMD ["streamlit", "run", "--client.showSidebarNavigation=False", "app/home.py"]

  1. Handle the Side bar with st.sidebar once the user is logged in!

I would have loved to use st_pages, but I get errors. Not sure if it is related with the new version… @mathcatsand
[blackary/st_pages: An experimental version of Streamlit Multi-Page Apps (github.com)](https://Multi-Page Apps: st-pages)