Configure ASP.NET Core 3.1 Angular SPA, Identity Server 4 (Authentication) with PostgreSQL

In this tutorial we will see how to configure an ASP.NET Core 3.1 web application with AngularJS SPA as front end and Secure User membership implementation using Identity Server 4 on PostgreSQL database.

ASP.Net Core 3.1 Angular Identity Server 4 Postgresql 11 - TutLinks
ASP.Net Core 3.1 Angular Identity Server 4 Postgresql 11 – TutLinks

Table of Contents

Source Code

Full Source Code of this tutorial is available here

Prerequisites

  • Visual Studio 2019 (Community/Professional/Enterprise Edition) v16.4.0 or higher
  • PostgreSQL Database Server installed. Version 11 or Higher
  • Install PostgreSQL on Windows PC
  • A browser preferably Chrome, Firefox or IE 11 or higher
  • PgAdmin to access PostgreSQL Server Database
  • Windows 10 PC

Install PostgreSQL

First, we will install PostgreSQL on your PC or access remote PostgreSQL database.
To install PostgreSQL on your Windows 10 PC, check this video that details on how to install and configure PostgreSQL 11 on your Windows 10 PC.

Once the installation is done, launch pgAdmin. We will revisit the pgAdmin dashboard once the setup is completely done and a database with Asp.Net Core 3.1 membership authentication related schema will appear here.

Update Visual Studio 2019 with .NET Core 3.1

To get latest .NET Core 3.1, for that open Visual Studio Installer and update the installer itself if it prompts for an update. Update your Visual Studio 2019 to have .NET Core 3.1.
Now Click on update your Visual Studio to the version 16.3.10 or later. You can do this on community edition too and ensure you have .Net Core 3.1 version installed which got released in December 2019

What Next ?

Using Identity Server 4 on PostgreSQL database

Now lets create an ASP.NET Core 3.1 application that will talk to this PostgreSQL database. We will configure the creation of the ASP.NET Core application to have Authentication at the Individual User Accounts. And then we generate migration scripts that will dump the authentication related tables in to the database.

Create ASP.NET Core 3.1 Angular application with Individual User Accounts

Now launch the Microsoft Visual Studio 2019 IDE. From the Get Started section, select the option to Create a new project.
Look for and select the ASP.NET Core Web Application and click on Next to proceed.
Give Project name and location of your choice.
For example, name the project ASPNET-Core3-Angular-PostgreSQL-Authentication and click Create.

In the Create a new ASP.NET Core web application step, choose Angular template. Because we want our application to have an Angular based front-end. You may also choose React.js, Web Application to has ASP.NET razor Pages or Web Application (Model-View-Controller).

Now in the right pane click on Change hyperlink under Authentication label to configure our application to have Individual User Accounts and click on OK.
Now click on Create.
Now this template configuration will generate all the code related to Authentication that involves Migration Schema that will generate tables for users, roles, claims, logins etc.,

The template also has angular screens automagically generated for Register, Login, Forgot Password, Login Menu.
This scaffolded template eases the developer to focus on the application functionality rather than setting the user authentication from scratch.

Delete Migrations directory

As the default database this template is configured to work with is MSSQL, we want to change this to work with PostgreSQL.
For that, delete the Migrations directory which has MSSQL related migration schema that is located under the Data directory.

Update Connection string

Also update the default connection string present in appsettings.json to point to the local or remote PostgreSQL database.

For local PostgreSQL server, the connection string goes like

Server=localhost;Port=5432;Database=aspnetmembership;User Id=postgres;Password=121212

Update Dependencies

Remove Microsoft.EntityFrameworkCore.SqlServer

Now remove the reference to Microsoft.EntityFrameworkCore.SqlServer which is located under Dependencies -> Packages
As we want to configure our application to target PostgreSQL instead of MSSQL.
In the solution explorer, navigate to Dependencies -> Packages right-click on Microsoft.EntityFrameworkCore.SqlServer and remove.

Install Npgsql Entity Framework Core Provider

Now install PostgreSQL package for EntityFrameworkCore.
To do that right click on the project ASPNET-Core3-Angular-PostgreSQL-Authentication in the solution explorer and click Manage NuGet Packages…
This will open up a window to manage the Nuget packages for our project.

Now navigate to Browse menu, search for Npgsql.EntityFrameworkCore.PostgreSQL and from the version selector choose the latest stable version 3.1.0 and Install
Click on OK for the Preview Changes prompt.

Ensure that all the dependent packages are having version compatibility with .NET Core 3.1

Update Startup.cs

Now open Startup.cs file and locate ConfigureServices method.
Find and replace UseSqlServer with UseNpgsql in order to point our DbContext to our PostgreSQL database.
Also set the lambda expression options.SignIn.RequireConfirmedAccount to false. This will disable the requirement to the registered users to confirm their email before they could login. This setting is suitable for development purposes only. And do not forget to enable it to true once you have email server configured for the customer facing applications.

Update malformed .csproj file

Now open the .csproj file of ASPNET-Core3-Angular-PostgreSQL-Authentication and ensure the execution commands are properly written. If you see repeated double hyphens like

npm run build -- --prod and npm run build:ssr -- --prod

then change it to

npm run build --prod and for ssr npm run build:ssr --prod

Install Angular CLI

Now install angular cli. For that in the search box at the top of IDE type developer command prompt and open it.
It will open up a command prompt window with current directory defaulted to project’s root directory.
Now set the current directory to ClientApp with the command

cd ClientApp

and then run the command to install Angular CLI

npm install --save-dev @angular/cli@latest

This will install latest version of angular cli and saves it as dev dependency in the package.json located in ClientApp directory. This operation will take a while.

Add-Migration scripts

Now we will generate PostgreSQL based migrations schema.
Open the Package Manager Console by navigating to
Tools -> Nuget Package Manager -> Package Manager Console
Type in the command

add-migration PostgreSQLIdentitySchema

This will generate Migrations directory adjacent to Data directory.
Migrations directory will have two c-sharp files named datetimestamp_migrationname.cs to create identity schema
and ApplicationDbContextModelSnapshot.cs that has the snapshot of the models that get migrated with this schema.

Update-Database

Now that we have migration schema with asp.net core 3.1 Authentication auto-generated for PostgreSQL, let’s update our newly created database aspnetmembership to have the tables created related to authentication.
For that run the following command to create or update database migration

update-database

This command will create a database named aspnetmembership which is configured in the connection string located in appsettings.json
Based on the auto-generated schema located in Migrations directory, the asp.net core 3.1 membership tables will be created in the aspnetmembership database.

View the PostgreSQL Database Created based on EntityFrameworkCore and Migration Command

To view the new database created, go to pgAdmin refresh the Databases node that is present under Servers -> PostgreSQL 11

You will find the new database named aspnetmembership created by the update-database migration command.
Look for the tables node present under Schemas node of the aspnetmembership database.

Build the solution ( Ctrl + Shift + B )

Now in Visual Studio 2019 IDE, go to build menu and click on the Build Solution. This process will take a while as we are building the solution for the first time.
For the first time all the dependent packages for the front-end angular app will be downloaded in the node modules directory and then the entire solution will be built.

Run the application

Click on the dropdown next to Run button and select your favorite browser from which you want to launch the web app. Let’s proceed with chrome.
Now click on the IIS Express and wait for the application to open in default browser configured for your PC.
You can notice the Default home page with navigation menu having links for Register and Login pages.

Access non-authenticated page

The Counter navigation menu item is a non-authenticated page. Lets click on it to access it.

Access authenticated page

The Fetch Data navigation menu item is an authenticated page. As we have not yet registered, clicking on Fetch data menu will redirect the page to login.
In order for users to login, they must be registered.

Register

So navigate to registration page and provide email, password and then provide confirm password.
Click on Register. Next click on login.
As we disabled email confirmation for registered users, clicking on login will automatically redirect us to the authenticated app.
Now that we are authenticated, click on Fetch data and you will be shown the default dummy weather data which is an authenticated page.

Manage Profile

Notice the email in the navigation menu, click on it to customize your profile, change email, password and also an option to download all the personal data.

Logout

Click on Logout and you will see the navigation menu shows Register and Login links.

Check registered users in database.

Now in order to check the registered users in the PostgreSQL database,go back to pgAdmin and
expand the nodes aspnetmembership -> Schemas -> Tables right-click on AspNetUsers table and select the option View/Edit Data.
You will notice the user entry with the details we registered with.

Video Tutorial

You can follow along with this video tutorial if you have following prerequisites or you can just have a watch.

Tags: , , , ,

Navule Pavan Kumar Rao

I am a Full Stack Software Engineer with the Product Development experience in Banking, Finance, Corporate Tax and Automobile domains. I use SOLID Programming Principles and Design Patterns and Architect Software Solutions that scale using C#, .NET, Python, PHP and TDD. I am an expert in deployment of the Software Applications to Cloud Platforms such as Azure, GCP and non cloud On-Premise Infrastructures using shell scripts that become a part of CI/CD. I pursued Executive M.Tech in Data Science from IIT, Hyderabad (Indian Institute of Technology, Hyderabad) and hold B.Tech in Electonics and Communications Engineering from Vaagdevi Institute of Technology & Science.

Leave a Reply