Technical Support: Customizing Login/Registration Logic in ABP 9.0.4 (Blazor Server + Tiered Auth) #10376

1 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  • Tiered auth-server setup (Blazor Server UI + separated Auth Server): Do all login/registration UI + backend flow overrides in the Auth Server (the project that actually hosts /Account/Login and issues the auth cookies/tokens). The Blazor Server UI typically redirects to the Auth Server for authentication; changing Blazor UI won’t change the auth flow itself.

  ---

  • 1) Override UI (HTML/CSS) in the Auth Server

    1. In the AuthServer project, create:
       • Pages/Account/Login.cshtml
       • Pages/Account/Register.cshtml
    2. Copy the original markup from the Account Module page(s) and modify HTML/CSS as you need.
    3. Keep theme styling by continuing to use the Account layout (usually it’s already applied by the theme). Practically, the safest approach is: copy the original page and only adjust the parts you need (classes/structure), so you don’t accidentally drop required ABP tag helpers/bundles.

    (This is the official “override Razor Page” mechanism used by ABP.)

  ---

  • 2) Override backend logic: extend/replace LoginModel / RegisterModel ABP’s recommended way for Razor Pages is to create your own PageModel that derives from the module’s PageModel and then point the .cshtml to your custom model using @model.

    Custom login PageModel (Auth Server project):

  using Microsoft.AspNetCore.Authentication;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Options;
    using Volo.Abp.Account.Web;
    using Volo.Abp.Account.Web.Pages.Account;
  
    namespace MyCompany.MyProject.AuthServer.Pages.Account;
  
    public class CustomLoginModel : LoginModel
    {
        public CustomLoginModel(
            IAuthenticationSchemeProvider schemeProvider,
            IOptions<AbpAccountOptions> accountOptions)
            : base(schemeProvider, accountOptions)
        {
        }
  
        public override async Task<IActionResult> OnPostAsync(string action)
        {
            // 1) Your custom validation / 3rd-party checks here
  
            // 2) Then continue with the default ABP login behavior
            return await base.OnPostAsync(action);
        }
    }
  

  Then in Pages/Account/Login.cshtml set:

  @page
    @model MyCompany.MyProject.AuthServer.Pages.Account.CustomLoginModel
  

  Do the same pattern for Register: create CustomRegisterModel : RegisterModel, override the method(s) you need, then set @model in Register.cshtml.

  Notes (important):

  • Naming convention matters: If your class name doesn’t end with LoginModel / RegisterModel, you may need to replace via DI. If you follow the convention, you can typically just reference it from the .cshtml using @model as shown in ABP docs.
  • In some setups using OpenIddict-supported account pages, ABP docs note the base model can differ. (If your solution uses the OpenIddict variants, follow that note and inherit from the OpenIddict-supported model instead of plain LoginModel.)

  ---

  • 3) Persist extra fields in AbpUsers (tiered + separated Auth Server) Yes: in a tiered solution with a separated Auth Server, the Module Entity Extension System is the correct approach so the extra properties are known across the solution (contracts/shared) and are mapped properly where Identity is used.

    The key idea:

    • Define the extra properties in your .Domain.Shared (so DTOs/UI can “know” the properties).
    • Ensure EF Core mapping is applied in the project that owns the IdentityDbContext / migrations (commonly the Auth Server’s EF Core layer / DbMigrator path in a tiered setup).

    (The concrete mapping code depends on your existing solution structure, but the correct direction is: Entity Extension System in Domain.Shared + EF Core mapping/migrations applied where identity DB schema is managed.)

  ---

  • 4) LeptonX compatibility (keeping account look & responsive layout) For LeptonX (and ABP themes generally), the most robust method is:

    • Copy the existing Login/Register Razor pages from the module and modify minimally.
    • That preserves the theme’s account layout usage and bundling conventions that produce the responsive styling.

    If you completely rewrite markup, you risk dropping the layout/bundle hooks that the theme uses.

  ---

  Links (validated)

  • ABP UI customization (override Razor Pages):
    https://abp.io/docs/latest/framework/ui/mvc-razor-pages/customization-user-interface
  • ABP community guide: “How to Customize the Login Page for MVC / Razor Page Applications” (shows the same inherit-and-override pattern):
    https://abp.io/community/articles/9a40f3cd
  • Account module docs:
    https://abp.io/docs/latest/modules/account
  • Account Pro docs (if you’re using Account Pro):
    https://abp.io/docs/latest/modules/account-pro
  • Account module Login page source (to copy markup):
    https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml
  • Account module Login PageModel source (to see what to override):
    https://github.com/abpframework/abp/blob/037ef9abe024c03c1f89ab6c933710bcfe3f5c93/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml.cs

  ---

  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