Edit

Prepare your customer tenant to authenticate users in a React single-page app (SPA)

  • Article

Before your applications can interact with Microsoft identity platform they must be registered in a customer tenant that you manage and must be associated with a user flow.

In this article, you learn how to register your application and record identifies, create a user flow and associate that user flow with your application.

Prerequisites

An Azure subscription. If you don't have one, create a free account before you begin.

This Azure account must have permissions to manage applications. Any of the following Azure AD roles include the required permissions:

  • Application administrator
  • Application developer
  • Cloud application administrator

If you haven't already created your own customer tenant, create one now. You can use an existing customer tenant if you have one.

Register the application and record identifiers

To enable your application to sign in users with Microsoft Entra, Azure Active Directory (Azure AD) for customers must be made aware of the application you create. The app registration establishes a trust relationship between the app and Microsoft Entra. When you register an application, Azure AD generates a unique identifier known as an Application (client) ID, a value used to identify your app when creating authentication requests.

The following steps show you how to register your app in the Microsoft Entra admin center:

  1. Sign in to the Microsoft Entra admin center.

  2. If you have access to multiple tenants, make sure you use the directory that contains your Azure AD for customers tenant:

    1. Select the Directories + subscriptions icon in the toolbar.

    2. On the Portal settings | Directories + subscriptions page, find your Azure AD for customers directory in the Directory name list, and then select Switch.

  3. On the sidebar menu, select Azure Active Directory.

  4. Select Applications, then select App Registrations.

  5. Select + New registration.

  6. In the Register an application page that appears, enter your application's registration information:

    1. In the Name section, enter a meaningful application name that will be displayed to users of the app, for example ciam-client-app.

    2. Under Supported account types, select Accounts in this organizational directory only.

  7. Select Register.

  8. The application's Overview pane is displayed when registration is complete. Record the Directory (tenant) ID and the Application (client) ID to be used in your application source code.

Add a platform redirect URL

To specify your app type to your app registration, follow these steps:

  1. Under Manage, select Authentication

  2. On the Platform configurations page, select Add a platform, and then select Single-page application option.

  3. For the Redirect URIs enter http://localhost:3000/, then select Configure.

  4. On the Platform configurations page, select Add URI, then enter http://localhost:3000/redirect.html.

  5. Select Save to save your changes.

Grant sign-in permissions

  1. From the App registrations page, select the application that you created (such as ciam-client-app) to open its Overview page.

  2. Under Manage, select API permissions.

  3. Under Configured permissions, select Add a permission.

  4. Select Microsoft APIs tab.

  5. Under Commonly used Microsoft APIs section, select Microsoft Graph.

  6. Select Delegated permissions option.

  7. Under Select permissions section, search for and select both openid and offline_access permissions.

  8. Select the Add permissions button.

  9. At this point, you've assigned the permissions correctly. However, since the tenant is a customer's tenant, the consumer users themselves can't consent to these permissions. To address this problem, you as the admin must consent to these permissions on behalf of all the users in the tenant:

    1. Select Grant admin consent for <your tenant name>, then select Yes.

    2. Select Refresh, then verify that Granted for <your tenant name> appears under Status for both scopes.

Create a sign-in and sign-up user flow

Follow these steps to create a user flow a customer can use to sign in or sign up for an application.

  1. Sign in to the Microsoft Entra admin center.

  2. If you have access to multiple tenants, make sure you use the directory that contains your Azure AD for customers tenant:

    1. Select the Directories + subscriptions icon in the toolbar.

    2. On the Portal settings | Directories + subscriptions page, find your Azure AD for customers directory in the Directory name list, and then select Switch.

  3. On the sidebar menu, select Azure Active Directory.

  4. Select External Identities, then select User flows.

  5. Select + New user flow.

  6. On the Create page:

    1. Enter a Name for the user flow, such as SignInSignUpSample.

    2. In the Identity providers list, select Email Accounts. This identity provider allows users to sign-in or sign-up using their email address.

      Note

      Additional identity providers will be listed here only after you set up federation with them. For example, if you set up federation with Google or Facebook, you'll be able to select those additional identity providers here.

    3. Under Email accounts, you can select one of the two options. For this tutorial, select Email with password.

      • Email with password: Allows new users to sign up and sign in using an email address as the sign-in name and a password as their first factor credential.

      • Email one-time-passcode: Allows new users to sign up and sign in using an email address as the sign-in name and email one-time passcode as their first factor credential.

        Note

        Email one-time passcode must be enabled at the tenant level (All Identity Providers > Email One-time-passcode) for this option to be available at the user flow level.

    4. Under User attributes, choose the attributes you want to collect from the user upon sign-up. By selecting Show more, you can choose attributes and claims for Country/Region, Display Name, and Postal Code. Select OK. (Users are only prompted for attributes when they sign up for the first time.)

  7. Select Create. The new user flow appears in the User flows list. If necessary, refresh the page.

To enable self-service password reset, use the steps in Enable self-service password reset article.

Associate the application with your user flow

Although many applications can be associated with your user flow, a single application can only be associated with one user flow. A user flow allows configuration of the user experience for specific applications. For example, you can configure a user flow that requires users to sign-in or sign-up with a phone number or email address.

  1. On the sidebar menu, select Azure Active Directory.

  2. Select External Identities, then User flows.

  3. Select the self-service sign-up user flow that you created earlier from the list, for example, SignInSignUpSample.

  4. Under Use, select Applications.

  5. Select Add application.

  6. Select the application from the list such as ciam-client-app or use the search box to find the application, and then select it.

  7. Choose Select.

Next steps

Start building your React single-page app