Sign in users in a single-page app by using native authentication SDK - Microsoft identity platform

2025-08-08

Applies to: White circle with a gray X symbol. Workforce tenants Green circle with a white check mark symbol. External tenants (learn more)

In this Quickstart, you use a single-page application (SPA) to demonstrate how to authenticate users by using native authentication SDK. The sample app demonstrates user sign-up, sign-in, and sign-out for both email with password and email one-time passcode authentication flows.

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, see create self-service sign-up user flows for apps in external tenants. Under Identity providers, select your preferred method of authentication, that's, Email with password or Email one-time passcode. For this code sample, you can include the following user attributes in your user flow as the app submit these attributes:
- Given Name
- Surname
- Job Title
- Country/Region
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:

From the app registrations page, select the app registration for which you want to enable public client and native authentication flows.
Under Manage, select Authentication.
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.
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
```
Download the sample. Extract it to a file path where the length of the name is fewer than 260 characters.

Open a terminal window and navigate to the directory that contains the React sample app:
```
    cd typescript/native-auth/react-nextjs-sample
```
Run the following command to install app dependencies:
```
npm install
```

Open a terminal window and navigate to the directory that contains the React sample app:
```
    cd typescript/native-auth/angular-sample
```
Run the following command to install app dependencies:
```
npm install
```

Configure the sample React app

React
Angular

Open src/config/auth-config.ts and replace the following placeholders with the values obtained from the Microsoft Entra admin center:
- Find the placeholder Enter_the_Application_Id_Here then replace it with the Application (client) ID of the app you registered earlier.
- Find the placeholder Enter_the_Tenant_Subdomain_Here then replace it with the tenant subdomain in your Microsoft Entra admin center. 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.
Save the changes.

Open src/app/config/auth-config.ts and replace the following placeholders with the values obtained from the Microsoft Entra admin center:
- Find the placeholder Enter_the_Application_Id_Here then replace it with the Application (client) ID of the app you registered earlier.
- Find the placeholder Enter_the_Tenant_Subdomain_Here then replace it with the tenant subdomain in your Microsoft Entra admin center. 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.
Save the changes.

Configure CORS proxy server

The native authentication API doesn'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.

React
Angular

From your terminal window, run the following commands to start the CORS proxy server:
```
cd typescript/native-auth/react-nextjs-sample/
npm run cors
```
To start your React app, open another terminal window, then run the following commands:
```
cd typescript/native-auth/react-nextjs-sample/
npm run dev
```
Open a web browser and go to http://localhost:3000/.
To sign up for an account, select Sign Up, then follow the prompts.
After you sign up, test sign-in and password reset by selecting Sign In and Reset Password buttorespectively.

From your terminal window, run the following commands to start the CORS proxy server:
```
cd typescript/native-auth/angular-sample/
npm run cors
```
To start your React app, open another terminal window, then run the following commands:
```
cd typescript/native-auth/angular-sample/
npm run start
```
Open a web browser and go to http://localhost:4200.
To sign up for an account, select Sign Up, then follow the prompts.
After you sign up, test sign-in and password reset by selecting Sign In and Reset Password buttorespectively.

Share via

Quickstart: Sign in users in a single-page app by using native authentication JavaScript SDK