New Component: streamlit-oauth

Hi All

My first component, a quick wrap for OAuth currently focuses on authorization code grant flow, the original idea coming from Implementing Google OAuth in Streamlit | by Duc Anh Bui | Towards Data Science, but I want to adopt more than one OAuth service in different pages, It’s hard to manage callback handler, so I made this component.

GitHub: dnplus/streamlit-oauth: Simple OAuth Component for Streamlit App (github.com)
PyPI: streamlit-oauth · PyPI

9 Likes

Thanks for sharing !

1 Like

This is really interesting!

I’ve developed some apps and I want to add some authentication features to them. I read a couple of articles that showed how to integrate django authentication.

My ultimate goal is to link the authentication with the users and emails of my coworkers. Our company is based on Microsoft Suite, I was wondering if one could use this component to achieve such behaviour ?

I have really no prior knowledge of any authentication protocol or related topics, so I’m sorry if my question is not really related. Any references to where to start looking into this would be much appreciated.

Thanks!

1 Like

I get the following error using the default code example from github, no matter what SCOPE value I set:

Traceback (most recent call last):
  File "/opt/homebrew/lib/python3.11/site-packages/streamlit/runtime/scriptrunner/script_runner.py", line 565, in _run_script
    exec(code, module.__dict__)
  File "oauth_test.py", line 37, in <module>
    result = oauth2.authorize_button("Authorize", REDIRECT_URI, SCOPE)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/opt/homebrew/lib/python3.11/site-packages/streamlit_oauth/__init__.py", line 47, in authorize_button
    scope=scope.split(" "),
          ^^^^^^^^^^^
AttributeError: 'NoneType' object has no attribute 'split'


1 Like

Hi @jpbohorquez

I think you can check out this if your company uses Microsoft Solutions.
Microsoft identity platform and OAuth 2.0 authorization code flow - Microsoft Entra | Microsoft Learn

Currently, this component does not support auth code flow with PKCE but seems it’s not mandatory.

1 Like

Hi @mih

Not sure how you’re setting up the SCOPE variable.

I encountered the same issue when I didn’t set up the .env file or environment variable.

You can easily hardcode the example code variables to try out the component.

# Set environment variables
AUTHORIZE_URL = "https://accounts.google.com/o/oauth2/v2/auth"
TOKEN_URL = "https://oauth2.googleapis.com/token"
REFRESH_TOKEN_URL = "https://oauth2.googleapis.com/token"
REVOKE_TOKEN_URL = "https://oauth2.googleapis.com/revoke"
CLIENT_ID = "YOUR_CLIENT_ID"
CLIENT_SECRET = "YOUR_CLIENT_SECRET"
REDIRECT_URI = "http://localhost:8501/component/streamlit_oauth.authorize_button/index.html"
SCOPE = "openid profile email"
1 Like

Hello, If I am trying to make a call back to a streamlit app. what the Redirect _URI will be?

1 Like

http://localhost:8501/component/streamlit_oauth.authorize_button/index.html

You can replace localhost:8501 to any of your own domains

1 Like

I’m having a weird bug where it works on my localhost, but simply reopens the home page after login when deployed to Streamlit cloud

1 Like

Can you provide more details information? maybe we can fix this together.

1 Like

Yep, sorry I filed the issue on github and didn’t notice this. So i’ve tried it on both Google App Engine and Streamlit Cloud at this time and got the same bug.

After clicking the Login with Github button on the main page, I get a pop up with the right callback URL + code parameter from the oauth provider.

However, it stops there. It was as if these lines don’t execute:


Update: CORS was fixed, but error persists

This line is capturing the window without the location.href property

1 Like

Update: Resolved. It was a CORS thing silently failure

1 Like

Glad to hear you solve the CORS issue :grinning:.

Contact me if you have any problem.

1 Like

Hi, I tested this out but after logging in through Google it redirects me to another authorize button in the popup that does nothing. What am I doing wrong?

EDIT: Have also tested it with Discord, it still redirects to the authorize button and result returns None

1 Like

This is awesome! Thank you so much!

I did notice that sometimes I have to click the button an extra time or two, but otherwise it works great.

Is there any way to change the button size or do like use_container_width=True like with st.button?
Or a way to adjust the button colors?

Not supported yet, but may be a good idea for future release

1 Like

Can you expand on how to enable CORS? I am having the same problem with double windows.

Hey. Great work.
Thanks! It happens to me that I cannot get the token after coming back from OAuth provider. I think it could be cache TTL set to 60 seconds. Can you confirm that?
Prepared PR to change it → Increasing cache time by micd · Pull Request #4 · dnplus/streamlit-oauth · GitHub

Hi
I’m not certain if 60 seconds is sufficient for the entire authorization process.

Can you share about your use case?

As described, getting redirect to OAuth provider and having MFA there. Then a redirect to my stramlit app and token is not feteched.

I’m not certain if 60 seconds is sufficient for the entire authorization process.

Sorry, I set it to 300seconds in PR. Best would be to have it configurable eg. with env variable, but I don’t know if there is such possibility in python.

Or maybe it’s a different issue with the library, but sometimes when I’m getting back to the application from OIDC provider it’s not retriving tokens properly from OIDC provider. I do it like this:

    result = st_oauth2.authorize_button("Log in", OAUTH_REDIRECT_URI, OAUTH_SCOPE)
    if result and 'token' in result:
        st.session_state.token = result.get('token')
        st.experimental_rerun()