How to Scaffold Identity UI in ASP.NET Core 2.1

One of the new features of ASP.NET Core 2.1 is, Identity as UI library. This new feature saves you from all the hassle of adding and configuring Identity to an ASP.NET Core application. Earlier, I posted about adding Identity as UI in ASP.NET Core 2.1 application and you will find identity UI nuget package is added and no identity code. This is a great feature, but what if you want to customize the UI? Well, ASP.NET Core 2.1.0-preview2 is now available, and it supports scaffolding of identity UI. In this post, let’s see how to scaffold identity UI in ASP.NET Core 2.1 and customize it.

How to Scaffold Identity UI in ASP.NET Core 2.1

To start, please do the following installation (ignore if already done).

Download and get started with .NET Core 2.1 Preview 2, on Windows, MacOS, and Linux:

Visual Studio 2017 Preview (15.7 Preview 3 at the time of writing): Visual Studio and Visual Studio “Preview” can be installed side-by-side on the same device. It will have no impact on your current stable VS installation.

First thing first, open Visual Studio “Preview” version, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you will get the following prompt. Select ASP.NET Core 2.1 and choose the Web Application (MVC) template. Also, click on Change authentication link and select Individual User Accounts.

Once the project is created, look at the project structure. You will see identity UI nuget package is added as a reference and only _ViewStart.cshtml file present in Areas->Identity->Pages folder to support identity. There are no controllers, models and views present related to identity in the solution structure.

Let’s see how to scaffold identity UI. To do that, right-click on the project in the solution explorer and select Add -> New Scaffolded Item.

You will see following dialog box. Select the Identity scaffolder and click Add.

Once you click Add, you will be prompted with the following dialog box. In this dialog box, you can see a list of all the files responsible for Identity integration. You can choose one or multiple files which you want to override. For the demo, I selected Account\Register. You have to also provide the data context class. You can either choose one of the existing or create a new data context class.

Once you do that, visit solution structure again (Area folder). You will find Register.cshtml and all related code is added to the solution. You will also find ScaffoldingReadme.txt file added to the root of the project. This is just a text file having configuration instructions. The IdentityHostingStartup.cs file contains the configuration of the Identity related services.

Now, let’s change some text in the Register page. Change the content of “Create a new account” heading to “Register with us”. That’s it. Run the app now and visit the register link. Boom!!!!

Well, the error message says it all. There is a typo in the specified layout path. Instead of .cshtml extension, the extension is .chstml. Don’t worry, it will be fixed in the final release. For now, let’s fix it. Open the _ViewStart.cshtml file and update the layout path to the correct extension. Run the app and you should see the updated text in the register page.

Conclusion

To conclude, the Identity as UI library is a time-saving feature which allows you to include the Identity framework with ease and without dealing with 50 different files and thousand lines of code. If you want to have more control on the default implementation, you can anytime use the new identity scaffolder to add the identity code in your app.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then

So I scaffolded Identity UI, and added 2 Extra Attributes on ApplicationUser (:IdentityUser).

Changed the Register (Page and cs) and the new atts are shown and recorded in the Database [AspNetUsers] correctly. When I added the two atts to ProjectAreasIdentityPagesAccountManageIndex.cshtml and Index.cshtml.cs, I get a runtime error just viewing the Manage Page, on the OnGetAsync(), as the “Input” is null: