How to add user authentication to .NET Core 2.1 Angular app?

Question

I'm using Visual Studio 2017 since Individual User Account option was disabled in the Angular template I was wandering how I will add user authentication to it? I just started using VS 2017 and .Net Core 2.1 so I was searching the net if there are documentation on how to do it but I can't find anything.

I saw an answer where I would just need to enter dotnet new angular --auth Individual in the command prompt but I wasn't able to use it since I'm using Window 8.1 and the command was for .Net Core 3 and VS 2019

I already read all the google results regarding this topic and nothing helped me. I even used other search engine hoping better results but nothing.

Answer 1

Using Dotnet core 3.0 with Entityframework core 3.0 and Identityserver4, you can have an application with Angular as a front end and Asp.net Core 3.0 as a backend. See this link

Authentication and authorization for SPAs

First you need to download dotnet core 3.0 sdk from here .

Then open command prompt and use

dotnet new angular -o <output_directory_name> -au Individual

This will create the project for you.

Now in Visual studio go to Tools > Options > Environment > Preview Features and check

Use Previews of the .NET Core SDK (Requires Restart)

and restart visual studio.

After that open .csProj file in the directory of your project and hit save. This will ask you to save the solution file which was just created when you opened the project in visual studio.

Save the .sln file in the same directory of your .csproj and then Clean the solution and Rebuild the solution.

You will have your Angular app with Asp.net core as the backend and Authentication and authorization provided for you out of the box running.

Here is the sample screenshot of the app after that you have done all the steps

Notice in the project directory you will have a app.db file and in ConfigureServices method of startup.cs you will see

services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));

The template uses Sqlite by default and you can change it to Sql server by installing the Microsoft.EntityFrameworkCore.SqlServer NuGet package and in startup.cs file changing this

services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));

to

services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

and make sure you update your connectionstring in appsettings.json file.

Answer 2

First thing, you don't need VS 2019 to install .NET Core 3.

The .NET Core SDK is a command line application and is independent of VS 2019. However, if you want to create templates from within the UI, then vs 2019 (and for some debugging/building abilities maybe). Alternatively VS Code also works.

The regular ASP.NET Core Identity (not to be confused with IdentityServer 4 which is a different open source project) isn't sooooo much suitable for SPA authentications. ASP.NET Core Identity only supports cookie authentications, which means logging in like in an MVC application and protect the SPA and Views from unauthorized access (i.e. the Index page where the SPA app is loaded).

This should work w/o any additional setup as long as the SPA and the WebAPI are hosted on the same domain and in the same application. If you have the Angular app and WebApi/Rest service split into multiple projects that may not work well and you need an OpenIDConnect flow to authorize.

Too keep in mind: You'd need to take additional steps to protect your Api against XSRF (Cross Site Request Forgery) requests. In the past that used to be quite tricky, but there are newer mechanisms now (i.e. HttpOnly, Secure cookie flags and SameSite).

You can also add authentication yourself, it requires some more work. For SPAs (such as Angular and react), you need an OpenID provider such OpenIddict or IdentityServer 4 with a implicit OpenID Connect flow and the usage of the oidc-client java script library to perform it, usually setting up a client with IdSrv4 and setting an callback url, where the user gets redirected after the login.

IdSrv4 has some examples on how to implement it on like JavaScript client example on the JavaScript side which is based on the Quickstart 6: JavaScript tutorial from IdSrv4 docs.

One you got the token, you pass it in the Authorize header with every request to your WebAPI.