README.md

metadata

title: Streamlit Supabase Auth Ui
emoji: ⚡
colorFrom: red
colorTo: green
sdk: streamlit
sdk_version: 1.39.0
app_file: app.py
pinned: true
license: mit
short_description: Seamless Supabase authentication for seamless Streamlit apps
thumbnail: >-
  https://cdn-uploads.huggingface.co/production/uploads/65e330e7edc2f7306e252448/LQ-Rke_7K1o4hHwUWNVzv.png

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-authenticatorand 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 SupabasePostgreSQL 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:

1. Create a Supabase account
2. Go to our dashboard
3. Create a new project
4. Go to Project Settings > API and copy URL under Project URL and anon public key under Project API Keys
5. Copy the URL to supa_url and the ANON key to supa_key in .streamlit/secrets.toml
6. 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:

1. Sign up to Courier
2. Create a new workspace
3. 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.
4. Retrieve the authorization token from Settings > API Keys
5. 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:

1. Clone this repository and go inside it:

git clone https://github.com/AstraBert/streamlit_supabase_auth_ui.git
cd streamlit_supabase_auth_ui

2. Create a python virtual environment and activate it:

python3 -m venv streamlit-app
source streamlit-app/bin/activate

3. Install all the required dependencies:

python3 -m pip install -r requirements.txt

4. 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
5. 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.