Skip to content

Latest commit

 

History

History
101 lines (64 loc) · 4.38 KB

sample-single-page-app-react-sign-in.md

File metadata and controls

101 lines (64 loc) · 4.38 KB
Raw
title description author manager ms.author ms.service ms.subservice ms.topic ms.date
Sign in users in a sample React single-page application
Learn how to configure a sample React single-page app (SPA) to sign in and sign out users.
garrodonnell
celestedg
godonnell
entra-external-id
customers
sample
04/10/2024

Sign in users in a sample React single-page app (SPA)

This guide uses a sample React single-page application (SPA) to demonstrate how to add authentication to a SPA. This SPA enables users to sign in and sign out by using your external tenant. The sample uses the Microsoft Authentication Library for JavaScript (MSAL.js) to handle authentication.

Prerequisites

Register the SPA in the Microsoft Entra admin center

[!INCLUDE active-directory-b2c-register-app] [!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Grant API permissions

[!INCLUDE active-directory-b2c-grant-delegated-permissions]

Create a user flow

[!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Associate the SPA with the user flow

[!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Clone or download sample SPA

To obtain the sample application, you can either clone it from GitHub or download it as a .zip file.

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Download the sample. Extract it to a file path where the length of the name is fewer than 260 characters.

Install project dependencies

  1. Open a terminal window in the root directory of the sample project, and enter the following snippet to navigate to the project folder:

    cd 1-Authentication\1-sign-in-react\SPA

  2. Install the project dependencies:

    npm install

Configure the sample SPA

  1. Open SPA\src\authConfig.js and replace the following with the values obtained from the Microsoft Entra admin center:

    • Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.
    • Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.

  2. Save the file.

Run your project and sign in

All the required code snippets have been added, so the application can now be called and tested in a web browser.

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

  2. Run the following command to start your web server.

    cd 1-Authentication\1-sign-in-react\SPA
npm start

  3. Open a web browser and navigate to http://localhost:3000/.

  4. Sign-in with an account registered to the external tenant.

  5. Once signed in the display name is shown next to the Sign out button.

Related content