Help with authenticator form

[Alexandre_Choske]

Hi guys, I’m using this library to make an authenticator login system on my web app but also having a hard time to make it work as expected in layouts.

The library is import streamlit_authenticator as stauth.

When I use it inside a container, my form is pretty (as it becomes smaller). But the problem is that when I log in, the form is showing above the content of the screen for some seconds until I refresh it.

Logged in \/

When I use it alone without the container, it shows a very large form (ugly), but when logged successfully, it is not bugged.

This way when logged in, it is not bugged as above.

Any help would be appreciated

[ferdy]

What version of authenticator do you use?

[Alexandre_Choske]

Im using this.

streamlit_authenticator==0.2.3

[Alexandre_Choske]

For a matter of fact, I tried to update the lib.

But got the same result as well…

is now

and when loging in.

[ferdy]

First you have to call the login.

spacer_left, form, spacer_right = st.columns([1, 0.8, 1])
with form:
    authenticator.login(location='main')

Then check the status.

if st.session_state["authentication_status"]:

If authentication_status is True, you can now display the content. Also show the logout button.

if st.session_state["authentication_status"]:
    with form:
        authenticator.logout()
        st.write(f'Welcome *{st.session_state["name"]}*')

    # Your content will be here.
    my_content()

Sample full code

import streamlit as st
import streamlit_authenticator as stauth
import yaml
from yaml.loader import SafeLoader


st.set_page_config(layout='wide')


with open('config.yaml') as file:
    config = yaml.load(file, Loader=SafeLoader)

authenticator = stauth.Authenticate(
    config['credentials'],
    config['cookie']['name'],
    config['cookie']['key'],
    config['cookie']['expiry_days'],
    config['preauthorized']
)

spacer_left, form, spacer_right = st.columns([1, 0.8, 1])
with form:
    authenticator.login(location='main')

if st.session_state["authentication_status"]:
    with form:
        authenticator.logout()
        st.write(f'Welcome *{st.session_state["name"]}*')

    st.title('Some content')
elif st.session_state["authentication_status"] is False:
    st.error('Username/password is incorrect')
elif st.session_state["authentication_status"] is None:
    st.warning('Please enter your username and password')

Reference:
streamlit-authenticator

[Alexandre_Choske]

Thanks mate, I could get this working based on your answer.

Thank you so much.