New Component: streamlit-login-auth-ui, connect your streamlit application to a pre-built and secure Login/ Sign-Up page

🧩 Custom Components
,
1

Hi folks! :smile:

I have created a new library which enables the developers to connect their application to a secure login/ sign-up page.

You can customize specific parts of the page without any hassle!

The library grants users an option to reset their password, users can click on Forgot Password? after which an Email is triggered containing a temporary, randomly generated password.

The library also sets encrypted cookies to remember and automatically authenticate the users without password.
The users can logout using the Logout button.

The best part is, it is purely plug and play. No DB support needed.

Checkout this video which highlights all the features of the library: streamlit_login_auth_ui_features_video.mp4 - Google Drive

Link to the Github Repository: GitHub - GauriSP10/streamlit_login_auth_ui: It lets you connect your streamlit application to a pre-built and secure Login/ Sign-Up page.

Try the Login/ Sign-Up feature on a sample application deployed on Heroku: https://streamlit-login-auth-ui.herokuapp.com/

Checkout a working Demo of the Library: streamlit_login_auth_ui_demo.mp4 - Google Drive

The UI:

login_streamlit
login_streamlit1920×884 81.3 KB

Installation

pip install streamlit-login-auth-ui

How to implement the library?

To import the library, just paste this at the starting of the code:

from streamlit_login_auth_ui.widgets import __login__

All you need to do is create an object for the __login__ class and pass the following parameters:

  1. auth_token : The unique authorization token received from - #1 Transactional Email API for Developers
  2. company_name : This is the name of the person/ organization which will send the password reset email.
  3. width : Width of the animation on the login page.
  4. height : Height of the animation on the login page.
  5. logout_button_name : The logout button name.
  6. hide_menu_bool : Pass True if the streamlit menu should be hidden.
  7. hide_footer_bool : Pass True if the ‘made with streamlit’ footer should be hidden.
  8. lottie_url : The lottie animation you would like to use on the login page. Explore animations at - Featured animations from our community

Mandatory Arguments:

  • auth_token
  • company_name
  • width
  • height

Non Mandatory Arguments:

After doing that, just call the build_login_ui() function using the object you just created and store the return value in a variable.

Example:

import streamlit as st
from streamlit_login_auth_ui.widgets import __login__

__login__obj = __login__(auth_token = "courier_auth_token", 
                    company_name = "Shims",
                    width = 200, height = 250, 
                    logout_button_name = 'Logout', hide_menu_bool = False, 
                    hide_footer_bool = False, 
                    lottie_url = 'https://assets2.lottiefiles.com/packages/lf20_jcikwtux.json')

LOGGED_IN = __login__obj.build_login_ui()

if LOGGED_IN == True:

    st.markown("Your Streamlit Application Begins here!")

That’s it! The library handles the rest.
Just make sure you call/ build your application indented under if st.session_state['LOGGED_IN'] == True:, this guarantees that your application runs only after the user is securely logged in.

Explanation

Login page

The login page, authenticates the user.

Create Account page

Stores the user info in a secure way in the _secret_auth_.json file.

Forgot Password page

After user authentication (email), triggers an email to the user containing a random password.

Reset Password page

After user authentication (email and the password shared over email), resets the password and updates the same
in the _secret_auth_.json file.

Logout button

Generated in the sidebar only if the user is logged in, allows users to logout.

Cookies are automatically created and destroyed depending on the user authentication status.

PyPi

Thanks for tuning in! Would love to hear your feedback!

Gauri

2 Likes
2

Looks awesome :slight_smile:
Definitely add it to the Tracker so we don’t lose track of it!

Have a nice day!
Fanilo

3

Thanks Fanilo!
I have added it to the Tracker.

Thanks!
Gauri

4

Excellent contribution!!!

Thanks in advance!

1 Like
5

Happy you liked the UI! @gustavofelicidade :smile:

7

error
error1264×667 93.3 KB

st.cache is deprecated. Please use one of Streamlit’s new caching commands, st.cache_data or st.cache_resource . Based on this function’s return value of type bytes , we recommend using st.cache_data .

I can not remove the above message. can anyone help me to remove the error cache and where i have to change from code??

2 Likes
8

Yh i couldn’t fix

9

I’m also experiencing this problem

10

if LOGGED_IN == True:
st.markdown(“Your Streamlit Application Begins here!”)
main_app.main()

I want the logout button to be displayed in my main program

11

i create a page with st-pages. i wish to switch to the page.when the login succesed .
but i fail .how can i do

12

Such a great library. Thank you it helped me a lot working on my app. But I got one question: is it possible to only allow a specific domain to sign up and deny all other domains?

Thank you in advance :smile:

14

Thanks for this excellent component!
The documentation tells that “Create Account page” stores the user info in a secure way in the secret_auth.json file. Is the data of all the users registering using this component getting stored in some central database. Is there some way for controlling the database viz. deleting the users programmatically , if needed as per some policy

15

U have to modify the lib source: …\Python310\Lib\site-packages\streamlit_cookies_manager\encrypted_cookie_manager.py
Change @st.cache to @st.cache_data