Simple SSO Implementation for an Angular Page using Microsoft Entra ID

Single Sign-On (SSO) lets users sign in once and access multiple applications without entering their username and password again. For Angular applications used in enterprise environments, Microsoft Entra ID is a secure and commonly used identity platform.

In this blog, we will show a simple example where a single Angular page requires users to sign in using Entra ID before they can access it.

What We Will Build

A minimal setup:

User → Angular Page → Microsoft Entra ID Login → Angular Page (Authenticated)

Components involved:

Component	Purpose
Angular Application	User Inerface
Microsoft Entra ID	Authentication Identity Provider
MSAL	Handle login and token management

Basic flow:

1. User opens the Angular application.

2. Angular redirects the user to the Entra ID login page.

3. User signs in with corporate credentials.

4. Entra ID returns authentication tokens.

5. Angular loads the protected page.

Step 1: Register the Application in Entra ID

Create an application registration in Entra ID

Steps:

1. Go to Azure Portal

2. Navigate to

Microsoft Entra ID → App registrations

3.       Click New Registration

Provide:

Settings	Value
Name	AngulerSSODemo
Supported Account Types	Single Tenant
Redirect URL	application URL with port if needed (https://localhost:4200)

After creation, copy:

• Client ID

• Tenant ID

Step2:  Sample Angular Project for Entra ID Authentication

This sample project shows the following:

• An Angular Single Page Application (SPA)

• User login using Microsoft Entra ID

• Authentication handled by the Microsoft Authentication Library (MSAL)

• A simple protected page that displays the logged-in user

Project Structure

A minimal structure could look like this:

angular-entra-demo

│
├── src
│   ├── app
│   │   ├── auth
│   │   │   └── auth-config.ts
│   │   │
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.module.ts
│   │   └── app-routing.module.ts
│   │
│   ├── index.html
│   └── main.ts
│
├── package.json
└── angular.json

This structure keeps authentication configuration separate from UI logic, which is a good practice.

Install Required Libraries

Create a new Angular project

ng new angular-entra-demo
cd angular-entra-demo

Install MSAL libraries

npm install @azure/msal-browser @azure/msal-angular

@azure/msal-browser is the MSAL package specifically designed for browser-based applications

Create File.

src/app/auth/auth-config.ts
import { PublicClientApplication } from '@azure/msal-browser';
export const msalInstance = new PublicClientApplication({
  auth: {
    clientId: "YOUR_CLIENT_ID",
    authority: "https://login.microsoftonline.com/YOUR_TENANT_ID",
    redirectUri: "http://localhost:4200"
  },
  cache: {
    cacheLocation: "localStorage"
  }
});

Replace

• YOUR_CLIENT_ID

• YOUR_TENANT_ID

with values from your Entra ID app registration.

PublicClientApplication is the main class used to initialize authentication in a browser application. It represents the authentication client that communicates with Entra ID.

This object is responsible for:

• initiating login

• acquiring tokens

• managing user accounts

Angular Module Configuration

Edit app.module.ts file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MsalModule } from '@azure/msal-angular';
import { InteractionType } from '@azure/msal-browser';

import { AppComponent } from './app.component';
import { msalInstance } from './auth/auth-config';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MsalModule.forRoot(
      msalInstance,
      {
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: ["user.read"]
        }
      },
      {
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map()
      }
    )
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Note:

In many authentication examples, the scope User.Read is used because it is a default delegated permission provided by Microsoft Graph. It allows the application to sign in the user and read their basic profile information. In real applications, the Angular frontend typically requests scopes defined by the backend API instead of Microsoft Graph permissions.

Simple Login Component.

Edit app.component.ts file
import { Component } from '@angular/core';
import { MsalService } from '@azure/msal-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  username: string | undefined;

  constructor(private msalService: MsalService) {}

  login() {
    this.msalService.loginRedirect();
  }

  logout() {
    this.msalService.logoutRedirect();
  }

  getUser() {
    const account = this.msalService.instance.getActiveAccount();
    this.username = account?.username;
  }
}

Simple UI Page

Edit app.component.html
<h2>Angular Entra ID Authentication Demo</h2>

<button (click)="login()">Login</button>

<button (click)="getUser()">Get Logged User</button>

<button (click)="logout()">Logout</button>

<div *ngIf="username">
  <h3>Welcome {{username}}</h3>
</div>

This simple page allows users to:

• login

• retrieve their account info

• logout

 Run the Application

Start the Angular app:

Start the Angular app using ng serve

Flow:

1. Click Login

2. Redirect to Entra ID

3. Authenticate

4. Return to Angular page

5. Click Get Logged User

Conclusion

Using Microsoft Entra ID for SSO in an Angular application allows secure sign-in and a smooth experience for users across enterprise apps. With MSAL, OAuth 2.0, and OpenID Connect, developers can easily add modern authentication to Angular SPAs.

The main steps are:

• Register the Angular app in Entra ID

• Set up authentication

• Add MSAL to the Angular app

• Protect routes and APIs

• Use tokens securely

Following this approach provides strong security, scalability, and enterprise-level authentication for modern cloud applications.

 Happy Coding!