Edit

Configure authentication in an Azure Static Web App by using Azure AD B2C

  • Article

This article explains how to add Azure Active Directory B2C (Azure AD B2C) authentication functionality to an Azure Static Web App. For more information, check out the Custom authentication in Azure Static Web Apps article.

Overview

OpenID Connect (OIDC) is an authentication protocol that's built on OAuth 2.0. Use the OIDC to securely sign users in to an Azure Static Web App. The sign in flow involves the following steps:

  1. Users go to the Azure Static Web App and select Sign-in.
  2. The Azure Static Web App initiates an authentication request and redirects users to Azure AD B2C.
  3. Users sign up or sign in and reset the password. Alternatively, they can sign in with a social account.
  4. After users sign in successfully, Azure AD B2C returns an ID token to the Azure Static Web App.
  5. Azure Static Web App validates the ID token, reads the claims, and returns a secure page to users.

When the access token expires or the app session is invalidated, Azure Static Web App initiates a new authentication request and redirects users to Azure AD B2C. If the Azure AD B2C SSO session is active, Azure AD B2C issues an access token without prompting users to sign in again. If the Azure AD B2C session expires or becomes invalid, users are prompted to sign in again.

Prerequisites

  • A premium Azure subscription.
  • If you haven't created an app yet, follow the guidance how to create an Azure Static Web App.
  • Familiarize yourself with the Azure Static Web App staticwebapp.config.json configuration file.
  • Familiarize yourself with the Azure Static Web App App Settings.

Step 1: Configure your user flow

When users try to sign in to your app, the app starts an authentication request to the authorization endpoint via a user flow. The user flow defines and controls the user experience. After users complete the user flow, Azure AD B2C generates a token and then redirects users back to your application.

If you haven't done so already, create a user flow or a custom policy. Repeat the steps to create three separate user flows as follows:

  • A combined Sign in and sign up user flow, such as susi. This user flow also supports the Forgot your password experience.
  • A Profile editing user flow, such as edit_profile.
  • A Password reset user flow, such as reset_password.

Azure AD B2C prepends B2C_1_ to the user flow name. For example, susi becomes B2C_1_susi.

Step 2: Register a web application

To enable your application to sign in with Azure AD B2C, register your app in the Azure AD B2C directory. The app that you register establishes a trust relationship between the app and Azure AD B2C.

During app registration, you specify a redirect URI. The redirect URI is the endpoint to which users are redirected by Azure AD B2C after they authenticate with Azure AD B2C. The app registration process generates an application ID, also known as the client ID, that uniquely identifies your app. After your app is registered, Azure AD B2C uses both the application ID and the redirect URI to create authentication requests. You also create a client secret, which your app uses to securely acquire the tokens.

Step 2.1: Register the app

To register your application, follow these steps:

  1. Sign in to the Azure portal.

  2. If you have access to multiple tenants, select the Settings icon in the top menu to switch to your Azure AD B2C tenant from the Directories + subscriptions menu.

  3. In the Azure portal, search for and select Azure AD B2C.

  4. Select App registrations, and then select New registration.

  5. Under Name, enter a name for the application (for example, My Azure Static web app).

  6. Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).

  7. Under Redirect URI, select Web and then, in the URL box, enter https://<YOUR_SITE>/.auth/login/aadb2c/callback. Replace the <YOUR_SITE> with your Azure Static Web App name. For example: https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c/callback. If you configured an Azure Static Web App's custom domains, use the custom domain in the redirect URI. For example, https://www.example.com/.auth/login/aadb2c/callback

  8. Under Permissions, select the Grant admin consent to openid and offline access permissions checkbox.

  9. Select Register.

  10. Select Overview.

  11. Record the Application (client) ID for later use, when you configure the web application.

    Screenshot of the web app Overview page for recording your web application I D.

Step 2.2: Create a client secret

  1. In the Azure AD B2C - App registrations page, select the application you created, for example My Azure Static web app.
  2. In the left menu, under Manage, select Certificates & secrets.
  3. Select New client secret.
  4. Enter a description for the client secret in the Description box. For example, clientsecret1.
  5. Under Expires, select a duration for which the secret is valid, and then select Add.
  6. Record the secret's Value for use in your client application code. This secret value is never displayed again after you leave this page. You use this value as the application secret in your application's code.

Step 3: Configure the Azure Static App

Once the application is registered with Azure AD B2C, create the following application secrets in the Azure Static Web App's application settings. You can configure application settings via the Azure portal or with the Azure CLI. For more information, check out the Configure application settings for Azure Static Web Apps article.

Add the following keys to the app settings:

Setting Name Value
AADB2C_PROVIDER_CLIENT_ID The Web App (client) ID from step 2.1.
AADB2C_PROVIDER_CLIENT_SECRET The Web App (client) secret from step 2.2.

Important

Application secrets are sensitive security credentials. Don't share this secret with anyone, distribute it within a client application, or check into source control.

3.1 Add an OpenID Connect identity provider

Once you've added the app ID and secret, use the following steps to add the Azure AD B2C as OpenId Connect identity provider.

  1. Add an auth section of the configuration file with a configuration block for the OIDC providers, and your provider definition.

    {
  "auth": {
    "identityProviders": {
      "customOpenIdConnectProviders": {
        "aadb2c": {
          "registration": {
            "clientIdSettingName": "AADB2C_PROVIDER_CLIENT_ID",
            "clientCredential": {
              "clientSecretSettingName": "AADB2C_PROVIDER_CLIENT_SECRET"
            },
            "openIdConnectConfiguration": {
              "wellKnownOpenIdConfiguration": "https://<TENANT_NAME>.b2clogin.com/<TENANT_NAME>.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
            }
          },
          "login": {
            "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
            "scopes": [],
            "loginParameterNames": []
          }
        }
      }
    }
  }
}

  2. Replace <TENANT_NAME> with the first part of your Azure AD B2C tenant name (for example, https://contoso.b2clogin.com/contoso.onmicrosoft.com).

  3. Replace <POLICY_NAME> with the user flows or custom policy you created in step 1.

Step 4: Check the Azure Static Web APP

  1. Navigate to /.auth/login/aadb2c. The /.auth/login points the Azure Static app login endpoint. The aadb2c references to your OpenID Connect identity provider. The following URL demonstrates an Azure Static app login endpoint: https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c.

  2. Complete the sign up or sign in process.

  3. In your browser debugger, run the following JavaScript in the Console. The JavaScript code will present information about the sign in user.

    async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

await getUserInfo();

Tip

If you can't run the above JavaScript code in your browser, navigate to the following URL https://<app-name>.azurewebsites.net/.auth/me. Replace the <app-name> with your Azure Web App.

Next steps