Customize Login page #10453

2 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  • In ABP Angular apps, the login UI you see is not a page living in your Angular solution in many setups, because Angular typically uses OIDC/OAuth2 code flow and redirects to the Auth Server for login. So the “real” login page is served by the backend Account module / Auth Server, not by Angular.
  • You have two practical options:

  1. If you are using the redirect (code flow) login (most common): customize the backend login page

     • Customize/override the login page in the AuthServer / HttpApi.Host (the server that hosts the Account module UI).
     • This is why you can’t find a login page in Angular.

  2. If you want to customize the Angular login UI itself: use ABP Angular “component replacement” for Account components

     • ABP Angular’s account UI is built from replaceable components (logo, tenant box, login form, etc.).
     • You can replace these pieces using AddReplaceableComponent and eAccountComponents.* keys.

     Example (replace logo / tenant box / login form):

  import { AddReplaceableComponent } from '@abp/ng.core';
     import { Component } from '@angular/core';
     import { Store } from '@ngxs/store';
     import { eAccountComponents } from '@volo/abp.ng.account';
  
     @Component({ template: `<div>MY CUSTOM LOGO</div>` })
     class CustomLogoComponent {}
  
     @Component({ template: `<div>MY CUSTOM TENANT BOX</div>` })
     class CustomTenantBoxComponent {}
  
     @Component({ template: `<div>MY CUSTOM LOGIN FORM</div>` })
     class CustomLoginComponent {}
  
     @Component({
       selector: 'app-root',
       template: `
         <abp-loader-bar></abp-loader-bar>
         <abp-dynamic-layout></abp-dynamic-layout>
       `,
     })
     export class AppComponent {
       constructor(store: Store) {
         store.dispatch(
           new AddReplaceableComponent({ component: CustomLogoComponent, key: eAccountComponents.Logo }),
         );
         store.dispatch(
           new AddReplaceableComponent({ component: CustomTenantBoxComponent, key: eAccountComponents.TenantBox }),
         );
         store.dispatch(
           new AddReplaceableComponent({ component: CustomLoginComponent, key: eAccountComponents.Login }),
         );
       }
     }
  

  Sources (verified):

  • https://abp.io/docs/latest/ui/angular/component-replacement
  • https://abp.io/support/questions/2935
  • https://abp.io/support/questions/306

  ---

  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 yesterday

  Support Team Fullstack Developer

  hi

  The Angular app uses Code Flow for authentication, so the Login page is on the auth server website.

  You can override the Login page: https://abp.io/docs/latest/framework/ui/mvc-razor-pages/customization-user-interface?_redirected=B8ABF606AA1BDF5C629883DF1061649A#completely-overriding-a-razor-page

  Download the Account Pro module to check the latest Login page source code.

  Thanks.

  Save Cancel