- 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-appcd 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} />
.
- Mounts the
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 toApp.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.
- 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
From Visual Studio Code, open a new terminal and run the following commands:
npm install && npm updatenpm 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