Streamlit User and API Authentication with Auth0 Next.js SDK

Custom Components
1

In this article I will show you how to build robust authentication into Streamlit apps using the popular Next.js web framework, along with Auth0’s super-powerful identity and access SDK.

Whilst my solution can be used as is, the choice of technologies enables your Streamlit applications to be enterprise-ready and deployed in situations which often require integrated and advanced identity capabilities (for example, single sign-on, user management, API authentication, monitoring and extensibility, which can be configured independently in the Identity Provider service itself by a separate IT Admin or Security team).

Let me know how you get on, and please submit questions and issues in the GitHub repo (links in article).

Kind regards,
Arvindra

4 Likes
2

Hey, @asehmi !

Thank you very much for this article. I am having trouble to set it up! Got the error below… do you know why?

image
image1130×699 24.6 KB

Console output:

  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://172.19.209.86:8501

### Component Host Ready ###
Event queue: False
Props: {"hostname": "Hero Streamlit App", "initial_state": {"message": "To use this application, please login..."}, "events": ["onStatusUpdate", "onActionRequest", "onError"], "width": "100%"}

### [2023-05-26 18:58:05.361392] Component event handler report ####
['onError', {'message': 'Component event None is not allowed. (Data: None)'}]
### Component Host Ready ###
Event queue: False
Props: {"hostname": "Hero Streamlit App", "initial_state": {"message": "To use this application, please login..."}, "events": ["onStatusUpdate", "onActionRequest", "onError"], "width": "100%"}

### [2023-05-26 18:58:06.268975] Component event handler report ####
['onError', {'message': 'Component event None is not allowed. (Data: None)'}]
### Component Host Ready ###
Event queue: False
Props: {"hostname": "Hero Streamlit App", "initial_state": {"message": "To use this application, please login..."}, "events": ["onStatusUpdate", "onActionRequest", "onError"], "width": "100%"}

### [2023-05-26 18:58:07.005530] Component event handler report ####
['onError', {'message': 'Component event None is not allowed. (Data: None)'}]
### Component Host Ready ###
Event queue: False
Props: {"hostname": "Hero Streamlit App", "initial_state": {"message": "To use this application, please login..."}, "events": ["onStatusUpdate", "onActionRequest", "onError"], "width": "100%"}

### [2023-05-26 18:58:09.996786] Component event handler report ####
['onError', {'message': 'Component event None is not allowed. (Data: None)'}]
### Component Host Ready ###
Event queue: False
Props: {"hostname": "Hero Streamlit App", "initial_state": {"message": "To use this application, please login..."}, "events": ["onStatusUpdate", "onActionRequest", "onError"], "width": "100%"}

### [2023-05-26 18:58:10.109890] Component event handler report ####
['onError', {'message': 'Component event None is not allowed. (Data: None)'}]
3

If you’re looking for a hosted solution, check out Ploomber (I’m part of their team).

We 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.

1 Like