Prepare a React single-page app (SPA) for authentication

Article
05/25/2023

After registration is complete, you can create a React project using an integrated development environment (IDE). This guide demonstrates how to create a React single-page app using npm and create files needed for authentication and authorization.

Prerequisites

Completion of the prerequisites and steps in Prepare your customer tenant for building a React single-page app (SPA))
Although any IDE that supports React applications can be used, Visual Studio Code is used for this guide. This can be downloaded from the Downloads page.
Node.js

Create a new React project

Use the following tabs to create a React project within Visual Studio Code.

Open Visual Studio Code, select File > Open Folder.... Navigate to and select the location in which to create your project.
Open a new terminal by selecting Terminal > New Terminal.
Run the following commands to create a new React project with the name reactspalocal, change to the new directory and start the React project. A web browser will open with the address http://localhost:3000/ by default. The browser remains open and re-renders for every saved change.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Install identity and bootstrap packages

Identity related npm packages must be installed in the project to enable user authentication. For project styling, Bootstrap will be used.

In the Terminal bar, select the + icon to create a new terminal. A separate terminal window will open with the previous node terminal continuing to run in the background.
Ensure that the correct directory is selected (reactspalocal) then enter the following into the terminal to install the relevant msal and bootstrap packages.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Creating the authentication configuration file

In the src folder, create a new file called authConfig.js.

Open authConfig.js and add the following code snippet:

    /*
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */

 import { LogLevel } from '@azure/msal-browser';

 /**
  * Configuration object to be passed to MSAL instance on creation. 
  * For a full list of MSAL.js configuration parameters, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
  */

 export const msalConfig = {
     auth: {
         clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
         authority: 'https://Enter_the_Tenant_Name_Here.ciamlogin.com/', // Replace "Enter_the_Tenant_Name_Here" with your tenant name
         redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
         postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
         navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
     },
     cache: {
         cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
         storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
     },
     system: {
         loggerOptions: {
             loggerCallback: (level, message, containsPii) => {
                 if (containsPii) {
                     return;
                 }
                 switch (level) {
                     case LogLevel.Error:
                         console.error(message);
                         return;
                     case LogLevel.Info:
                         console.info(message);
                         return;
                     case LogLevel.Verbose:
                         console.debug(message);
                         return;
                     case LogLevel.Warning:
                         console.warn(message);
                         return;
                     default:
                         return;
                 }
             },
         },
     },
 };

 /**
  * Scopes you add here will be prompted for user consent during sign-in.
  * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
  * For more information about OIDC scopes, visit: 
  * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
  */
 export const loginRequest = {
     scopes: [],
     extraQueryParameters: {
         dc: "ESTS-PUB-EUS-AZ1-FD000-TEST1"
     }
 };

Replace the following values with the values from the Azure portal.
- Replace Enter_the_Application_Id_Here with the Application (client) ID value that was recorded earlier from the overview page of the registered application.
- 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.

Modify index.js to include the authentication provider

All parts of the app that require authentication must be wrapped in the MsalProvider component. You instantiate a PublicClientApplication then pass it to MsalProvider.

In the src folder, open index.js and replace the contents of the file with the following code snippet to use the msal packages and bootstrap styling:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);

Next steps

Add sign-in and sign-out functionality to your app.