How to integrate MSAL into Angular 18 Standalone and .Net Application

Hi,

Cover Picture

If you’re a non-premium user, click here to read this article for free. If not, continue reading.

What is MSAL?

MSAL for Angular enables Angular web applications to authenticate users using Azure AD work and school accounts (AAD), Microsoft personal accounts (MSA) and social identity providers like Facebook, Google, LinkedIn, Microsoft accounts, etc. through Azure AD B2C service. It also enables your app to get tokens to access Microsoft Cloud services such as Microsoft Graph.

If you want to know, how to create new application in azure. Check out below link.

How to setup Azure App Registrations to use Entra AD from SPA(Angular)

Integration

Add Msal Angular to your code by adding the below code in your package json. other versions seems to have some issues.

    "@azure/msal-angular": "3.0.4",
    "@azure/msal-browser": "3.1.0",

Add environiment.ts file in your application, and configure the clientId and authority from Microsoft Entra AD.