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

conrad_bezuidenhout · October 19, 2021, 6:51am

Uses auth0 to give you the ability to leverage many login providers (google, facebook etc.), through a simple button

https://github.com/conradbez/streamlit-auth0

demo

BeyondMyself · October 19, 2021, 9:23am

Does this componet support LDAP authentication way?

MaxMnemo · October 20, 2021, 2:47pm

That’s awesome. I tried to publish a test app with your package but when I want to deploy it on streamlit it says:

No module named 'auth0_component'

The module can’t be found although I pip installed it and I followed your readme.

To import everything I used this in my main file:

from auth0_component import login_button

And if I try to import it as… import streamlit-auth0-component … visual studio code won’t let me import this syntax as their are dashes.

Running it locally doesn’t show any errors but I can’t deploy it.

asehmi · October 20, 2021, 6:04pm

This is great Conrad. (I authored an Auth0/Next.js auth component a few months ago.) To help folks deploy this in their local and online apps can you explain how to configure the host URLs for the ExpressJS server and how to start it? I don’t think it’s straight-forward to do this in Streamlit online (or at least I don’t know how to myself).

conrad_bezuidenhout · October 21, 2021, 8:47am

Thanks asehmi, I was actually inspired by your application but really wanted something that wouldn’t rely on a separate server. The ExpressJS is legacy and not needed to run the Auth component so there shouldn’t be an issue running on Streamlit Share.

conrad_bezuidenhout · October 21, 2021, 8:48am

Suspect your issue is not including the package in your requirements.txt.

Here’s an example I put together with instructions in the README

https://github.com/conradbez/streamlit-auth0-example/blob/main/test.py

Demo (fake auth0 domain etc.):

https://share.streamlit.io/conradbez/streamlit-auth0-example/main/app.py

Long story short make sure you’ve got a requirements.txt in your repo root with the following line streamlit-auth0-component

conrad_bezuidenhout · October 21, 2021, 8:51am

Not sure - probably not but I’m not 100% familiar with this

MaxMnemo · October 21, 2021, 8:53am

Oh, I guess this is in fact the problem. Okay that was dumb from me.

Thanks for pointing this out.

rahulbsw · November 1, 2021, 1:41am

Hi @conrad_bezuidenhout and @asehmi
I have attempt to create streamlit-auth component a clone of streamlit-auth0-component
I have added support for OIDC (OpenId) and OAuth2 , I don’t know much about React programing . I am having issue while testing it seems useAuth() method for odic react is not carring redirect url.
Please have a look at the below repository and fill free to update it
GitHub - rahulbsw/streamlit-auth

pitanjal · January 29, 2022, 7:46am

Hey, this is a fantastic feature.

However, I am getting this error. I am given to understand I need to do something on my callback URL settings.

Could you please guide me on what changes to make? Thanks!

My app is hosted on : https://share.streamlit.io/pitanjal/tradingwebsite/main/

pitanjal · January 29, 2022, 7:57am

Hey, great to know that your one is running perfectly locally.

I am getting an error here as below.

Could you pls guide me what changes to be made on auth application settings page.

Thanks!

Also, you need to put

streamlit-auth0-component

In your requirements.txt while deploying to sort out the issue you are facing.

Etienne_G · November 30, 2022, 2:16pm

Hello @conrad_bezuidenhout , i got this problem, do you have any idea of why ?

Etienne_G · November 30, 2022, 2:25pm

I followed the readme and i got streamlit-auth0-component

conrad_bezuidenhout · November 30, 2022, 4:14pm

Hey @Etienne_G I’ve updated if you want to try with the latest

Etienne_G · November 30, 2022, 4:46pm

I have the button but i got Callback URL mismatch. This error seems to be mine Thx for your reactivity and your job !

Etienne_G · December 1, 2022, 9:37am

Hello @conrad_bezuidenhout , sorry to bother you again but, now there is a problem of refresh token, there is the log : The scope ‘offline_access’ was requested, but no ‘refresh_token’ was issued because the authorization code exchange originated from a browser.
To fix that, i think that the component need to create a new instance of Auth0Client (here the link : Auth0 Single Page App SDK.

Enjoy your day

amy-why · January 19, 2023, 2:05am

@conrad_bezuidenhout thanks for the package, it works very well for me. I am using custom domain in auth0. It is not working for me for the custom domain. I see this line

github.com

conradbez/streamlit-auth0/blob/main/auth0_component/init.py#L26


      
            _login_button = components.declare_component("login_button", path=build_dir)
          
          

          
import json
          from six.moves.urllib.request import urlopen
          from functools import wraps
          from jose import jwt
          
          
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
              jsonurl = urlopen(domain+"/.well-known/jwks.json")
              jwks = json.loads(jsonurl.read())
              unverified_header = jwt.get_unverified_header(token)
              rsa_key = {}
              for key in jwks["keys"]:
                  if key["kid"] == unverified_header["kid"]:
                      rsa_key = {
                          "kty": key["kty"],

domain = “https://”+domain
if domain[-13:] != ‘.us.auth0.com’:
print(‘domain should end with “.us.auth0.com” (no slash)’)
raise ValueError

custom domain doesn’t follow that pattern. Why do you have that check? Any other issues with custom domain?
Thanks
Amy

conrad_bezuidenhout · January 19, 2023, 2:25am

Thanks for the praise.

That check is there so people use the correct domain name - often new users won’t know what to use and the auth flow gives very cryptic errors.

If you would like to implement a unsafe_url_flag parameter to skip the check I’ll happily merge the PR.

ferdy · January 19, 2023, 12:33pm

I tried it and this is what I get so far.

I am following this guide.

* Register for Auth0
* Create a Single Page Application and navigate to the "settings" tab
* set your callback url's to `http://localhost:8501/component/auth0_component.login_button/index.html` assuming you're running on localhost or `http://YOUR_DOMAIN/component/auth0_component.login_button/index.html` if you're deploying
* Copy `client_id` and `domain` from this page
* Follow example below

I use http://localhost:8501/component/auth0_component.login_button/index.html.

And use this code.

app.py

from auth0_component import login_button
import streamlit as st

clientId = "...."
domain = "...."

user_info = login_button(clientId, domain = domain)
st.write(user_info)

I use clientId and domain from auth0.

requirements.txt

streamlit
streamlit-auth0-component
python-jose==3.3.0

Installation

Create venv and activate it
pip install -r requirements.txt

OS is windows 10.

streamlit run app.py

How to solve this issue?

amy-why · April 11, 2023, 10:36pm

Sorry for the delay, can you please review this? allow custom domain by amy-why · Pull Request #19 · conradbez/streamlit-auth0 · GitHub

Topic		Replies	Views
Streamlit Next.js Component, Auth0 Authentication, Bi-Directional Messaging & Serverless APIs Custom Components	42	16516	November 2, 2024
Simple Authentication for Streamlit Apps Show the Community! authentication	25	13588	January 30, 2025
Using Auth0 Custom Components real-time , authentication , discussion	1	440	November 15, 2024
New Component: streamlit-oauth Custom Components	53	17742	November 20, 2024
Introduction to Streamlit and Streamlit Components Custom Components tutorial	2	689	August 9, 2023

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

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies