Edit

Enable authentication in your own React Application by using Azure Active Directory B2C

  • Article

This article shows you how to add Azure Active Directory B2C (Azure AD B2C) authentication to your own React single-page application (SPA). Learn how to integrate a React application with the MSAL for React authentication library.

Use this article with the related article titled Configure authentication in a sample React single-page application. Substitute the sample React app with your own React app. After you complete the steps in this article, your application will accept sign-ins via Azure AD B2C.

Prerequisites

Review the prerequisites and integration steps in the Configure authentication in a sample React single-page application article.

Step 1: Create a React app project

You can use an existing React app, or create a new React App. To create a new project, run the following commands in your command shell:

npx create-react-app my-app
cd my-app

Step 2: Install the dependencies

To install the MSAL Browser and MSAL React libraries in your application, run the following command in your command shell:

npm i @azure/msal-browser  @azure/msal-react

Install the react-router-dom version 5.*. The react-router-dom package contains bindings for using React Router in web applications. Run the following command in your command shell:

npm i react-router-dom@5.3.3

Install the Bootstrap for React (optional, for UI):

npm i bootstrap react-bootstrap

Step 3: Add the authentication components

The sample code is made up of the following components. Add these components from the sample React app to your own app:

  • public/index.html- The bundling process uses this file as a template and injects the React components into the <div id="root"> element. If you open it directly in the browser, you see an empty page.

  • src/authConfig.js - A configuration file that contains information about your Azure AD B2C identity provider and the web API service. The React app uses this information to establish a trust relationship with Azure AD B2C, sign in and sign out the user, acquire tokens, and validate the tokens.

  • src/index.js - The JavaScript entry point to your application. This JavaScript file:

    • Mounts the App as the root component into the public/index.html page's <div id="root"> element.
    • Initiates the MSAL PublicClientApplication library with the configuration defined in the authConfig.js file. The MSAL React should be instantiated outside of the component tree to prevent it from being reinstantiated on re-renders.
    • After instantiation of the MSAL library, the JavaScript code passes the msalInstance as props to your application components. For example, <App instance={msalInstance} />.

  • src/App.jsx - Defines the App and Pages components:

    • The App component is the top level component of your app. It wraps everything between MsalProvider component. All components underneath MsalProvider have access to the PublicClientApplication instance via context and all hooks and components provided by MSAL React. The App component mounts the PageLayout and its Pages child element.

    • The Pages component registers and unregister the MSAL event callbacks. The events are used to handle MSAL errors. It also defines the routing logic of the app.

    Important

    If the App component file name is App.js, change it to App.jsx.

  • src/pages/Hello.jsx - Demonstrate how to call a protected resource with OAuth2 bearer token.

    • It uses the useMsal hook that returns the PublicClientApplication instance.
    • With PublicClientApplication instance, it acquires an access token to call the REST API.
    • Invokes the callApiWithToken function to fetch the data from the REST API and renders the result using the DataDisplay component.

  • src/components/NavigationBar.jsx - The app top navigation bar that has the sign-in, sign-out, edit profile and call REST API reset buttons.

    • It uses the AuthenticatedTemplate and UnauthenticatedTemplate, which only render their children if a user is authenticated or unauthenticated, respectively.
    • Handle the login and sign out with redirection and popup window events.

  • src/components/PageLayout.jsx

    • The common layout that provides the user with a consistent experience as they navigate from page to page. The layout includes common user interface elements such as the app header, NavigationBar component, footer and its child components.
    • It uses the AuthenticatedTemplate, which renders its children only if a user is authenticated.

  • src/components/DataDisplay.jsx - Renders the data return from the REST API call.

  • src/styles/App.css and src/styles/index.css - CSS styling files for the app.

  • src/fetch.js - Fetches HTTP requests to the REST API.

Step 4: Configure your React app

After you add the authentication components, configure your React app with your Azure AD B2C settings. Azure AD B2C identity provider settings are configured in the authConfig.js file.

For guidance, see Configure your React app.

Step 5: Run the React application

  1. From Visual Studio Code, open a new terminal and run the following commands:

    npm install && npm update
npm start

    The console window displays the port number of where the application is hosted:

    Listening on port 3000...

  2. To call a REST API, follow the guidance how to run the web API

  3. In your browser, go to http://localhost:3000 to view the application

Next steps