streamlit_supabase_auth_ui
Seamless Supabase authentication for seamless Streamlit apps
Purpose and Inspiration
Streamlit is a popular backend-to-frontend app development framework for python, and over the years several solutions have been developed to tackle user authentication and management for Streamlit apps.
The most popular of them, streamlit-authenticator and streamlit_login_auth_ui, although offering several advanced functionalities and dynamic UIs, lack a reliable backend, database-centered user management (which is generally performed through local files).
We decided to build a new authentication UI, based on Gauri Prabhakar's login interface, that combines the power of Supabase PostgreSQL databases with the seamless frontend components from Streamlit, connecting it also to the e-mail notifications service offered by Courier.
The UI has login, user registration, password reset and 'forgot password' functionalities, as well as a logout one.
So, let's get started!🚀
Third party services
1. Supabase
We will need a Supabase account to build a project, retrieve its URL and ANON key and create a user_authentication
database, that will connect our UI to the backend, database-centered user-management.
In order to do that, we:
- Create a Supabase account
- Go to our dashboard
- Create a new project
- Go to
Project Settings > API
and copyURL
underProject URL
andanon public
key underProject API Keys
- Copy the URL to
supa_url
and the ANON key tosupa_key
in.streamlit/secrets.toml
- Open SQL editor on Supabase and execute the following command:
CREATE TABLE user_authentication (
id BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
username VARCHAR(255) DEFAULT NULL,
password VARCHAR(255) DEFAULT NULL,
email VARCHAR(255) DEFAULT NULL,
name VARCHAR(255) DEFAULT NULL,
created_at TIMESTAMP DEFAULT NOW()
);
2. Courier
We want to send email notifications basically for two reasons:
- Welcome our new users upon registration
- Send them reset passwords when they want to change their old/lost password
To do so, we use the already mentioned Courier, and so we need to:
- Sign up to Courier
- Create a new workspace
- Enable an e-mail service provider. The easiest and cheapest choice is Gmail: you only need to specify the Gmail account for which you want to activate the service, which will also be one that will send all the emails.
- Retrieve the authorization token from
Settings > API Keys
- Copy the authorization token and place it under
courier_auth_token
in.streamlit/secrets.toml
Create your application
1. Build from source
We now want to create our Streamlit application with Supabase authentication and user management, and, in order to do so, we:
- Clone this repository and go inside it:
git clone https://github.com/AstraBert/streamlit_supabase_auth_ui.git
cd streamlit_supabase_auth_ui
- Create a python virtual environment and activate it:
python3 -m venv streamlit-app
source streamlit-app/bin/activate
- Install all the required dependencies:
python3 -m pip install -r requirements.txt
- Modify
.streamlit/secrets.toml
with the Supabase project URL (supa_url
), Supabase project ANON key (supa_key
) and Courier authentication token (courier_auth_token
) we retrieved beforehand - Run the application:
python3 -m streamlit run app.py
You can obviously customize the Streamlit application as much as you want, you will only need to integrate this peace of code to make the Supabase-based auth to work:
import streamlit as st
from .streamlit_supabase_auth_ui.widgets import __login__
__login__obj = __login__(auth_token = st.secrets["courier_auth_token"],
company_name = "YOUR-ORG-NAME",
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:
### Your Streamlit app here!
2. Get PyPi package
We made streamlit-supabase-auth-ui
also a python package available on PyPi, that you can find here.
To get it, it is sufficient to run:
python3 -m pip install streamlit-supabase-auth-ui
And the installation process will take care of mounting all the necessary dependencies✅
You can then simply import the package in your code:
import streamlit as st
from streamlit_supabase_auth_ui.widgets import __login__
__login__obj = __login__(auth_token = st.secrets["courier_auth_token"],
company_name = "YOUR-ORG-NAME",
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')
Live demo
Find a live demo on HuggingFace Spaces.