Secure SPA in .Net Core WebApi + Angular project

Question

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 ?

when you get the 401 error on the token you obviously redirect to the login prompt right ? — Aravind
– Aravind, Commented Jun 4, 2020 at 8:24
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
– Nicolas C, Commented Jun 4, 2020 at 9:00
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
– Aravind, Commented Jun 4, 2020 at 9:23
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
– Nicolas C, Commented Jun 4, 2020 at 9:29

Nicolas C · Accepted Answer · 2020-06-04 14:50:41Z

2

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.

answered Jun 4, 2020 at 14:50

Nicolas C

7545 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ε Г И І И О Over a year ago

Sorry if this is a dumb question, but when you have authentication set up this way, how does the SPA know which tokens to sent when calling the API? How does that part still work when you remove msal from the client?

Nicolas C Over a year ago

When returning from AzureAD, the token is stored in a cookie, so the frontend sends it automatically with each request

halfer · Accepted Answer · 2022-08-29 20:28:01Z

0

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();
        }
    });

I'd be curious to know if this does what you want.

edited Aug 29, 2022 at 20:28

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jun 4, 2020 at 14:23

alphaz18

2,7581 gold badge7 silver badges5 bronze badges

1 Comment

Nicolas C Over a year ago

Thanks I found that too, but it's not enough, I've posted an answer.

Collectives™ on Stack Overflow

Secure SPA in .Net Core WebApi + Angular project

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related