How to full screen the stauth login page

[twelsh37]

Hi All,

I have a streamlit app almost finished. one of my major snags is that when it first runs it should display the stauth login screen full page. When the user is authenticated then the full app should then be displayed for them.

I have the login auth working and it does indeed show the app to users when authenticated but my issue is the following

Whilst the login box is displayed so is the content of the app including the sidebar. How do I hide all this and only display the stauth page?

Here’s an image of what I’m talking about

It should only display the login page full screen until user authentication is completed and then it can show the sidebar and main page content.

Any ideas?

[randyzwitch]

Hi @twelsh37 -

Are you referring to a Streamlit component?

In general, if you’ve got all of your code within an if block, then it should only show when that condition is met. So:

if auth:
    f = st.sidebar.file_uploader()
else:
    st.error("Please login"

If you can post your full code snippet that displays your issue, I can make a more specific suggestion.

Best,
Randy

[twelsh37]

Morning Randy,

Thanks for getting back to me on this. I am quite new to all this and trying my first project with streamlit.
The app should open with just the login page full-screened. Not like the pic with the sidebar showing and the data beneath the login page.

My code is as follows. I have highlighted the section that is for login.

 Our imports
import os
import pandas as pd
import streamlit as st
import streamlit.components.v1 as components
import streamlit_authenticator as stauth
import plotly.express as px
from deta import Deta
from dotenv import load_dotenv
import openpyxl
#basic housekrrping for the App
st.set_page_config(page_title="Data Explorer", layout="wide")

# Load our environment files
load_dotenv(".env")

# Our Project Keys
DETA_KEY = os.getenv("DETA_KEY")

# Our Mapbox Token
MAPBOX_TOKEN = os.getenv("MAPBOX_TOKEN")

# Give mapbox token to Plotly Express
px.set_mapbox_access_token(MAPBOX_TOKEN)

# Initialise with a project key
deta = Deta(DETA_KEY)

# Create database connection
db = deta.Base("users_db")

# Our Main function
def main():
    # --- USER AUTHENTICATION SECTION ---#
    users = fetch_all_users()

    usernames = [user["key"] for user in users]
    names = [user["name"] for user in users]
    hashed_passwords = [user["password"] for user in users]

    # handle Authentication, cookie name, random key and cookie expiry time in days.
    # If you dont want passwordless reauthentication set it to 0 which will force you to login each time
    authenticator = stauth.Authenticate(
        names,
        usernames,
        hashed_passwords,
        "Data Explorer",
        "abcdef",
        cookie_expiry_days=0,
    )

<b><i>    # From Streamlit login form store our input in variables
    name, authentication_status, username = authenticator.login("main")
    # name, authentication_status, username = authenticator.login("Login", "main")</i></b>

<b><i>    if authentication_status == False:
        st.error("Username/password is incorrect")

    elif authentication_status == None:
        st.warning("Please enter your username and password")

    elif authentication_status == True:
        st.title('Data Explorer')
        st.markdown('---')</i></b>

    #---SIDEBAR ---#
    st.sidebar.title('Maps')

    # Functions
    # for each of the pages
    # Definitions for our selectbox in the sidebar

    def page_7wonders():
        st.sidebar.header("7 Wonders of the Ancient World")

    def page_africanparks():
        st.sidebar.header("A Selection of African Wildlife Parks")

    def page_cities():
        st.sidebar.header("Top 100 Most Populous Cities")

    pages = {
        "7 Wonders Of The World": page_7wonders,
        "African Game Parks": page_africanparks,
        "Most Populous Cities In The World": page_cities
    }

    # Selectbox for our sidebar
    selected_page = st.sidebar.selectbox("Select Page", pages.keys())
    pages[selected_page]()

    # Column setup
    #col1, col2, col3 = st.columns(3)
    col1, col2 = st.columns(2)

    # Sidebar setup
    st.sidebar.title('File Upload')
    upload_file = st.sidebar.file_uploader('Upload a file containing latitude and longitude data')

    # Check if file has been uploaded
    if upload_file is not None:
        df_upload = pd.read_excel(upload_file)
        st.map(df_upload)

    # Select box actions
    if selected_page == "7 Wondors Of The World":
        # with col1:
        #     df1 = pd.read_csv('7wonders.csv')
        #     st.title('The 7 Wonders Of The World')
        #     st.map(df1)
        with col1:
            df1 = pd.read_csv('7wonders.csv')
            st.header("Plotly interactive Chart")
            fig = px.scatter_mapbox(df1,
                                    lat='latitude',
                                    lon='longitude',
                                    color = df1['name'],
                                    # color='Maximum total people killed',
                                    # size='Maximum total people killed',
                                    #color_continuous_scale=px.colors.cyclical.IceFire,
                                    size_max=20,
                                    width=800,
                                    height=600
                                    )
            # Set the center point of the map and the starting zoom
            fig.update_mapboxes(center=dict(lat=35, lon=33),
                                zoom=3.5,
                                )
            fig.update_layout(showlegend=False)
            fig.update_traces(
                # This removed the colorbar
                marker_coloraxis=None
            )

            # Plot!
            st.plotly_chart(fig, use_container_width=True, width=800, height=600)
        with col2:
            st.header("Mapping Information")
            hide_dataframe_row_index = """
            <style>
            .row_heading.level0 {display:none}
            .blank {display:none}
            </style>
            """
            st.markdown(hide_dataframe_row_index, unsafe_allow_html=True)

            st.dataframe(df1)

    elif selected_page == "African Game Parks":
        with col1:
            df2 = pd.read_csv('africanparks.csv')
            st.title('A Selection of African Gaame Parks')
            st.map(df2)
        with col2:
            st.title("Mapping Information")
            st.write(df2.head(7))
        # with col3:
        #     st.title("Dataframe Info")
        #     st.write(df2.describe())

    elif selected_page == "Most Populous Cities In The World":
        with col1:
            df3 = pd.read_csv('worldcities.csv')
            st.title('100 Of The Worlds Most Populous Cities')
            st.map(df3)
        with col2:
            st.title("Mapping Information")
            st.write(df3.head(7))
        # with col3:
        #     st.title("Dataframe Info")
        #     st.write(df3.describe())

    # #--- Ticker Selector

[Nitya_Bhat]

@twelsh37

Whilst the login box is displayed so is the content of the app including the sidebar. How do I hide all this and only display the stauth page?

Any solution on this? I am facing the same issue. Although my code is under the if authentication_status== True statement. Till the dashboard loads up completely it show both login page and the dashboard

[twelsh37]

No,

I never worked it out