How to remove "User name" field from Registration and use Email as Username? #10435

4 Answer(s)

• 

  0

  AI-Bot created 14 hours ago

  Support Team ABP Agent

  • Override the registration UI page and remove the UserName input.
  • Set UserName = EmailAddress before calling AccountAppService.RegisterAsync(...) so the backend always uses email as the username.
  • Keep email uniqueness validation as-is (ABP/Identity will already validate uniqueness and return a proper error).

  1) MVC / Razor Pages UI (HttpApi.Host or Web project)

  1. Create (or override) the register page under your UI project:

     • Pages/Account/Register.cshtml
     • Pages/Account/Register.cshtml.cs

  2. In Register.cshtml, remove the username field:

  @page
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
  @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
  @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
  
  @using Microsoft.AspNetCore.Mvc.Localization
  @using Volo.Abp.Account.Localization
  @model YourCompany.YourApp.Pages.Account.CustomRegisterModel
  @inject IHtmlLocalizer<AccountResource> L
  
  <div class="card mt-3 shadow-sm rounded">
      <div class="card-body p-5">
          <strong>
              @L["AlreadyRegistered"]
              <a href="@Url.Page("./Login", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})"
                 class="text-decoration-none">@L["Login"]</a>
          </strong>
  
          <form method="post" class="mt-4">
              <abp-input asp-for="Input.EmailAddress" auto-focus="true" />
  
              @if (!Model.IsExternalLogin)
              {
                  <abp-input asp-for="Input.Password" />
              }
  
              <abp-button button-type="Primary" type="submit" class="btn-lg btn-block mt-4">
                  @L["Register"]
              </abp-button>
          </form>
      </div>
  </div>
  

  3. In Register.cshtml.cs, set username from email when registering. Create a custom model inheriting ABP’s RegisterModel and override the registration method:

  using System.Threading.Tasks;
  using Volo.Abp.Account;
  using Volo.Abp.Account.Web.Pages.Account;
  
  namespace YourCompany.YourApp.Pages.Account;
  
  public class CustomRegisterModel : RegisterModel
  {
      public CustomRegisterModel(IAccountAppService accountAppService)
          : base(accountAppService)
      {
      }
  
      protected override async Task RegisterLocalUserAsync()
      {
          // Ensure the backend gets username even though UI doesn't ask for it:
          Input.UserName = Input.EmailAddress;
  
          await base.RegisterLocalUserAsync();
      }
  }
  

  That’s enough to:

  • remove the username input from the form
  • automatically use email as username for local registration

  2) Blazor UI

  If you are using Blazor and still seeing the MVC register page, you can override the same page by adding it under your Blazor project:

  • YourApp.Blazor/Pages/Account/Register.cshtml
  • YourApp.Blazor/Pages/Account/Register.cshtml.cs

  Apply the same changes above (remove Input.UserName from the .cshtml, set Input.UserName = Input.EmailAddress in the model code-behind).

  ---

  References (validated)

  • https://abp.io/community/articles/setup-email-confirmation-on-user-registration-q0vgxang
  • https://docs.abp.io/en/abp/latest/Modules/Account

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  salih created 14 hours ago

  Support Team .NET Developer

  Hello, could you share the version information and UI information of your project?

  Save Cancel
• 

  0

  filipjerzyna created 14 hours ago

  I'm using ABP v 10.0.3 , Blazor Web Assembly project

  Save Cancel
• 

  0

  salih created 12 hours ago

  Support Team .NET Developer

  You can create and override the file under the HttpApiHost project at /Pages/Account/Register.cshtml. There is documentation here: https://abp.io/docs/latest/framework/ui/mvc-razor-pages/customization-user-interface

  Save Cancel