Quickstart: Sign in users in a React single-page app by using native authentication (preview)

Applies to: Workforce tenants External tenants (learn more)

In this quickstart, you use a React single-page application (SPA) to demonstrate how to authenticate users by using native authentication API. The sample app demonstrates user sign-up, sign-in, sign-out and password reset with an email and a password.

Prerequisites

• An Azure account with an active subscription. If you don't already have one, Create an account for free.
• This Azure account must have permissions to manage applications. Any of the following Microsoft Entra roles include the required permissions:
  • Application Administrator
  • Application Developer
• An external tenant. To create one, choose from the following methods:
  • Use the Microsoft Entra External ID extension to set up an external tenant directly in Visual Studio Code. (Recommended)
  • Create a new external tenant in the Microsoft Entra admin center.
• A user flow. For more information, refer to create self-service sign-up user flows for apps in external tenants. Ensure that the user flow includes the following user attributes:
  • Given Name
  • Surname
• Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
  • Application (client) ID
  • Directory (tenant) ID
• Add your application to the user flow
• Node.js.
• Visual Studio Code or another code editor.

Enable public client and native authentication flows

To specify that this app is a public client and can use native authentication, enable public client and native authentication flows:

1. From the app registrations page, select the app registration for which you want to enable public client and native authentication flows.
2. Under Manage, select Authentication.
3. Under Advanced settings, allow public client flows:
   1. For Enable the following mobile and desktop flows select Yes.
   2. For Enable native authentication, select Yes.
4. Select Save button.

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-native-javascript-samples.git

Alternatively, Download the sample, then 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 and navigate to the directory that contains the React sample app:

   cd API\React\ReactAuthSimple
   

2. Run the following command to install app dependencies:

   npm install
   

Configure the sample React app

1. In your code editor, open src\config.ts file.

2. Find the placeholder Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.

3. Save the changes.

Configure CORS proxy server

The native authentication APIs don't support Cross-Origin Resource Sharing (CORS) so you must set up a proxy server between your SPA app and the APIs.

This code sample includes a CORS proxy server that forwards requests to native authentication API URL endpoints. The CORS proxy server is a Node.js server that listens on port 3001.

To configure the proxy server, open the proxy.config.js file, then the find the placeholder:

• tenantSubdomain 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 subdomain, learn how to read your tenant details.
• tenantId and replace it with the Directory (tenant) ID. If you don't have your tenant ID, learn how to read your tenant details.

Run and test your app

You've now configured the sample app and it's ready to run.

1. From your terminal window, run the following commands to start the CORS proxy server:

   cd API\React\ReactAuthSimple
   npm run cors
   

2. To start your React app, open another terminal window, then run the following commands:

   cd API\React\ReactAuthSimple
   npm start
   

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

4. To sign up for an account, select Sign Up, then follow the prompts.

5. After you sign up, test sign-in and password reset by selecting Sign In and Reset Password respectively.

Related content

• Set up a reverse proxy for a single-page app that uses native authentication API by using Azure Function App.
• Use Azure Front Door as a reverse proxy in production environment for a single-page app that uses native authentication.
• Build a React single-page app that uses native authentication API from scratch.