New Component: st-login-form to create a user login form connected to a Supabase DB in 2 lines of code!

Hey all! :wave:

I have created a new component st_login_form that lets you create a user login form connected to a Supabase DB in just 2 lines of code!

:computer: UI

The login form collapses after login to free screen-space.

:computer: Demo app

Open in Streamlit

:construction: Installation

  1. Install st-login-form
pip install st-login-form
  1. Create a Supabase project as mentioned here
  2. Create a table to store the usernames and passwords. The table name and column names can be as per your choice.
CREATE TABLE users (
    username text not null default ''::text,
    password text not null,
    constraint users_pkey primary key (username),
    constraint users_username_key unique (username),
    constraint users_password_check check (
      (
        length(
          trim(
            both
            from
              password
          )
        ) > 1
      )
    ),
    constraint users_username_check check (
      (
        length(
          trim(
            both
            from
              username
          )
        ) > 1
      )
    )
  ) tablespace pg_default;
  1. Follow the rest of the steps from here to connect your Streamlit app to Supabase

:pen: Usage

login_form() sets session_state["authenticated"] to True if the login is successful, session_state["username"] to the username or new or existing user, and to None for guest login.

Returns the initialized supabase.Client instance to let you interact with the databse downstream in the script.

import streamlit as st

from streamlit_login import login_form

client = login_form()

if st.session_state["authenticated"]:
    if st.session_state["username"]:
        st.success(f"Welcome {st.session_state['username']}")
    else:
        st.success("Welcome guest")
else:
    st.error("Not authenticated")

See demo in Streamlit

:bouquet: This is my first streamlit-component, and my first python package, so bouquets and brickbats are very welcome. Thanks! :pray:

4 Likes

That’s such a useful Streamlit component!

Thanks for sharing it with us @SiddhantSadangi! :raised_hands:

Note: worth sharing on Supabase’s forums too! :wink:

Charly

1 Like

Thanks @Charly_Wargnier :hugs:

I’ve just shared it on Supabase’s forums too: Streamlit Login Form | Made with Supabase.
Thanks for the suggestion :slight_smile:

2 Likes

Great stuff! Thanks @SiddhantSadangi! :pray:

1 Like

I’ve added “st-login-form” to my requirements.txt on github and then copy/pasted the form but I’m getting this error:

ModuleNotFoundError: No module named ‘streamlit_login’

Am I using the wrong thing for my requirements.txt file? Sorry for the dumb question, I’m new to coding and have a ton to learn still.

Hello @paulcarl ,

Thanks for bringing this to my attention.

The package name mentioned in the form is incorrect, it should be st_login_form instead of streamlit_login

Can you try the below snippet to see if it works?

import streamlit as st

from st_login_form import login_form

client = login_form()

if st.session_state["authenticated"]:
    if st.session_state["username"]:
        st.success(f"Welcome {st.session_state['username']}")
    else:
        st.success("Welcome guest")
else:
    st.error("Not authenticated")

I am not able to edit the original post :frowning:

Thanks a ton for your help! I’ll test it as soon as possible and let you know how it turns out. I bet it will work from the look of things. Thanks again!

1 Like

My pleasure :slight_smile:

Please let me know if you have any questions or feedback :hugs:

Looks really cool. I will definitely use it for StreamPy

1 Like

Thanks :slight_smile:

Lemme know how it goes, would love to have your feedback!

This is a very useful component you have created. First time I implemented it, it worked well. Now when I am trying to use it in an application to serve as the landing page from where the user will proceed to the actual work-flow, I am getting the error as below -

Blockquote
Uncaught app exception
Traceback (most recent call last):
File “C:\Python311\Lib\site-packages\streamlit\runtime\scriptrunner\script_runner.py”, line 541, in run_script
exec(code, module.dict)
File “xxx:\xxx\xxxxx\xxxxxxxx\xxxxx\demo.py”, line 43, in
client = st_login_form.login_form(user_tablename=“users”)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Python311\Lib\site-packages\st_login_form_init
.py", line 141, in login_form
data, _ = (
^^^^^^^
ValueError: too many values to unpack (expected 2)

Blockquote

Please help me solve this error.

Hey @Apurb_Anand , can you please create an issue for this here: Issues · SiddhantSadangi/st_login_form (github.com)?

Please include the version of the package you are using, and the structure of your users table.

Thanks a ton for early response!!
The component has started working again. Didn’t really understand the reason. But one thing that I can report it that it started working after I deleted the earlier deployment of Streamlit Cloud.
In any case my application has starting working locally. Though I have yet to deploy on Cloud.

While deploying on Streamlit Cloud, I am getting same error again - “ValueError: too many values to unpack (expected 2)”.
I had forked the main branch which has has the version v0.2.1
So, after the success in local deployment, I am once again stuck in the Cloud deployment.
Please help in correcting this error.

Blockquote
[16:34:05] :snake: Python dependencies were installed from /mount/src/st_login_form/requirements.txt using pip.
Check if streamlit is installed
Streamlit is already installed
[16:34:07] :package: Processed dependencies!
Collecting usage statistics. To deactivate, set browser.gatherUsageStats to False.
2023-10-10 16:35:01.323 HTTP Request: GET https://zkavxipxbwlaljqaskng.supabase.co/rest/v1/users?select=username%2C%20password&username=eq.xxxxxxxxx&password=eq.xxxxxxxxxx “HTTP/1.1 200 OK”
2023-10-10 16:35:01.325 Uncaught app exception
Traceback (most recent call last):
File “/home/adminuser/venv/lib/python3.9/site-packages/streamlit/runtime/scriptrunner/script_runner.py”, line 565, in _run_script
exec(code, module.dict)
File “/mount/src/st_login_form/demo.py”, line 7, in
client = login_form()
File “/home/adminuser/venv/lib/python3.9/site-packages/st_login_form/init.py”, line 141, in login_form
data, _ = (
ValueError: too many values to unpack (expected 2)
Blockquote

@Apurb_Anand - can you please create an issue for this here: Issues · SiddhantSadangi/st_login_form (github.com)?

Done.
Thanks for taking up my request!

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.