Azure Static Web App – Only Allow Authenticated Users (Entra, B2C): A Step-by-Step Guide

Azure Static Web Apps (SWAs) have revolutionized the way we build and deploy modern web applications. One of the most crucial aspects of any web app is security, and Azure SWAs provide robust authentication mechanisms to ensure that only authorized users can access your app. In this article, we’ll explore how to configure an Azure Static Web App to only allow authenticated users using Azure Active Directory (Azure AD) and Azure Active Directory B2C (Azure AD B2C).

What is Azure Active Directory (Azure AD)?

Azure Active Directory (Azure AD) is a cloud-based identity and access management solution that provides secure access to resources and applications. It allows users to sign in and access multiple applications and resources with a single set of credentials. Azure AD provides a robust and scalable identity platform that integrates with a wide range of applications and services.

What is Azure Active Directory B2C (Azure AD B2C)?

Azure Active Directory B2C (Azure AD B2C) is a cloud-based identity and access management solution that enables you to customize and control how users interact with your applications. It provides a secure and scalable identity platform that allows you to manage consumer identities and authenticate users. Azure AD B2C is designed for consumer-facing applications and provides features such as customizable user flows, password reset, and multi-factor authentication.

Configuring Azure Static Web App Authentication

To configure authentication for your Azure Static Web App, you’ll need to follow these steps:

1. Create an Azure AD or Azure AD B2C tenant

2. Register your Azure Static Web App with Azure AD or Azure AD B2C

3. Configure authentication settings in Azure Static Web App

4. Implement authentication logic in your application code

Step 1: Create an Azure AD or Azure AD B2C Tenant

To create an Azure AD or Azure AD B2C tenant, follow these steps:

• Sign in to the Azure portal (https://portal.azure.com)

• Click on “Create a resource” and search for “Azure Active Directory” or “Azure Active Directory B2C”

• Click on “Create” and follow the wizard to create a new Azure AD or Azure AD B2C tenant

Step 2: Register Your Azure Static Web App with Azure AD or Azure AD B2C

To register your Azure Static Web App with Azure AD or Azure AD B2C, follow these steps:

• Sign in to the Azure portal (https://portal.azure.com)

• Navigate to your Azure AD or Azure AD B2C tenant

• Click on “App registrations” and then click on “New registration”

• Enter a name for your application and select “Web” as the platform

• Enter the redirect URI for your Azure Static Web App (e.g., https://.azurestaticapps.net)

• Click on “Register” to create the app registration

Step 3: Configure Authentication Settings in Azure Static Web App

To configure authentication settings in Azure Static Web App, follow these steps:

• Sign in to the Azure portal (https://portal.azure.com)

• Navigate to your Azure Static Web App

• Click on “Authentication” under “Security” in the left menu

• Click on “Add a provider” and select “Azure Active Directory” or “Azure Active Directory B2C”

• Select the app registration you created in Step 2

• Configure any additional settings as required (e.g., scopes, permissions)

• Click on “Save” to save the authentication settings

Step 4: Implement Authentication Logic in Your Application Code

To implement authentication logic in your application code, you’ll need to use a library such as the Microsoft Authentication Library (MSAL) for JavaScript. Here’s an example of how you can use MSAL to authenticate users:

import { PublicClientApplication } from '@azure/msal-browser';

const clientApp = new PublicClientApplication(
  'your_client_id',
  'https://login.microsoftonline.com/' + 'your_tenant_id'
);

async function handleLogin() {
  try {
    const response = await clientApp.loginPopup({
      scopes: ['openid', 'profile', 'https://graph.microsoft.com/.default'],
      redirectUri: 'https://.azurestaticapps.net'
    });

    if (response !== null) {
      const accessToken = response.accessToken;
      // Use the access token to authenticate the user
    } else {
      console.error('Error logging in:', error);
    }
  } catch (error) {
    console.error('Error logging in:', error);
  }
}

Only Allow Authenticated Users

Once you’ve configured authentication for your Azure Static Web App, you can restrict access to only authenticated users by using the Azure Static Web App authentication middleware. Here’s an example of how you can use the middleware to only allow authenticated users:

import { NextApiRequest, NextApiResponse } from 'next';
import { auth } from '@azure/static-app-auth';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (!auth.validate(req)) {
    return res.status(401).send('Unauthorized');
  }

  // Only authenticated users can access this route
  return res.send('Hello, authenticated user!');
};

export default handler;

Middleware	Description
auth.validate(req)	Validates the authentication token in the request
auth.getUser(req)	Returns the authenticated user’s details

Conclusion

In this article, we’ve explored how to configure an Azure Static Web App to only allow authenticated users using Azure Active Directory (Azure AD) and Azure Active Directory B2C (Azure AD B2C). By following these steps, you can ensure that only authorized users can access your Azure Static Web App.

Remember to replace the placeholders (e.g., your_client_id, your_tenant_id) with the actual values for your Azure AD or Azure AD B2C tenant.

If you have any questions or need further assistance, feel free to ask in the comments below!

Happy coding!

Frequently Asked Question

Get the scoop on Azure Static Web Apps and how to secure them with authenticated users only!