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

4 Likes

Thanks for sharing !

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!

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'


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.

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"

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

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

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

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

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

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

Update: Resolved. It was a CORS thing silently failure

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

Contact me if you have any problem.