UI Components

Auth module comes with a list of authentication components:

• <nb-auth-block></nb-auth-block> - component-wrapper, provides basic styles for the forms, already included inside of the page-components;
• <nb-register></nb-register> - registration page;
• <nb-login></nb-login> - login page;
• <nb-logout></nb-logout> - logout page - shows "logging out..." message while sending logout request;
• <nb-request-password></nb-request-password> - request password page;
• <nb-reset-password></nb-reset-password> - reset password page.

UI Settings

Alongside with the strategies' configuration AuthModule also accepts a list of settings for UI side under the forms key:

@NgModule({
  imports: [
   // ...
    
   NbAuthModule.forRoot({
         strategies: [
           NbPasswordAuthStrategy.setup({
             name: 'email',
           }),
         ],
         forms: {},
       }), 
  ],
});

You can configure each specific form separately, here're the default values:

export interface NbAuthSocialLink {
  link?: string,
  url?: string,
  target?: string,
  title?: string,
  icon?: string,
}

const socialLinks: NbAuthSocialLink[] = [];

export const defaultSettings: any = {
  forms: {
    login: {
      redirectDelay: 500, // delay before redirect after a successful login, while success message is shown to the user
      strategy: 'email',  // strategy id key.
      rememberMe: true,   // whether to show or not the `rememberMe` checkbox
      showMessages: {     // show/not show success/error messages
        success: true,
        error: true,
      },
      socialLinks: socialLinks, // social links at the bottom of a page
    },
    register: {
      redirectDelay: 500,
      strategy: 'email',
      showMessages: {
        success: true,
        error: true,
      },
      terms: true,
      socialLinks: socialLinks,
    },
    requestPassword: {
      redirectDelay: 500,
      strategy: 'email',
      showMessages: {
        success: true,
        error: true,
      },
      socialLinks: socialLinks,
    },
    resetPassword: {
      redirectDelay: 500,
      strategy: 'email',
      showMessages: {
        success: true,
        error: true,
      },
      socialLinks: socialLinks,
    },
    logout: {
      redirectDelay: 500,
      strategy: 'email',
    },
    validation: {
      password: {
        required: true,
        minLength: 4,
        maxLength: 50,
      },
      email: {
        required: true,
      },
      fullName: {
        required: false,
        minLength: 4,
        maxLength: 50,
      },
    },
  },
};

Remove redirect delay

So, for instance, to remove the redirectDelay setting and disable the success message, we can do the following:

@NgModule({
  imports: [
   // ...
    
   NbAuthModule.forRoot({
         strategies: [
           NbPasswordAuthStrategy.setup({
             name: 'email',
           }),
         ],
         forms: {
           login: {
             redirectDelay: 0,
             showMessages: {
               success: true,
             },
           },
           register: {
             redirectDelay: 0,
             showMessages: {
               success: true,
             },
           },
           requestPassword: {
             redirectDelay: 0,
             showMessages: {
               success: true,
             },
           },
           resetPassword: {
             redirectDelay: 0,
             showMessages: {
               success: true,
             },
           },
           logout: {
             redirectDelay: 0,
           },
         },
       }), 
  ],
});

If it looks a bit verbose, we can move the repeating part into a variable like this:

const formSetting: any = {
  redirectDelay: 0,
  showMessages: {
    success: true,
  },
};

@NgModule({
  imports: [
   // ...
    
   NbAuthModule.forRoot({
         strategies: [
           NbPasswordAuthStrategy.setup({
             name: 'email',
           }),
         ],
         forms: {
           login: formSetting,
           register: formSetting,
           requestPassword: formSetting,
           resetPassword: formSetting,
           logout: {
             redirectDelay: 0,
           },
         },
       }), 
  ],
});

The settings will be merged with the default values so no need to specify all of the keys here.

Where to next

• Receiving user token after authentication
• Custom Auth Components