Keycloack: Streamlit Login ultra-powered

Powerup login and streamlit integration with KeyCloack Login

Tipically Streamlit have a simple login that can be implemented through streamlit-authenticator and that is very good in standar and standalone cases.

But if you have a more complex (micro-frontend/multi-frontend application) web application in which streamlit is only a component you mast need to centralize login.
That can be easy with Keycloack that get you a microservice that manage a full-featured login with realm, roles and more.

We can implement Keycloack login with streamlit trough streamlit-keycloack library.

In this article we will explore how to create and configure a simple streamlit app that can log with keyclaock with configured docker and docker compose.
The codebase hare available here.

Login and Logged view

Create the Streamlit APP

Start from requirements.txt that describe the needed libraries

streamlit
streamlit-keycloak

Write the streamlit app at src/main.py

from dataclasses import asdict
import streamlit as st
from streamlit_keycloak import login

st.title('Keycloack Login')

keycloak = login(
    url="http://localhost:3333/auth",
    realm="myrealm",
    client_id="myclient",
    init_options={
        "checkLoginIframe": False
    },
    custom_labels={
        "labelButton": "Sign in",
        "labelLogin": "Please sign in to your account.",
        "errorNoPopup": "Unable to open the authentication popup. Allow popups and refresh the page to proceed.",
        "errorPopupClosed": "Authentication popup was closed manually.",
        "errorFatal": "Unable to connect to Keycloak using the current configuration."   
    }
)

if keycloak.authenticated:
    st.subheader(f"Welcome {keycloak.user_info['preferred_username']}!")
    st.write(f"Here is your user information:")
    st.write(asdict(keycloak))

Setup Docker

Now we can configure our Dockerfile to run the streamlit app:

FROM python:3.10

# for streamlit
ENV LC_ALL=C.UTF-8
ENV LANG=C.UTF-8
RUN mkdir -p /root/.streamlit
RUN bash -c 'echo -e "\
[general]\n\
email = \"\"\n\
" > /root/.streamlit/credentials.toml'
RUN bash -c 'echo -e "\
[server]\n\
enableCORS = false\n\
" > /root/.streamlit/config.toml'

WORKDIR /code
ADD requirements.txt .
RUN pip install --upgrade pip && pip install -r requirements.txt
COPY src ./src

CMD streamlit run src/main.py --server.port 8000 --server.enableCORS=true --server.enableXsrfProtection=false

And docker-compose.yml with streamlit and keycloack service:

version: "3.7"

services:
  streamlit-app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/code
    network_mode: "host" # importat to see keycloack with the same name and port of the frontend localhost:3333
  
  postgres:
    image: postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: keycloak
      POSTGRES_USER: keycloak
      POSTGRES_PASSWORD: password
    ports:
      - 5432:5432
    
  keycloak:
    image: jboss/keycloak
    environment:
      DB_VENDOR: POSTGRES
      DB_ADDR: postgres
      DB_DATABSE: keycloak
      DB_USER: keycloak
      DB_SCHEMA: public
      DB_PASSWORD: password
      KEYCLOAK_USER: admin
      KEYCLOAK_PASSWORD: password
    ports:
      - 3333:8080
    depends_on:
      - postgres


volumes:
  postgres_data:

Now we can run it with docker-compose up or if you have latest version of docker docker compose up .

When the services finish their initialization you will see:

• Streamlit at http://loalhost:8000
• Keycloack at http://localhost:3333

KeyCloack Configurration

Now go to keyclaock and login to admin console with admin, password:

Admin console login

Add a new realm called myrealm and save:

Add new realm

Go to clients and create a new clients that:

• is called myclient
• Valid Redirect URIs: http://localhost:8000/*
• Web Origins: http://localhost:8000

Create Client

Create a user ander User, add user. Click on the created user and set a new password under Credentials tab, if you do not want to change the password at first login remember to put temporary off.

Change password with temporary off

Now you can open the streamlit page and login with the created user credentials.

Logout

Actually the library do not include a logout, you must go to keyclock link and press sign out at that link: http://localhost:3333/auth/realms/myrealm/account/.

Conclusion

Streamlit are reaching more and more integration and it can be very usefull tool. Thanks to all the people that relase open source libraries that help us to work quickly and better!
And… good contribution to all!