Secure SPA in .Net Core WebApi + Angular project

1
votes

I'm building an application based on the .Net Core 3.1 + Angular template. The application is using Azure AD to authenticate users.

The backend is configured with this:

services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
        .AddAzureADBearer(options => Configuration.Bind("AzureActiveDirectory", options));

The frontend is using @azure/msal-angular to redirect users at the first non authenticated call to the Api. This works well.

Now I want to secure even more the application. I would like that the angular files or any static files NOT to be downloaded when if the user is not authenticated.

How do I manage to do that ? How to protect the application on the root folder and redirect the users to the Azure AD login page if they are not authenticated ?

2
angularasp.net-coreazure-active-directoryasp.net-core-webapimsal
when you get the 401 error on the token you obviously redirect to the login prompt right ? – Aravind
right, but this is the javascript which is doing the job, which means that the javascript code has already been downloaded. I would like that the application not be downloaded at all if the user is not authenticated. The javascript is served by the backend in a ClientApp folder, it is configured in the backend with a app.UseSpa. – Nicolas C
but to find if the user is authenticated or not some request has to happen from client side which means some code needs to run there which will obviously be served to the browser. – Aravind
On the first GET "/", the backend should be able to test is the context is authenticated or not and redirect to the AzureAd login page. There is a request from the client, but if the javascript can redirect, the backend can do it too. – Nicolas C

2 Answers

2
votes

I found a way to achieve this. (alphaz18 your answer is correct but incomplete)

First since the backend is going to do the redirection to the Azure AD login, we can completely remove the @azure/msal-angular module from the SPA.

Now we need to configure the backend to do the connection with this

services.AddAzureAD(options => Configuration.Bind("AzureActiveDirectory", options));

Before the UseSpa, we need to kick in the authentication (as found by alphaz18)

app.Use(async (context, next) =>
{
    if (!context.User.Identity.IsAuthenticated)
    {
        await context.ChallengeAsync(AzureADDefaults.AuthenticationScheme);
    }
    else
    {
        await next();
    }
});

Since I still want the API to be accessible by bearer authentication, I've found this answer to mix both correctly.

On the Azure AD side, we don't need 2 app registered anymore, only one is enough.

0
votes

as per this post: Securing a SPA by authorization server before first load

You can try to do this before you usespa: 

 app.Use(async (context, next) =>
    {
        if (!context.User.Identity.IsAuthenticated)
        {
            await context.ChallengeAsync("oidc");
        }
        else
        {
            await next();
        }
    });

not sure if this helps you, but I'd be curious to know if this does what you want.