Is it possible to stop the glitches in the loading of these two pages employing different keys in the st.experimental query params?

Using Streamlit
1

I have just finished creating a login/sign up page for my app. I used this with the st.experimental params in order to get specific urls. The issue is that on clicking a different tab menu, the tab does not indicate that it has changed though the page’s content does. I used different query params for the different pages which creates this problem. Below demonstrates this:

ezgif-1-45721f22a4

However, when I use the same key value for the query params - ‘authenticated’, it works fine without this glitch:

ezgif-1-0cb10716b3

Is there a way to resolve the first issue? I followed the example of this link

Code:

selected2 = option_menu(None, 
                        ["Sign up", "Sign in"], 
                  icons=['person-plus-fill', 'person-check-fill'], 
                        orientation="horizontal",
                  styles={
                      'container':{'background-color':'white'},
                      'nav-link-selected': {'background-color':'#30575F', 'font-family': 'Source Sans Pro, sans-serif'}
                  }, default_index=0, key='User_access_to_app')

if selected2 == 'Sign up':  
    
    query_params = st.experimental_get_query_params()
    # # We are setting the query params called authenticated. If this is stored in the query params variable, then get the first variable, else set it to false as there is no value for the key 'authenticated'
    sign_up_params = query_params["authenticated_new"][0] if "authenticated_new" in query_params else False
    # Update session state for the nav widget we will be using to set the query params. This is to prevent the app from re-running twice.
    st.session_state['authenticated_new'] = sign_up_params 
    
    st.experimental_set_query_params(authenticated_new=sign_up_params)
    st.write(st.session_state)
    
    Sign_up_container = st.container()

    Sign_up_container.title("Create an account")

    Sign_up_container.markdown("""
        <font color=gray> Ready to join the family? </font>
    """, unsafe_allow_html=True)
    
    Sign_up_container.button("Sign up with Google")
    
    Sign_up_container.write("")
    Sign_up_container.write("")
  
    already_logged_in = Sign_up_container.columns(5)
    already_logged_in[-1].write("Already a member? [*Log in*]()
    signup_form = Sign_up_container.form(key='sign_up', clear_on_submit=False)
    sign_up_col = signup_form.columns(2)
    username = sign_up_col[0].text_input('First Name')
    sign_up_col[-1].text_input('Last Name')
    signup_form.text_input("Email Address")
    signup_form.text_input("Password", type='password')
    signup_form.text_input("Confirm Password", type='password')
    
    signup_form.write("")
    signup_form.checkbox("""* TO CREATE AN ACCOUNT YOU NEED TO ACCEPT OUR TERMS AND CONDITIONS AND PRIVACY POICY""")
    terms_n_conditions = signup_form.columns(3)
    terms_n_conditions[-1].write("View our [*terms and conditions*]() and [*privacy policy*]()")

    submitted = signup_form.form_submit_button('CREATE ACCOUNT')
 
    if submitted:
        if username != "":
            
            auth_signed_up_params = st.experimental_get_query_params()
            st.session_state['authenticated'] = True
            auth_signed_up_params['authenticated'] = st.session_state['authenticated_new']
            st.experimental_set_query_params(**auth_signed_up_params)
            st.write(f"Logged in {username}")
        else:
            st.write("Failed to authenticate")
            auth_signed_up_params = st.experimental_get_query_params()
            st.session_state['authenticated'] = False
            auth_signed_up_params['authenticated_new'] = st.session_state['authenticated_new']
            st.experimental_set_query_params(**auth_signed_up_params)
     

elif selected2 == 'Sign in':
    #st.legacy_caching.clear_cache()
   # st.experimental_rerun()
    query_params_ = st.experimental_get_query_params()
    # # We are setting the query params called authenticated. If this is stored in the query params variable, then get the first variable, else set it to false as there is no value for the key 'authenticated'
    sign_in_params = query_params_["authenticated"][0] if "authenticated" in query_params_ else False
    # Update session state for the nav widget we will be using to set the query params. This is to prevent the app from re-running twice.
    st.session_state['authenticated'] = sign_in_params 
    st.experimental_set_query_params(authenticated=sign_in_params)


        
    st.write(st.session_state)
    
    Sign_in_container = st.container()
    Sign_in_container.title("Sign in")
    

    
    Sign_in_container.markdown("""
        <font color=gray> You know what to do </font>
    """, unsafe_allow_html=True)
    
    signin_form = Sign_in_container.form(key='sign_in', clear_on_submit=False)
    signin_form.text_input("Email Address")
    signin_form.text_input("Password", type='password')
    f_pass_cols = signin_form.columns(7)
    f_pass_cols[-1].write("[Forgot Password?](signin_form)")
    signin_form.write("")
    signin_form.write("")
    submitted_sign_in = signin_form.form_submit_button('SIGN IN')
    
    cols_choice_sign_up = Sign_in_container.columns(4)
    
    cols_choice_sign_up[-1].write("Don't have an account? [*Sign up*]()
    
    if submitted_sign_in:
        auth_signed_in_params = st.experimental_get_query_params()
        st.session_state['authenticated_new'] = True
        auth_signed_in_params['authenticated_new'] = st.session_state['authenticated_new']
        st.experimental_set_query_params(**auth_signed_in_params)
2

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.