Angular +.NET Core + Microsoft Identity

I am trying to create a .NET Core 8.0 web site, that uses Angular (SPA) and Microsoft Identity. Basically, to access this site you must have a AD (Azure) login to access the site. I created the site with the below template:

In program.cs I added:

app.UseAuthentication();

But I am not getting the popup to login.

I have configured Azure AD via the connected services and see the info in appsettings.json.

Here are my settings:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAd"));

// Add services to the container.
builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();
app.UseAuthentication();
app.MapControllers();

app.MapFallbackToFile("/index.html");

app.Run();

Any help is appropriated!

To enable Azure AD authentication in your Angular application and trigger the login popup (or redirect, depending on your preference), you need to configure the client side alongside the server.

Microsoft provides a comprehensive guide on how to enable authentication in Angular using Azure AD. This guide explains the process step by step.

Azure offers two key libraries to facilitate this integration:

• @azure/msal-browser: The core library for authentication and token management.
• @azure/msal-angular: A wrapper around msal-browser, tailored for Angular applications.

To implement Azure AD authentication, just follow the official documentation to configure your application. The setup includes registering your app in Azure AD, updating the angular configuration, and using the MsalService to handle login flows.

By correctly setting up the libraries, you can choose between a popup or redirect flow for authentication based on your application's requirements.