Skip to content

Latest commit

 

History

History
148 lines (111 loc) · 6.98 KB

tutorial-single-page-app-react-prepare-spa.md

File metadata and controls

148 lines (111 loc) · 6.98 KB
Raw
title description author manager ms.author ms.date ms.service ms.topic
Tutorial: Prepare an application for authentication
Register a tenant application and configure it for a React SPA.
OwenRichards1
CelesteDG
owenrichards
01/31/2024
identity-platform
tutorial

Tutorial: Create a React single-page application and prepare it for authentication

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

In this tutorial:

[!div class="checklist"]

  • Create a new React project
  • Configure the settings for the application
  • Install identity and bootstrap packages
  • Add authentication code to the application

Prerequisites

  • Completion of the prerequisites and steps in Tutorial: Register an application.
  • Although any IDE that supports React applications can be used, the following Visual Studio IDEs are used for this tutorial. They can be downloaded from the Downloads page. For macOS users, it's recommended to use Visual Studio Code.
    • Visual Studio 2022
    • Visual Studio Code
  • Node.js.

Create a new React project

Use the following tabs to create a React project within the IDE.

Visual Studio

  1. Open Visual Studio, and then select Create a new project.

  2. Search for and choose the Standalone JavaScript React Project template, and then select Next.

  3. Enter a name for the project, such as reactspalocal.

  4. Choose a location for the project or accept the default option, and then select Next.

  5. In Additional information, select Create.

  6. From the toolbar, select Start Without Debugging to launch the application. A web browser will open with the address http://localhost:3000/ by default. The browser remains open and re-renders for every saved change.

  7. Create additional folders and files to achieve the following folder structure:

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

Visual Studio Code

  1. Open Visual Studio Code, select File > Open Folder.... Navigate to and select the location in which to create your project.

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

  3. 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

  4. Create additional folders and files to achieve the following folder structure:

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

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.

Visual Studio

  1. In the Solution Explorer, right-click the npm option and select Install new npm packages.
  2. Search for @azure/MSAL-browser, then select Install Package. Repeat for @azure/MSAL-react.
  3. Search for and install react-bootstrap.
  4. Select Close.

Visual Studio Code

  1. 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.

  2. 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

To learn more about these packages refer to the documentation in msal-browser and msal-react.

Creating the authentication configuration file

  1. In the src folder, open authConfig.js and add the following code snippet:

    :::code language="javascript" source="~/../ms-identity-docs-code-javascript/react-spa/src/authConfig.js" :::

  2. Replace the following values with the values 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 - This is composed of two parts:
      • The Instance is endpoint of the cloud provider. Check with the different available endpoints in National clouds.
      • The Tenant ID is the identifier of the tenant where the application is registered. Replace Enter_the_Tenant_Info_Here with the Directory (tenant) ID value that was recorded earlier from the overview page of the registered application.

  3. Save the file.

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.

  1. 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:

    :::code language="javascript" source="~/../ms-identity-docs-code-javascript/react-spa/src/index.js" :::

  2. Save the file.

Next steps

[!div class="nextstepaction"] Tutorial: Create components for sign in and sign out in a React single-page app