ngx-auth

Angular 4.3.0+ Authentication

This package provides authentication module with interceptor

Package is given in completely 100% pure TypeScript.

npm install ngx-auth --save

Authentication module

Authentication modules provides ability to attach authentication token automatically to the headers (through http interceptors), refresh token functionality, guards for protected or public pages and more.

Usage

• Import AuthService interface to implement it with your custom Authentication service, e.g.:

import { AuthService } from 'ngx-auth';

@Injectable()
export class AuthenticationService implements AuthService {

  constructor(private http: Http) {}

  public isAuthorized(): Observable<boolean> {
    const isAuthorized: boolean = !!localStorage.getItem('accessToken');

    return Observable.of(isAuthorized);
  }

  public getAccessToken(): Observable<string> {
    const accessToken: string = localStorage.getItem('accessToken');

    return Observable.of(accessToken);
  }

  public refreshToken(): Observable<any> {
    const refreshToken: string = localStorage.getItem('refreshToken');

    return this.http
      .post('http://localhost:3001/refresh-token', { refreshToken })
      .catch(() => this.logout())
  }

  public refreshShouldHappen(response: Response): boolean {
    return response.status === 401;
  }

  public verifyTokenRequest(url: string): boolean {
    return url.endsWith('refresh-token');
  }

}

• Specify PublicGuard for public routes and ProtectedGuard for protected respectively, e.g.:

const publicRoutes: Routes = [
  { 
    path: '',
    component: LoginComponent,
    canActivate: [ PublicGuard ]
  }
];

const protectedRoutes: Routes = [
  {
    path: '',
    component: ProtectedComponent,
    canActivate: [ ProtectedGuard ],
    children: [
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
    ]
  }
];

• Create additional AuthenticationModule and provide important providers and imports, e.g.:

import { NgModule } from '@angular/core';
import { AuthModule, AUTH_SERVICE, PUBLIC_FALLBACK_PAGE_URI, PROTECTED_FALLBACK_PAGE_URI } from 'ngx-auth';

import { AuthenticationService } from './authentication.service';

@NgModule({
    imports: [ AuthModule ],
    providers: [
      { provide: PROTECTED_FALLBACK_PAGE_URI, useValue: '/' },
      { provide: PUBLIC_FALLBACK_PAGE_URI, useValue: '/login' },
      { provide: AUTH_SERVICE, useClass: AuthenticationService }
    ]
})
export class AuthenticationModule {

}

where,

• PROTECTED_FALLBACK_PAGE_URI - main protected page to be redirected to, in case if user will reach public route, that is protected by PublicGuard and will be authenticated

• PUBLIC_FALLBACK_PAGE_URI - main public page to be redirected to, in case if user will reach protected route, that is protected by ProtectedGuard and won't be authenticated

• AUTH_SERVICE - Authentication service token providers

• Provide your AuthenticationModule in your AppModule