Customizing ASP.NET Core 2.1 Identity UI and Database Tables

ASP.Net Core 2.1 and later has the whole Identity codes that use to leave in the web application with thousands of code and many views packaged as a Razor Class Library. This means that applications that have reference to that class library can use the whole identity in the project without having to have those physical Identity UI.

In this tutorial, I will demonstrate how you can scaffold the ASP.Net Core 2.1 Identity so that you can modify the UI according to your needs. I will also show you how to add additional columns to and rename the  identity tables.

Create the Project

Create a new ASP.Net Core 2.1 project and choose the Web Application Template, make sure the Authentication is Individual User Accounts like so:

Now, press F5 to run the application, and interestingly we have login and register link in the navbar, and when we click on the link it took us to both register and login page. However, if you look at the project folder you wont see any view related to this two pages. So where are the Register and Login view coming from? Let's take a look at the project files below:

As you can see the Areas/Identity/Pages is empty, but take a look at the bin folder there we have IdentityScaffold.dll and IdentityScaffold.Views.dll which means that we were able to see those pages because of  references to Identity Razor Class Library.

How Can we customize the views and the codes?

Customizing means that you want to either generate the source code so you can modify the code and change the behavior or generate the views so that you can apply your own custom css or both.

Scaffold identity into the project

From the solution explorer, right-click on the Identity folder and choose add new scaffolded Item like so:

On the left pane of the Add Scaffold dialog box select Identity and choose Identity in the middle pane and click the add button like so:

You will be presented with a view like below:

Here you can now select the specific identity layout you want to override. In our own case let's choose Login and Register and Select the DataContext Class then click add.

Now you should see within the Identity/Pages that a folder named Account has been created and Login.cshtml and Register.cshtml were also created. There you have it, modify it to your need.

Adding additional column to the ASPNetUser table

Let's add two additional columns to the table.
Open up the Data folder and create a new class named ApplicationUser that implements IdentityUser like so:

 public class ApplicationUser: IdentityUser
    {
        public string Address { get; set; }
        public DateTime DateOfBirth { get; set; }
    }

Now open the ApplicationDbContext and modiy the code like so:

    
public class ApplicationDbContext : IdentityDbContext
    {
        public ApplicationDbContext(DbContextOptions options)
            : base(options)
        {
        }
    }

Next open up the Startup.cs class and within the ConfigureServices method, modify the services.AddDefaultIdentity line to reflect this:

    
services.AddDefaultIdentity()

The last thing we need to do before adding migration is to open up the Register.cshtml.cs and the Login.cshtml.cs and replace all IdentityUser with ApplicationUser.

Renaming Identity Tables

Renaming the identity tables means we want to remove the aspnet prefix from all the tables.

To do this we need to override the OnModelCreating in the DBContext class and call the build.Entity.Totable method like so:

   protected override void OnModelCreating(ModelBuilder builder)
        {
            base.OnModelCreating(builder);
            builder.Entity().ToTable("User");
         
            ........
         
        }

Now delete the migration folder and add migration again.

I hope this helps. Happy coding