How to add Authentication to Angular 7 and Asp.Net Core 3 using VS2019

In this tutorial, we are going to cover a very simple example on how to add authentication to Angular 7 app using Asp.Net Core 3 application in visual studio 2019. Asp.Net Core 3 offers authentication in single page application using the support of Asp.Net Core Identity. So, in this tutorial, we will create an Angular 7 app with authentication using Asp.Net Core 3 and then we will see how it works.

If you want to know, how to add Authentication and Authorization in Angular and Asp.Net Core app using Auth0, then go to this link. how to add authentication and authorization to Angular 6 application using Asp.Net Core and Auth0.

In one of the previous posts, we have also discussed Asp.Net Core 3.0 web API token based authentication example using JWT in VS2019

Prerequisites for this tutorial

Before going to next, you need to install these below dependencies.

.NET Core 3.0:

To install the .NET Core 3.0, just click here to go to site and download the specific .Net Core installer according to your machine. Once the download is complete, then click on the installer to install the .Net Core 3.0 on your system.

Visual Studio 2019 Preview:

To install visual studio 2019, just click here to go to visual studio site and download the visual studio 2019 preview. Once the install is download, then click on the visual studio 2019 installer. Then it will take some time to install.

How to add authentication to Angular 7 app using Asp.Net Core 3 and Identity.

Let’s see how to add authentication to Angular 7 app using Asp.Net Core 3 and Identity.

Step # 1: Create an Angular 7 app with Authentication using Asp.Net Core 3

So, now in this step, we will create an angular 7 app with authentication using Asp.Net Core 3. So, open visual studio 2019, then click on Create a new project and then select Asp.Net Core Web Application and then click on the Next button. Then enter the project name(E.g. AngularAuthWithCore3) in the project name field and then click on Create button. Then select Asp.Net Core 3.0 framework from dropdown and then select Angular template from the template’s list.

Now, click on Change link just under the Authenticate label from the right sidebar and then you will see a new popup window with the name of Change Authentication. Then click on Individual User Account radio button and then click on the OK button as you see in the below screenshot.

And then it will create an Asp.Net Core 3 app with a ClientApp directory containing the Angular 7 as a single page application and built-in support of Identity Server instance as you see in the below screenshot.

Or we can also create an Angular 7 app with Asp.Net Core 3 using this below command.

dotnet new angular --auth Individual

this above command  will also create the same project as we have created in the above using visual studio 2019.

Now, run this project by pressing f5 and then you will see the output as you see in the below screenshot.

Now, click on Fetch data link, and then it will redirect you to login page as you see in the below screenshot. This is because, the authentication is enabled.

Now, click on the Register link and then create a new user using Email and Password as you see in the below screenshot.

After registering a new user successfully, you will be able to access Fetch data link

Let’s understand the project code.

So, go to project folder structure and then open Startup.cs file and then you will see the code in the ConfigureServices method as you see in the below file code.

Line # 1: here added default identity server.

Line # 3: here added Identity Server with as additional AddApiAuthorization helper method that setups some default Asp.Net Core conventions on top of Identity Server.

Line # 5: here added Authentication with an additional AddIdentityServerJwt helper method that configures the app to validate the Jwt tokens.

Now, open appsettings.json file and then you will see the IdentityServer section that describes the list of configured clients.

And as you see in the below screenshot, the login, login-menu, logout components are added.

Thank you for reading. Please keep visiting and sharing this blog .