Skip to main content

Seamless Supabase authentication for seamless Streamlit apps

Project description

streamlit_supabase_auth_ui

Seamless Supabase authentication for seamless Streamlit apps


GitHub top language GitHub commit activity Static Badge Static Badge

Supabase Logo plus Streamlit Logo

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:

  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
  1. Create a python virtual environment and activate it:
python3 -m venv streamlit-app
source streamlit-app/bin/activate
  1. Install all the required dependencies:
python3 -m pip install -r requirements.txt
  1. 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
  2. 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.

Contributions

Contributions are more than welcome! See contribution guidelines for more information :)

Funding

If you found this project useful, please consider to fund it and make it grow: let's support open-source together!😊

License and rights of usage

This project is provided under MIT license: it will always be open-source and free to use.

If you use this project, please cite the author: Astra Clelia Bertelli

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

Built Distribution

File details

Details for the file streamlit_supabase_auth_ui-0.0.1.post3.tar.gz.

File metadata

File hashes

Hashes for streamlit_supabase_auth_ui-0.0.1.post3.tar.gz
Algorithm Hash digest
SHA256 26ddc51555d9f9731a0ae2e949224860c251fd3040df1513c397118021a8ffd7
MD5 38e516c5b27c71a7db5f4c68da727e96
BLAKE2b-256 8fdd0cc8e8e226cdc2dca690a34eb4467137d2bddffb60f6a76a563d36377a34

See more details on using hashes here.

File details

Details for the file streamlit_supabase_auth_ui-0.0.1.post3-py3-none-any.whl.

File metadata

File hashes

Hashes for streamlit_supabase_auth_ui-0.0.1.post3-py3-none-any.whl
Algorithm Hash digest
SHA256 5a53c865a3080ca35dafe8bc6f5c0ea69b8691ad64a6430008429114c8f4ee08
MD5 6c6894f4d8f539fabbb168898ebcaf29
BLAKE2b-256 46497ed631aa18997ec3f32110568922e3c9afd2406a474261b017c77091cdb2

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page