Hi - I’ve been doing a fair amount of investigation on the use of components as a way to integrate Auth0 authentication into my Streamlit apps (I need this for work and our clients). It wasn’t until components allowed CORS settings recently (>=0.74) that I started having some success (i.e. making it simple). I spent some time over the past week completing my experiments and am happy to share the implementation and detailed documentation. A shout out to @tim@randyzwitch@andfanilo@ash2shukla for earlier discussions that helped me along.
For a quick heads-up here’s the PDF documentation, and here’s the repo (replacing the older original version I had made).
As usual your code improvements and comments are most welcome as we hone our skills using awesome Streamlit!
Happy Streamlit-ing!
Marisa
P.S. I’m just going to switch you topic tag from using Streamlit to Show the community so people will have a easier time finding your work in the future!
NOTE: Due to browser security restrictions the embedded iframe used in this solution doesn’t work in a production environment because the login providers (like Google, Microsoft) do not allow their login screens to be parented by an iframe.
I’ve modified this implementation to use a popup login window instead, and cleaned up the code [NOT released yet, but plan to soon]. Popups have their own problems, but it now work in Heroku. Remaining issue is that not all users allow localstorage (or indexeddb, websql) which is required for the transfer of credentials from the IdP login app, via the st component app, to the st app.
Honestly believe the simplest solution will be to use a centralized membership/authentication database.
Many thanks for the update. We will be waiting for the updated code. Do you know when it will be available? Could you clarify the following points in meantime, please?
How .env.local need to be exported?
NOTE: I have .env.local in the root directory, but it seems to be not used by environ. So I was exporting variables manually.
Could you clarify the following variables, please?
@Andrei_Volkau you need to set up an Auth0 account then go to the account dashboard.to set up a SPA connection where you configure these settings. Try Auth0 for FREE. Make sure you set up “Allowed Callback URLs”, “Allowed Logout URLs”, “Allowed Web Origins”, “Allowed Origins (CORS)” as you require for the settings in your frontend component app.
Great work on Auth0 component! It would be good to update the repo with such a fix if possible. The cross-talking issue unfortunately prevents normal usage of the component. Sorry, not have enough skill to make a pull request with such a fix. It would be really cool to finalise the component while fixing this issue.
@p0povaalesi I’m keen not to swap out Auth0 (it’s an amazing product) and the st app will always need to store the identity (or a key of some sort) in session state so it can retrieve user auth permissions when required from the DB or whatever cloud identity provider solution is used (Auth0, Okta, Azure, Google, etc.). This is why I’m keen that Streamlit provides native session state, rather than the workaround being used.
The st host app can’t initiate a communication with the embedded web component (except once when it is mounted), so it can’t “ask” it for the session.
If instead the st app calls a web API of the component, that requires a user token identifier, so isn’t of any use.
We can’t use cookies, as the st app and the component run in different domains so can’t share cookies.
The only way I can see to seamlessly share an identity token is to hold it in st session state.
I do have another solution, unpublished at this time which uses a centralized DB. In this solution (which doesn’t use st components) I have an extra step post-login, which returns a one-time expiring unique code to the user who then exchanges it for their auth tokens. But still, this code and exchanged tokens need to be stored in session state, so you’re back to square one! My current solution removes a lot of friction.
If you use what I’ve released and simply force the user to login immediately every time they open your app, then session cross-talk shouldn’t be an issue.
Secrets management is now available in Streamlit sharing! You need to upgrade to version 0.80 of Streamlit, the temporary documentation location is linked below.
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
will have a deep look soon
