How to authenticate against an Asp.Net Core Identity from an Angular(Or another SPA)?

Question

I'm creating a service that will have Asp.Net Core as a backend, angular as a frontend. I'm testing several things on the different templates that microsoft provides for the SPA.

So I created one with this command with .Net core 5 cli:

dotnet new angular -au Individual

Seems to work, but my understanding is that when I need to redirect the user to the loading page(because not connected or not enough rights), I will get redirected to the UI of a page of Asp.Net Core.

I've seen that I can customize this page(well, create a scaffolded version and customize it), but it still worries me:

• This might make several back/forth between the angular app and a razor page
• The design of our app is that the Asp.Net server is only providing an API and the static files of the angular app, so having suddently some pages served directly from the asp.net server seems wrong.
• I'm using an angular library for all the theming/styling of my button, checkbox, header, have the material style, ... It seems cumbersome to have to recreate all those style a second time for the login pages.
• I will have some external hardware device that will connect to this API, so I think that anyway they should be able to do everything without using the asp.net razor pages provided for the login.

So my question, how to authenticate against an Asp.Net core server that is using the asp.net core identity?

Answer 1

In the examples MS push you down the Identity route and use a Razor Class Library to control the login/register functions. It's set up to use OpenId Connect (https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowAuth) and to use redirects at each stage. This is annoying if you want to keep everything pure Angular and have exposed WebAPI end-points for authentication, I don't think the OpenID Connect precludes this.

The .NET documentation isn't very clear how to flex the solution to fit a pure SPA solution, but you can by writing your own WebAPI controller to deal with register and login etc.

The best MS documentation I've found so far is here: https://learn.microsoft.com/en-us/dotnet/architecture/microservices/secure-net-microservices-web-applications/

Also this answer is really useful: Use .NET Core Identity with an API.

And check out: Login to Angular SPA with asp .net core 3 API without redirect outside of SPA

I'm initially using the Razor login/registration flow but have scaffolded the pages so I can customise them. That gives me time to get on with the important bits of the Angular project, but I can easily come back and replace the login flow later. The scaffolded pages contain the authentication flow so it becomes easier to see what's going on.

There is documentation on how to scaffold the Razor pages into your project here: https://learn.microsoft.com/en-us/aspnet/core/security/authentication/scaffold-identity

If you want a roll-your-own type solution, check out https://jasonwatmore.com/post/2019/10/14/aspnet-core-3-simple-api-for-authentication-registration-and-user-management

A useful YouTube video on JwtBearerAuthentication: https://youtu.be/h2hGGPHLqqc

Here is an excellent article from Rick Stahl: https://weblog.west-wind.com/posts/2021/Mar/09/Role-based-JWT-Tokens-in-ASPNET-Core

Answer 2

Adding a new answer for clarity.

I've been through all of the links in my first answer and pulled together a WebApi project which is standalone from my Angular project. It uses the Identity store (EF) but doesn't use IdentityServer and doesn't include the UI (i.e. API only). It has an Account controller which supports registration and authentication and adds Authorize to the WeatherForecast GET method as an example.

Source code is available here: https://github.com/Brubning/Noodle.WebCore.Api

I've documented the steps I took to build up the project in the README. You could easily take this and push it into a dotnet Angular project created with dotnet new angular (Don't include -au Individual).