Connect Streamlit to Supabase

Introduction

This guide explains how to securely access a Supabase instance from Streamlit Community Cloud. It uses st.experimental_connection, Streamlit Supabase Connector (a community-built connection developed by @SiddhantSadangi) and Streamlit's Secrets management. Supabase is the open source Firebase alternative and is based on PostgreSQL.

Sign in to Supabase and create a project

First, head over to Supabase and sign up for a free account using your GitHub.

Sign in with GitHub

Authorize Supabase

Once you're signed in, you can create a project.

Your Supabase account

Create a new project

Your screen should look like this once your project has been created:

Create a Supabase database

Now that you have a project, you can create a database and populate it with some sample data. To do so, click on the SQL editor button on the same project page, followed by the New query button in the SQL editor.

Open the SQL editor

Create a new query

In the SQL editor, enter the following queries to create a database and a table with some example values:

CREATE TABLE mytable (
    name            varchar(80),
    pet             varchar(80)
);

INSERT INTO mytable VALUES ('Mary', 'dog'), ('John', 'cat'), ('Robert', 'bird');

Click Run to execute the queries. To verify that the queries were executed successfully, click on the Table Editor button on the left menu, followed by your newly created table mytable.

Write and run your queries

View your table in the Table Editor

With your Supabase database created, you can now connect to it from Streamlit!

Add Supabase Project URL and API key to your local app secrets

Your local Streamlit app will read secrets from a file .streamlit/secrets.toml in your app's root directory. Create this file if it doesn't exist yet and add the SUPABASE_URL and SUPABASE_KEY here:

# .streamlit/secrets.toml

[connections.supabase]
SUPABASE_URL = "xxxx"
SUPABASE_KEY = "xxxx"

Replace xxxx above with your Project URL and API key from Step 1.

Copy your app secrets to the cloud

As the secrets.toml file above is not committed to GitHub, you need to pass its content to your deployed app (on Streamlit Community Cloud) separately. Go to the app dashboard and in the app's dropdown menu, click on Edit Secrets. Copy the content of secrets.toml into the text area. More information is available at Secrets management.

Add st-supabase-connection to your requirements file

Add the st-supabase-connection community-built connection library to your requirements.txt file, preferably pinning its version (replace x.x.x with the version you want installed):

# requirements.txt
st-supabase-connection==x.x.x

Write your Streamlit app

Copy the code below to your Streamlit app and run it.

# streamlit_app.py

import streamlit as st
from st_supabase_connection import SupabaseConnection

# Initialize connection.
conn = st.experimental_connection("supabase",type=SupabaseConnection)

# Perform query.
rows = conn.query("*", table="mytable", ttl="10m").execute()

# Print results.
for row in rows.data:
    st.write(f"{row['name']} has a :{row['pet']}:")

See st.experimental_connection above? This handles secrets retrieval, setup, query caching and retries. By default, query() results are cached without expiring. In this case, we set ttl="10m" to ensure the query result is cached for no longer than 10 minutes. You can also set ttl=0 to disable caching. Learn more in Caching.

If everything worked out (and you used the example table we created above), your app should look like this:

As Supabase uses PostgresSQL under the hood, you can also connect to Supabase by using the connection string Supabase provides under Settings > Databases. From there, you can refer to the PostgresSQL tutorial to connect to your database.

Using the Supabase Python Client Library

If you prefer to use the Supabase Python Client Library directly, you can do so by following the steps below.

1. Add your Supabase Project URL and API key to your local app secrets:

   Your local Streamlit app will read secrets from a file .streamlit/secrets.toml in your app's root directory. Create this file if it doesn't exist yet and add the SUPABASE_URL and SUPABASE_KEY here:

   # .streamlit/secrets.toml
   
   SUPABASE_URL = "xxxx"
   SUPABASE_KEY = "xxxx"
   

2. Add supabase to your requirements file:

   Add the supabase Python Client Library to your requirements.txt file, preferably pinning its version (replace x.x.x with the version you want installed):

   # requirements.txt
   supabase==x.x.x
   

3. Write your Streamlit app:

   Copy the code below to your Streamlit app and run it.

   # streamlit_app.py
   
   import streamlit as st
   from supabase import create_client, Client
   
   # Initialize connection.
   # Uses st.cache_resource to only run once.
   @st.cache_resource
   def init_connection():
       url = st.secrets["SUPABASE_URL"]
       key = st.secrets["SUPABASE_KEY"]
       return create_client(url, key)
   
   supabase = init_connection()
   
   # Perform query.
   # Uses st.cache_data to only rerun when the query changes or after 10 min.
   @st.cache_data(ttl=600)
   def run_query():
       return supabase.table("mytable").select("*").execute()
   
   rows = run_query()
   
   # Print results.
   for row in rows.data:
       st.write(f"{row['name']} has a :{row['pet']}:")
   

   See st.cache_data above? Without it, Streamlit would run the query every time the app reruns (e.g. on a widget interaction). With st.cache_data, it only runs when the query changes or after 10 minutes (that's what ttl is for). Watch out: If your database updates more frequently, you should adapt ttl or remove caching so viewers always see the latest data. Learn more in Caching.