How to override Login page in Blazor Server app (Monolithic / No separate AuthServer) #10468

2 Answer(s)

• 

  0

  AI-Bot created 19 hours ago

  Support Team ABP Agent

  • In a Blazor Server (monolithic / no separate AuthServer) solution, the login UI is still an MVC/Razor Page coming from Volo.Abp.Account.Web. So you override it the same way: add a Razor Page with the same path in the host project that actually serves MVC endpoints (in most ABP Blazor Server solutions this is *.HttpApi.Host, not the *.Blazor project).

  1. Create the overriding Razor Page

     • In your host project (the one that has app.UseConfiguredEndpoints() and serves /Account/Login):
       • Create folder: Pages/Account
       • Add file: Pages/Account/Login.cshtml

  2. Keep ABP’s logic by deriving from the built-in LoginModel

     • Add a PageModel (e.g. CustomLoginModel) that inherits from ABP’s LoginModel and only calls the base constructor (so you keep default behavior).
     • Example:

  using Microsoft.AspNetCore.Authentication;
       using Microsoft.Extensions.Options;
       using Volo.Abp.Account.Web;
       using Volo.Abp.Account.Web.Pages.Account;
  
       namespace YourCompany.YourApp.HttpApi.Host.Pages.Account;
  
       public class CustomLoginModel : LoginModel
       {
           public CustomLoginModel(
               IAuthenticationSchemeProvider schemeProvider,
               IOptions<AbpAccountOptions> accountOptions)
               : base(schemeProvider, accountOptions)
           {
           }
       }
  

  3. Point the view to your derived model and implement your split-screen UI
     • In Pages/Account/Login.cshtml, set:

  @page
       @model YourCompany.YourApp.HttpApi.Host.Pages.Account.CustomLoginModel
  

  • Then you can fully replace the markup with your split-screen design while still using:
    • Model.LoginInput.UserNameOrEmailAddress
    • Model.LoginInput.Password
    • Model.ReturnUrl, Model.ReturnUrlHash
    • Model.EnableLocalLogin, Model.VisibleExternalProviders, etc.

  4. If tag helpers/bundles don’t work, add _ViewImports.cshtml
     • In Pages or Pages/Account, add _ViewImports.cshtml (if you don’t already have it):

  @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
  

  5. Important note for “monolithic”
     • Even if you consider the solution monolithic, ABP’s Blazor Server template typically still separates the UI project (*.Blazor) from the server/host project (*.HttpApi.Host).
     • The login page override must be placed in the project that actually hosts MVC/Razor Pages endpoints (again, usually *.HttpApi.Host). Putting Pages/Account/Login.cshtml into the *.Blazor project commonly won’t affect /Account/Login.

  ---

  • https://abp.io/docs/latest/framework/ui/mvc-razor-pages/customization-user-interface

  ---

  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

  maliming created 17 hours ago

  Support Team Fullstack Developer

  hi

  https://abp.io/support/questions/240/How-to-customize-the-MVC-login-page https://abp.io/community/articles/how-to-customize-the-login-page-for-mvc-razor-page-applications-9a40f3cd

  You can download the account pro module source code. And override the login page.

  If you have openiddict, the login page base class is OpenIddictSupportedLoginModel

  [ExposeServices(typeof(LoginModel))]
  public class OpenIddictSupportedLoginModel: LoginModel
  

  https://abp.io/support/questions/632/How-can-I-download-the-source-code-of-the-framework-Angular-packages-theme-and-pro-modules

  https://abp.io/support/questions/160/How-to-customize-an-ABP-project

  Save Cancel