Enable authentication in a React application by using Azure Active Directory B2C building blocks

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'll 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 will 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 with 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 auth_config_b2c.json file and B2CConfiguration class.
For guidance, see Configure your React app.
Step 5: Run the React application
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...
To call a REST API, follow the guidance how to run the web API
In your browser, go to http://localhost:3000 to view the application
Next steps
Configure authentication options in your own React application by using Azure AD B2C
Check out the MSAL for React documentation
Enable authentication in your own web API