Introduction

Static Web App is one of Microsoft's incredible products that enable you to speed up the development of your app using modern programming frameworks such as React, Vue.JS, and Angular, among others. This is accomplished through its pre-built and pre-rendered static front ends, and serverless API backends allowing you to establish a web presence with global reach and minimal effort.

Advantages

• Static Web Apps assures High availability

• It allows dynamic scaling for your app.

• Provides a continuous integration/continuous deployment methodology for developing and deploying your application (CI/CD).

Today, I'll demonstrate how to implement authentication on an Azure Static Web App using a single Azure Active Directory Tenant.

Why is this significant?

For example, if you have a Static Web App and wish to restrict access to only members of your company's Active Directory Tenant (i.e. the app is a private app or app built for a selected group), this tutorial is the answer.

What is the meaning of the term "Azure Tenant"?

Consider a Tenant to be similar to a user account on a typical website that identifies an individual, but in this case, it represents an organization. For example, through that user account, you can change settings, publish content, or subscribe to different service plans which give you access to a variety of other features. This is similar to what an Azure Tenant is. An azure tenant has a one-to-one relationship with an Azure subscription and through a subscription, you create and manage resources like App services, Virtual machines, Virtual networks, configurations etc.

Official definition

A dedicated and trusted instance of Azure AD. The tenant is automatically created when your organization signs up for a Microsoft cloud service subscription. These subscriptions include Microsoft Azure, Microsoft Intune, or Microsoft 365. An Azure tenant represents a single organization

What you will require

• Active Directory Tenant ID

• AAD_CLIENT_ID

• AAD_SECRET

Note: This kind of authentication is called Custom Authentication and is only supported on the Static Web App Standard plan.

Let us proceed with the following steps.

Check the Pricing Plan

• On the Azure Portal, ensure that you are on a Standard App service plan.

• Navigate to the Static web App

• On the sidebar menu, select Hosting

• Check to see that you are on the Standard Plan and upgrade to the Standard plan if this is not the case.

Register the App in Azure Active Directory

• Next, Navigate to the Azure Active Directory on the Portal

• Click on App registration

• Select + New Registration and fill in the required parameters to register a new App.

Screenshot 1: Showing App registration page.

On the following page, take note of the Application (client) ID and the Directory (tenant) ID

Select Add a Certificate or secret as shown in the screenshot above.

• Click on + New client secret

• Enter a Description for the secret.

• Click Add

• Copy the Value of the secret highlighted below and save it on a notepad.

Select Authentication from the side menu, and choose the single Tenant account type as shown below. Make sure the ID tokens box is checked (used for implicit and hybrid flows), then Select Configure.

If you go to API Permissions at this point, you should see the following permission.

Next, navigate to the Azure App service portal, and go to the Static Web App. On the sidebar menu, select Configuration and add the two app settings (AADClientID and AADSecret) and their respective values.

Now, open your Visual Studio Code IDE and make sure to follow the highlighted settings in staticwebapp.config.json, as shown below.

Refer to the names you specified in the Static Web App configuration settings above (i.e., AADClientID and AADSecret). The tenant ID you copied earlier should be replaced with <TENANT_ID>. Finally, run git push to update your repository's changes.

When any user that is not a member of the Active Directory Tenant tries to access the application, he/she gets the message indicated in the screenshot below.

Conclusion

Using a Single Tenant, we were able to successfully authenticate users in the Azure Static Web App. This is useful if you want only organisation members to have access to your application.

I hope this makes you want to explore the Azure Static web app from the Azure portal.

Until next time, stay healthy.