Edit

Sign in users in a sample React single-page app (SPA)

  • Article

This guide uses a sample React single-page application (SPA) to demonstrate how to add authentication to a SPA. This SPA enables users to sign in and sign out by using you Azure Active Directory (Azure AD) for customers tenant. The sample uses the Microsoft Authentication Library for JavaScript (MSAL.js) to handle authentication.

Prerequisites

  • Although any IDE that supports React applications can be used, Visual Studio Code is used for this guide. It can be downloaded from the Downloads page.
  • Node.js.
  • Azure AD for customers tenant. If you don't already have one, sign up for a free trial.

Register the SPA in the Microsoft Entra admin center

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.

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 API 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 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 SPA with the 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.

Clone or download sample SPA

To get the sample SPA, you can choose one of the following options:

  • Clone the repository using Git:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Download the sample

If you choose to download the .zip file, extract the sample app file to a folder where the total length of the path is 260 or fewer characters.

Install project dependencies

  1. Open a terminal window in the root directory of the sample project, and enter the following snippet to navigate to the project folder:

    cd 1-Authentication\1-sign-in-react\SPA

  2. Install the project dependencies:

    npm install

Configure the sample SPA

  1. Open SPA\src\authConfig.js and replace the following with the values obtained from the Microsoft Entra admin center
    • clientId - The identifier of the application, also referred to as the client. Replace Enter_the_Application_Id_Here with the Application (client) ID value that was recorded earlier from the overview page of the registered application.
    • authority - The identity provider instance and sign-in audience for the app. Replace Enter_the_Tenant_Name_Here with the name of your Azure AD customer tenant.
    • The Tenant ID is the identifier of the tenant where the application is registered. Replace the _Enter_the_Tenant_Info_Here with the Directory (tenant) ID value that was recorded earlier from the overview page of the registered application.
  2. Save the file.

Run your project and sign in

All the required code snippets have been added, so the application can now be called and tested in a web browser.

  1. Open a new terminal by selecting Terminal > New Terminal.

  2. Run the following command to start your web server.

    cd 1-Authentication\1-sign-in-react\SPA
npm start

  3. Open a web browser and navigate to http://localhost:3000/.

  4. Sign-in with an account registered to the Azure AD customer tenant.

  5. Once signed in the display name is shown next to the Sign out button.

Next steps

Enable self-service password reset