Streamlit User and API Authentication with Auth0 Next.js SDK
Tags: programming, python, security
Published: 2022-08-19 21:11:00

### In this article, I will show you how to build a Streamlit Component to authenticate users in Streamlit applications and external APIs with Auth0.

### <br>

**TL;DR:** If you've built a [Streamlit](https://www.streamlit.io/) application and must share it securely with an external or internal audience, you'll need to add user authentication features. If your Streamlit application must access secure APIs, you'll need a way to authorize access. In my previous article, [Introduction to Streamlit and Streamlit Components](https://auth0.com/blog/introduction-to-streamlit-and-streamlit-components/), you learned how to extend Streamlit's functionality using its component API, and you built both simple and moderately complex custom Streamlit components. The idea was to equip you with knowledge of a component design that will make it easy now to use Auth0 authentication in Streamlit. My experience with Streamlit can be verified on the official page of [Streamlit Creators](https://streamlit.io/creators), and in this article, I will show you in detail exactly how to do that.

## Introduction

In the [Introduction to Streamlit and Streamlit Components](https://auth0.com/blog/introduction-to-streamlit-and-streamlit-components/), you learned that Streamlit Components have two parts, namely:

1. A _frontend_ is implemented in any web technology you prefer (JavaScript, React, Vue, etc.) and gets rendered in Streamlit apps via an `iframe` tag.
2. A _Python API_ which Streamlit client apps use to instantiate the frontend and communicate with it. This API is exposed via the `streamlit.components.v1.declare_component` object.

In the previous article, we built [Component Hero](https://auth0.com/blog/introduction-to-streamlit-and-streamlit-components/#Component-Hero--A-More-Sophisticated-Component) using the Next.js web framework, which in theory allows us to implement nice user experiences with the server-side rendering of static web pages and host API endpoints. I won't build a fancy UI to interact with Auth0 login, but I will use the self-hosted API functionality of Next.js.

The primary purpose of Component Hero is to wrap the core Streamlit components API adding support for passing _events_ (structured objects) between the frontend and Streamlit and handling errors. In this article, we're going to use the same design as Component Hero to build **Component Auth0**.

## Authentication Component Using Auth0

Let's go into the details of building _Component Auth0_ integrating Auth0 authentication in Streamlit applications and using its identity and access token credentials to invoke protected Streamlit Python functions and protected external APIs.

Before we proceed, let me remind you of some important terminology. The Component Auth0 Python wrapper, which hosts the Streamlit component, will be referred to as _component host_ or _Streamlit host_ and the Streamlit code for the rest of the application as _Streamlit client_. The component implementation will be called _component frontend_ or simply _frontend_.

### Component Auth0 application demo

This little demonstration gives you an idea of the final goal we will achieve:

<include src="WistiaVideo" id="w7vqsqj0ze" padding="56.25" />

### Capabilities

The diagram below shows what will be implemented. The main takeaway is that _the Streamlit app server and frontend webserver run as two separate server-based applications_. The component implementation cannot be run in Streamlit's server, so it must be executed in its own process and web server. I run Streamlit locally on port 4010 and the frontend locally on port 3001. You can do the same to make it easier to reuse the code and follow the design.

![Capabilities of Component Auth0](https://images.ctfassets.net/23aumh6u8s0i/7Fns8ZdSIOEeOuhs1SJsB3/19458da02ad71f89f2464b92f0cbe5e3/02_capabilities.png)

<br>

### Architecture

The architecture view captures the relationships between the capabilities, shedding light on how the application works.

![Architecture of Component Auth0](https://images.ctfassets.net/23aumh6u8s0i/2Xq0HwenDpMXtlZS0Rsnia/6c97c2bb9adc55b9540ad90097148df3/03_structure.png)

<br>

### Application start-up sequence

Since this component is fairly complicated, I have a sequence diagram showing the interactions between capabilities, which will help you better follow the code further below.

![Interaction Diagram for Component Auth0](https://images.ctfassets.net/23aumh6u8s0i/6zGnsECwGwjo3Ibo2AvJ9y/cc24c52a21dbf18e7a6e725f259c53c2/04_startup-sequence.png)

<br>

### Component Auth0 implementation details

_Now's a good time to download the [GitHub repository](https://github.com/auth0-blog/streamlit-asehmi) for this article. Navigate to folder `./article-2/code/auth0/`. The code snippets that will be shown in the following sections have been abbreviated a little and will not run on their own._

There are three parts to the Component Auth0 application, which I will explain in some detail:

1. The Streamlit component host: __a Python wrapper class and an event handler function__ (embedded in the Streamlit client application)
2. The component: __a Next.js (React) web app implementing the component__ (runs on localhost, port 3001)
3. The Streamlit client application (runs on localhost, port 4010)

The implementation of these parts is similar to the corresponding parts of Component Hero described in the [previous article](https://auth0.com/blog/introduction-to-streamlit-and-streamlit-components/).

In addition, complementing the application, a standalone service hosts protected API endpoints:

4. The Remote APIs service: __a Flask server hosting remote/external APIs__ (runs on localhost, port 8888)

Please refer to the diagrams of the system capabilities and system architecture above as you read the code sections below. In this way, you will have enough detail to replicate the code and make changes to the design and implementation yourself.

<br>

[Read more...](https://auth0.com/blog/streamlit-user-and-api-authentication/?utm_source=content_synd&utm_medium=sc&utm_campaign=global_dist)