@etereo/auth

    0.7.3 • Public • Published

    @etereo/auth

    Angular2 module to manage basic authentication. It provide methods to register and authenticate the user in your backend. As it is customizable you can change the underlayer service for your backend strategy. Although the provided communication service uses the @etereo/http module to achieve the register, login and logout, you can provide your own implementation.

    How to install

      npm install @etereo/auth --save
    

    How to use

    To add the module you have to import it in the root module.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AuthModule } from '@etereo/auth';
    
    @NgModule({
      declarations: [
      ],
    
      providers: [],
    
      // Modules
      imports: [
        BrowserModule,
        HttpModule.forRoot({baseUrl: 'http://yourappurlbase.com/' }), // Default used by Auth module
        AuthModule.forRoot()
      ]
    })
    export class AppModule {}
    

    ### Directives

    The module exports two structural directives related with authentication that you can use in your templates, IfAuthDirective and IfUnauthDirective.

      <div *ifUnauth class="col-sm-4"><a href="login">Login</a></div> <!-- only rendered if the user is not logged in -->
    
      <div *ifAuth class="col-sm-4"><a href="home">Home</a></div> <!-- only rendered if the user is logged in -->
    

    ### Guards

    You can use the following guards in your routes, AuthGuard and UnauthGuard to check if an user is logged in or not.

    import { UnauthGuard } from '@etereo/auth';
    import { AuthGuard } from '@etereo/auth';
    
    
    @NgModule({
    imports: [
      RouterModule.forChild([
        { path: 'login', component: SignInComponent, canActivate: [ UnauthGuard ]}, // only navigate if the user is not logged in (useful to show the login page, for example)
        { path: 'dashboard', component: Dashboard, canActivate: [ AuthGuard ] } // only navigate if the user is authenticated (logged in) 
      ])
    ],
    

    ### Services

    AuthService is the main service of the module. It provides methods to deal with the backend authentication, to know if an user is already authenticated etc.

    API

      $user: Observable<User>; // An observable to subscribe to user changes (logout, login)
      register (user: User) : Observable //  Register a new user.
      login (user: User) : Observable // User login attempt
      logout () : Observable // User logout
      isAuth () : boolean // Check if the user is authenticated
      getUser () : User // Get the current user logged in
    

    The AuthService use an AuthConnectorService as it's own implementation of IAuthConnectorService to communicate with the server. You can implement your own AuthConnectorService and provide it to communicate with your backend.

    It only has to implement three methods:

      register (user: User) : Observable //  Register a new user.
      login (user: User) : Observable // User login attempt
      logout () : Observable // User logout
    

    You can see the ease of the AuthConnectorService implementation:

    import { Injectable } from '@angular/core';
    
    import { Observable } from 'rxjs/Observable';
    import { BehaviorSubject } from 'rxjs/BehaviorSubject';
    
    import { IAuthConnectorService } from './auth-connector.interface.service';
    import { HttpService } from '@etereo/http';
    
    import { AuthEndpoints } from '../models/auth.endpoints';
    
    @Injectable()
    export class AuthConnectorService<U> implements IAuthConnectorService<U> {
      constructor (private http: HttpService, private endpoints: AuthEndpoints) {}
      
      register(user: U): Observable<U> {
        return this.http
        .post(this.endpoints.REGISTER, user);
      }
    
      login (user: U): Observable<U> {
        return this.http
        .post(this.endpoints.LOGIN, user);
      }
    
      logout (): Observable<any> {
        return this.http
        .post('logout', {});
      }
    }
    

    Module configuration

    If you desire add your own implementation of the backend communication service, you have to provide the implementation to the AuthModule in the application's root module.

    @NgModule({
      // Modules
      imports: [
        BrowserModule,
        AuthModule.forRoot({ authConnectorProvider: { provide: AuthConnectorService, useClass: YourImplementationOfAuthConnectorService } }),
      ]
    })
    export class AppModule {}
    

    In the other hand, if you don't need a custom implementation of the auth communication service you can provide only your backend endpoints to the module. They will be used with the @etereo/http module to compose the api urls.

    @NgModule({
      imports: [
            HttpModule.forRoot({baseUrl: 'http://yourappurlbase.com' }),
            AuthModule.forRoot({ endpoints: { REGISTER: 'custom/register', LOGIN: 'custom/login, LOGOUT: 'custom/logout' }}), // register endpoint: http://yourappurlbase.com/custom/register
      ]
    })
    export class AppModule {}
    

    Contrib

    To compile the project you only need to run npm run build.

    Keywords

    Install

    npm i @etereo/auth

    DownloadsWeekly Downloads

    3

    Version

    0.7.3

    License

    MIT

    Last publish

    Collaborators

    • etereo