Skip to content

Latest commit

 

History

History
151 lines (115 loc) · 3.38 KB

install.md

File metadata and controls

151 lines (115 loc) · 3.38 KB

Installation

Note
If you use our ngx-admin starter kit then you already have the Auth module in place.

Install the module

First, let's install the module as it's distributed as npm package. Make sure you have the Nebular Theme module up and running. Nebular Theme is required to use built-in Auth Components. If you are not going to use those at all, you can use Auth Module without the Nebular Theme module.

npm i @nebular/auth

HttpClientModule

Auth module utilizes features of HttpClientModule and since it should only be imported in the root module, please make sure you've done this:

import { HttpClientModule } from '@angular/common/http';

// ...

@NgModule({
  imports: [
    HttpClientModule
  ],
})
export class AppModule {

Import

Import the module and NbPasswordAuthStrategy strategy:

import { NbPasswordAuthStrategy, NbAuthModule } from '@nebular/auth';

Configure a strategy

Now, let's configure the module by specifying available strategies, in our case, we add NbPasswordAuthStrategy. To add a strategy we need to call static setup method to pass a list of options:

@NgModule({
  imports: [
   // ...

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

We also specified forms key, that configures available options for the Auth Components. We leave it empty for now and get back to it in the Configuring UI article.

Enable Auth Components

Next, we need to configure Auth Components routes, let's add those into your app-routing.module.ts:

import {
  NbAuthComponent,
  NbLoginComponent,
  NbRegisterComponent,
  NbLogoutComponent,
  NbRequestPasswordComponent,
  NbResetPasswordComponent,
} from '@nebular/auth';

export const routes: Routes = [
  // ...

  {
    path: 'auth',
    component: NbAuthComponent,
    children: [
      {
        path: '',
        component: NbLoginComponent,
      },
      {
        path: 'login',
        component: NbLoginComponent,
      },
      {
        path: 'register',
        component: NbRegisterComponent,
      },
      {
        path: 'logout',
        component: NbLogoutComponent,
      },
      {
        path: 'request-password',
        component: NbRequestPasswordComponent,
      },
      {
        path: 'reset-password',
        component: NbResetPasswordComponent,
      },
    ],
  },
];

Enable Styles

Last but not least - install the component styles into your styles.scss (more details):

// ...
@use '@nebular/auth/styles/globals' as *;

@include nb-install() {
  @include nb-theme-global();
  @include nb-auth-global(); // append the install mixin inside of the nb-install
} ;

At this point, if you navigate to http://localhost:4200/#/auth/login the login form is shown.

Related Articles