New Component: auth0_component, a simple way to authenticate a user

Show the Community!
22

Hi, has anyone successfully used this component recently? I’m trying to integrate it into my app, and running into the issue

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:8501') does not match the recipient window's origin ('https://pkonduri.auth0.com').

My domain (as generated, and not editable, in the Auth0 dashboard is pkonduri.auth0.com. I used this domain and my client ID, and also tested the minimal app GitHub - conradbez/streamlit-auth0-example: Example on how to use github.com/conradbez/streamlit-auth0

I can successfully login, but when I click logout, I get the error shown above.

Note that I had to edit the file auth0_component/__init__.py slightly so that it would accept my domain that Auth0 gave me. I had to comment out a few lines of code in geterifiedSubFromToken method just to be able to get this far, because the library made the assumption that my domain ended in .us.auth0.com, which it does not. Edit shown below:


def getVerifiedSubFromToken(token, domain):
    domain = "https://"+domain
    # if domain[-13:] != '.us.auth0.com':
    #     print('domain should end with ".us.auth0.com" (no slash)')
    #     raise ValueError

    # rest of the code is unchanged.....

Any guidance would be very much appreciated @conrad_bezuidenhout ? @amy-why looks like you’ve dug deep into this lib, mind seeing what I may be doing wrong?

23

Hey @ferdy did you ever figure this out? And were you able to get a full login/logout flow to work?

24

That was my last attempt and it did not work well for me.

25

According to repeated issues in GitHub and discussion here, the original author @conrad_bezuidenhout have give up the project.
Sad…

26

In the Auth0 dashboard you need to set the allowed origins. You can also look at my “Auth0-approved” implementation here: Streamlit User and API Authentication with Auth0 Next.js SDK | by Sehmi-Conscious Thoughts | Oct, 2023 | Medium

27

Since there are many PR’s pending. i have published another package with the domain fix and logout state fix: streamlit-auth0-component-patch · PyPI

28

Hi @Danyal_Zahid that’s exciting! Do you have an example implementation / site where I can try it out? Before stripping out all of my hacky auth code for this, I would love to test it out if possible.

29

Here’s the repo if you want to have a go at it GitHub - danyalxahid-askui/streamlit-auth0.

30

Hi Danyal, thank you for your package. I am able to set it up and test logging in. However, I noticed the login status turned back to “Login” when the page refreshes. I turned on both Refresh Token and Rotation Refresh Token Expiration for several hours but didn’t fix the issue. Do you know when should I config so that the user can remain logged in for several days with the token in the cookie?

31

Thank you to @Danyal_Zahid and @conrad_bezuidenhout

I make it work… so now lets develop!!!

32

Did you ever find a workaround here? I’ve been searching for a long time, but this is just by design from what I understand. I don’t think I’ve seen any Streamlit apps that ahve successfully implemented persistent logins.

33

The login screen works. Then I click the Google button. Then I just get this:

Screen Shot 2024-03-28 at 7.12.29 AM
Screen Shot 2024-03-28 at 7.12.29 AM1402×384 18.1 KB

(Doesn’t seem to matter whether I allow sites to use popups or not in Chrome - still get message)

Would love to get Auth0 working on Streamlit. Spent all day yesterday on this. Unfortunately going to have to move on for now without this much-desired feature. Please let me know if anyone has any tips, thanks.

34

What resolved this issue for me:
I switched my “Regular web app” to SPA and that worked.
However, creating a SPA from the outset doesn’t seem to work, although maybe I had flipped some setting in my orignal app that allowed it to work, your mileage may vary.
In any case maybe this comment will be useful to someone.

35

For those with commercial use cases: Ploomber (I’m part of their team) developed a Streamlit + Auth0 integration. You only need to provide Auth0 config params and we’ll take of the rest, there’s no need to modify your Streamlit app code.