---
title: "Creating an Azure Web App with Authentication and Authorization"
page-layout: full
toc: True
author: Lucas A. Meyer
image: /images/thread_manager_logo.png
toc-expand: true
include-in-header: _msft-clarity.html
date: 2024-01-06
---

This is the first post in a series of posts about creating a web app to manage my social media. The main page for this series is [here](thread_manager.qmd).

We begin by [creating a new App Service in Azure using the Azure Portal](https://learn.microsoft.com/en-us/azure/app-service/quickstart-python?tabs=django%2Cwindows%2Cazure-portal%2Cvscode-deploy%2Cdeploy-instructions-azportal%2Cterminal-bash%2Cdeploy-instructions-zip-azcli#2---create-a-web-app-in-azure).

:::{.callout-important}
I did not use the sample code in section 1 from the link above, because I intended to use the code that uses the Microsoft Authentication Library (MSAL) for Python. **I just created an empty app.**
:::

From the defaults, I changed the App plan to a cheaper plan. The free plan (F1) also works. I also configured the app to use the Python 3.11 runtime, which is the version I'm using to develop.

I then [configured the app to sync with GitHub](https://learn.microsoft.com/en-us/azure/app-service/deploy-continuous-deployment?tabs=github), so that I can push code to GitHub and have it automatically deployed to the App Service. 

## Configuring Microsoft Entra ID and Linking the App

I followed the instructions at [Quickstart: Sign in users and call the Microsoft Graph API from a Python web app](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-web-app-python-sign-in?tabs=windows). The instructions will tell you where to find the `CLIENT_ID` and how to generate a `CLIENT_SECRET` for the app. The `AUTHORITY` needs to be set to `AUTHORITY="https://login.microsoftonline.com/<tenant_id>"`. I obtained the `tenant_id` from the Azure Portal, in the Overview page of Microsoft Entra ID.

I downloaded the full code for the app, and the only change I had to make was to create an `.env` file with the variables described above. This is not required for the app to run on the web, but it helps when running locally.

```bash
CLIENT_ID=[client_id]
CLIENT_SECRET=[client_secret]
AUTHORITY=https://login.microsoftonline.com/[tenant_id]
```

The instructions don't mention this, but after finishing the instructions, you also have to link the Entra ID configuration to the Web App you created in the first step. To do this, go to the Azure Portal, open the App Service, go to the "Authentication" tab, and click on "Microsoft" under "Identity providers". Then, select the "Existing App" tab and select the app you created in the previous step.

The final connection step was to set up the environment variables `CLIENT_ID`,  `CLIENT_SECRET` and `AUTHORITY` in the App Service. I followed the instructions on [this link](https://docs.microsoft.com/en-us/azure/app-service/configure-common#configure-app-settings) to set the environment variables in the Web App to the same values present in the .env file. 

Once I did all this, I pushed my code to GitHub and it was automatically deployed to the App Service. 

I navigated to the app URL and was able to sign in with my Microsoft account. I was then redirected to the app, where I could see the information about my login.

![Successful log in](/images/thread_manager/step1.png)

Now that I have an app that can authenticate users, I need to work on authorization, so that only authorized users can access the app.


