Tutorial: Sign in users in Angular SPA by using native authentication JavaScript SDK

Applies to: External tenants (learn more)

In this tutorial, you learn how to sign in users into an Angular single-page app (SPA) by using native authentication JavaScript SDK.

In this tutorial, you:

Prerequisites

• Complete the steps in Sign up users into Angular single-page app by using native authentication JavaScript SDK.

Create a sign-in component

1. Use Angular CLI to generate a new component for sign-in page inside the components folder by running the following command:

   cd components
   ng generate component sign-in
   

2. Open the sign-in/sign-in.component.ts file and replace its contents with content from sign-in.component.ts

3. Open the sign-in/sign-in.component.html file and add the contents from sign-in.component.html.

   • The following logic in sign-in.component.ts determines the next step after the initial sign-in attempt. Depending on the result, it displays either the password or one-time code form in sign-in.component.html to guide the user through the appropriate part of the sign-in process:

         const result: SignInResult = await client.signIn({ username: this.username });
     
         if (result.isPasswordRequired()) {
             this.showPassword = true;
             this.showCode = false;
         } else if (result.isCodeRequired()) {
             this.showPassword = false;
             this.showCode = true;
         } else if (result.isCompleted()) {
             this.isSignedIn = true;
             this.userData = result.data;
         }
     

     • The SDK's instance method, signIn() starts the sign-in flow.

     • In the sign-in.component.html file:

     <form *ngIf="showPassword" (ngSubmit)="submitPassword()">
         <input type="password" [(ngModel)]="password" name="password" placeholder="Password" required />
         <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Password' }}</button>
     </form>
     <form *ngIf="showCode" (ngSubmit)="submitCode()">
         <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
         <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Code' }}</button>
     </form>
     

Update the routing module

Open the src/app/app.routes.ts file, then add the route for the sign-in component:

import { SignInComponent } from './components/sign-in/sign-in.component';

export const routes: Routes = [
    ...
    { path: 'sign-in', component: SignInComponent },
];

Test the sign-in functionality

1. To start the CORS proxy server, run the following command in your terminal:

   npm run cors
   

2. To start the Angular app, open another terminal window, then run the following command:

   npm start
   

3. Open a web browser and navigate to http://localhost:4200/sign-in. A sign-in form appears.

4. To sign in into an existing account, input your details, select the Sign In button, then follow the prompts.

Enable sign-in with an alias or username

You can allow users who sign in with an email address and password to also sign in with a username and password. The username also called an alternate sign-in identifier, can be a customer ID, account number, or another identifier that you choose to use as a username.

You can assign usernames to the user account manually via the Microsoft Entra admin center or automate it in your app via the Microsoft Graph API.

Use the steps in Sign in with an alias or username article to allow your users to sign-in using a username in your application:

1. Enable username in sign-in.
2. Create users with username in the admin center or update existing users to by adding a username. Alternatively, you can also automate user creation and updating in your app by using the Microsoft Graph API.

Next step