In this tutorial, I’ll show you how to add Microsoft Entra ID (formerly known as Microsoft Azure Active Directory or Azure AD) authentication to a Dash application. Let’s get started!

Architecture

reverse-proxy

Our setup works via a reverse proxy: we’ll protect our Dash application by placing a web server in front of it to handle requests. If the user has the appropriate credentials, they’ll be able to see the app, otherwise they’ll be denied access.

This architecture has the following benefits:

  1. It doesn’t require changing our Dash code
  2. Allows us to keep the authentication code separate from any business logic
  3. Is portable to other frameworks (like Shiny or Streamlit)

Creating the app in Azure

Log into the Azure console and go to the Microsoft Entra ID section. You can find it in the left panel.

azure-entra-section

Then, click on Add -> App registration to register a new application.

azure-app-registration

Let’s now enter our application configuration details:

  1. At the top, enter any name you want (e.g, my-cool-app)
  2. Set the supported account types
  3. Set the redirection URL. For this example, enter http://localhost:3000/auth/redirect
  4. Click on Register

azure-app-config

We’ll be taken to the App page, click on Add a certificate or secret, see the image below.

azure-add-secret

Enter a secret name, and click on Add. Then copy the Value (you won’t be able to copy the value later) and paste it somewhere safe.

azure-create-secret

Running the app locally

First, download the sample code from GitHub, you’ll need both directories (app and reverse-proxy).

We’ll use the MSAL Node library for the authentication part and a simple Dash app. MSAL Node requires Node 18 and we need Python to run Dash, so let’s create an environment and install both. We’ll use conda but you can use any other package manager.

Create an environment with Node 18 and Python using conda

conda create --name entra nodejs=18 python=3.13 -c conda-forge -y

Now, let’s activate the environment, move to the directory that contains the code we downloaded from GitHub earlier, install the requirements and start the Dash app.

conda activate entra
cd app
pip install -r requirements.txt
python app.py

You should see something like this:

dash-anon

This is the unprotected app, let’s see how to put a reverse proxy in front of it so all users have to authenticate.

Open a new terminal and enter the following:

# activate our environment
conda activate entra

# move to the directory that contains the reverse proxy code
cd reverse-proxy

# install the reverse proxy dependencies
npm install

Let’s set our configuration parameters, you can get the first two from the Azure console:

azure-ids

The last one (AUTH_CLIENT_SECRET) is the secret we generated earlier.

export AUTH_TENANT_ID="<YOUR TENANT ID>"
export AUTH_CLIENT_ID="<YOUR CLIENT ID>"
export AUTH_CLIENT_SECRET="<YOUR CLIENT SECRET>"

Then, enter the following parameters:

export AUTH_GRAPH_API_ENDPOINT="https://graph.microsoft.com/" # must end with /
export AUTH_CLOUD_INSTANCE="https://login.microsoftonline.com/" # must end with /
export AUTH_REDIRECT_URI="http://localhost:3000/auth/redirect"
export AUTH_POST_LOGOUT_REDIRECT_URI="http://localhost:3000"
export AUTH_SESSION_SECRET="<SESSION SECRET>" # value for testing purposes only
export DASH_APP_URL="http://127.0.0.1:8050/" # change it if your Dash app is running elsewhere

Start the application (ensure the Dash application is running before executing the next command):

npm start

The app will start running in: http://localhost:3000 and you’ll be prompted to login.

Important: Enter an account that has access to the application! When creating the app from the Azure console, you can configure this setting.

Dash with Entra ID

Once you login, you should see something like this:

dash-login

To signout: http://localhost:3000/auth/signout

And that’s it!

Limitations

The example shown in this post is a proof-of-concept. Ensure you review the code, add required security measures and proper networking configuration. For example, ensure the Dash application isn’t accessible directly (all traffic must go through the reverse proxy), serve the app via HTTPS, securely store Entra ID secrets, etc.

If you want a production-grade solution to add Microsoft Entra authentication to your Dash app, schedule a call with us.