Skip to main content

How to Scaffold Identity UI in ASP.NET Core 2.1

Talking Dotnet ASP.NET Core

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.

Adding identity to ASP.NET Core 2.1 project

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.

Default Identity UI pages

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.

Add Scaffolding Identity

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

Add Scaffolding Identity

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.

Selecting register page from option

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.

After scaffolding the items

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!!!!

Error while identity scaffolding

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.

Customized UI for identity registration

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 Buy Me A Coffee

12 thoughts to “How to Scaffold Identity UI in ASP.NET Core 2.1”

  2. While using Identity and models using scaffolding in core2.2, a typical error comes “More than one DbContext named ‘myproject.Models.myprojectContext’ was found. Specify which one to use by providing its fully qualified name using its exact case ”

    I am putting this so that it could be helpful for many like me, who struggled a lot to find out simple solution.

    I got answer to this this here https://bugsncodes.blogspot.com/2019/04/more-than-one-dbcontext-named-was-found-specify-which-one-to-use.html

    Reply

  6. Nevermind… Got it…

    Username = user.UserName;
    Input = new InputModel —–> ERROR HERE should be user.Name
    Birthday = Input.Birthday, -> should be user.Name
    Email = user.Email,
    PhoneNumber = user.PhoneNumber
    };

    Reply

  7. Great article!

    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:

    (…)

    [BindProperty]
    public InputModel Input { get; set; }

    public class InputModel
    {
    //PCABRAL – Added Attributes
    [Required]
    [DataType(DataType.Text)]
    [Display(Name = “Full name”)]
    public string Name { get; set; }

    [Required]
    [DataType(DataType.Date)]
    [Display(Name = “Birthday”)]
    public DateTime Birthday { get; set; }

    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [Phone]
    [Display(Name = “Phone number”)]
    public string PhoneNumber { get; set; }
    }

    (…)

    public async Task OnGetAsync()
    {
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
    return NotFound($”Unable to load user with ID ‘{_userManager.GetUserId(User)}’.”);
    }

    Username = user.UserName;
    Input = new InputModel —–> ERROR HERE

    Reply

  8. Thank you for the update. My question that baffled me after trying your first post (https://www.talkingdotnet.com/add-identity-ui-asp-net-core-2-1-application/) are now all resolved. Migration is part of scaffold, and there is a choice of pages that I can override (I wonder how to add a page or two later, but I am sure we will figure it out!). Yippee!

    Now I am curious if this will be available “as API”. In other words is it possible to set up Identity as UI for Angular application.

    Reply

  9. Why not extend this to include other common identity management requirements? For example Role CRUD, user Role CRUD.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *