Introducing Streamlit-Keycloak: A component for user authentication and single sign-on in your app using Keycloak

🧩 Custom Components
1

Streamlit Keycloak

Keycloak user authentication and single sign-on inside your Streamlit app
Keycloak is an open-source access and identity management tool.

Installation

pip install streamlit-keycloak

Usage

Provide the URL to your Keycloak server, the realm and client and the component will perform the authentication when the app is rendered. First it will attempt to silently authenticate using single sign-on. If this fails, a dialog will appear from which you can open a popup to the Keycloak login page.

When authentication is successful, the component returns a dataclass containing the authentication state, an access token, which can be used to access other restricted resources, a refresh token and a user info object, containing e.g. the username and group memberships. If your configuration provides refresh tokens, the access token can be automatically refreshed when it expires.

So far the component has not been tested in a wide variety of environments. So if you’re also using Keycloak and would benefit from less logging in and easy access to tokens, give this a go and share your experience. Feedback is always welcome.

Frontend authentication like this can only be done with clients that have their access type set to ‘public’ as their is no way to securely provide the client secret from the browser.

edit: The component now provides more user feedback. Logging in via SSO proceeds silently as normal, but if credentials are required, you can open the login popup through a button click to keep the popup blockers happy. Error messages are now also shown and there are localization options should you want to modify any text.

Example

from streamlit_keycloak import login
import streamlit as st


def main():
    st.subheader(f"Welcome {keycloak.user_info['preferred_username']}!")
    st.write(f"Here is your OAuth2 token: {keycloak.access_token}")


st.title("Streamlit Keycloak example")
keycloak = login(
    url="http://localhost:8080",
    realm="myrealm",
    client_id="myclient",
)

if keycloak.authenticated:
    main()

streamlit-keycloak showcase.gif|860

Credits

Many thanks to the authors of the streamlit-auth0 and auth0-spa-js packages for inspiring a large part of the approach.

And thanks to @93degree for the Svelte component template, which is awesome.

edits: updated instructions
edit 4: it’s now a Svelte component

2 Likes
2

Wow, nice! I’m looking at streamlit - Keycloak authentication currently too. And this looks really cool, will try later for sure.

Just 1 question, is there a way to get user data from keycloak too besides just a token? Like, groups, tags, id, etc.

Edit: sry, my bad, didn’t note user info above. That answers my question.

3

Great job! :balloon: it does seem that more and more people are interested in the authentication side of Streamlit!

Feel free to add it to the Components Tracker: Streamlit Components - Community Tracker so we don’t lose track of it!

Have a nice day!
Fanilo

4

Thanks Fanilo, will do!

5

@bleumink hmm, could you help a bit? Which client config is required on Keycloak side? I can’t get it to work with your example (adjusted link to keycloak + created openid client with default settings on keycloak side - used that client id in your example). It just looks like it timeouts.

6

@bleumink Thanks for your contribution on using keycloak with streamlit app. However, I have a problem when I import login from streamlit_keycloak. There is a message shown on the screen which is ImportError:cannot import name ‘login’. It’s confused for me and I have no idea how to deal with this problem. Would you please give me some suggestions to solve this problem.

屏幕截图 2023-09-28 104310
屏幕截图 2023-09-28 1043101218×792 27.9 KB

7

Hi @bleumink,
Thanks for your great component. It is really great component for authentication.

I implement and successfully login with my laptop. Keycloak is in docker container but app is not. I have found that when I try to login from my mobile phone I shows error: Unable to connect to Keycloak using the current configuration. Timeout when waiting for 3rd party check iframe message.
Do you know if it is some configuration inside this library or something else?

Thanks in advance,
DusanP

8

I have the same error did you manage to fix it? if yes can you tell me how?

9

Hi @Paulo_C,

No, I have moved authentication to Supabase that’s better in my opinion, because it also contains the database that I can use. Also you can host Supabase (opensource tool) localy.

There is some components for Supabase auth and database.

Hope that helps!

1 Like