ngx-auth

by serhiisol

serhiisol / ngx-auth

Angular 7+ Authentication Module

212 Stars 50 Forks Last release: about 1 year ago (5.2.0) MIT License 34 Commits 14 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Angular 7+ Authentication

This package provides authentication module with interceptor

npm install ngx-auth --save

For older versions of angular see Older Versions section.

Full example

Full example you can find in this repo serhiisol/ngx-auth-example

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

  1. Import
    AuthService
    interface to implement it with your custom Authentication service, e.g.:
import { AuthService } from 'ngx-auth';

@Injectable() export class AuthenticationService implements AuthService {

private interruptedUrl: string;

constructor(private http: Http) {}

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

return Observable.of(isAuthorized);

}

public getAccessToken(): Observable { const accessToken: string = sessionStorage.getItem('accessToken');

return Observable.of(accessToken);

}

public refreshToken(): Observable { const refreshToken: string = sessionStorage.getItem('refreshToken');

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

}

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

public verifyRefreshToken(req: HttpRequest): boolean { return req.url.endsWith('refresh-token'); }

public skipRequest(req: HttpRequest): boolean { return req.url.endsWith('third-party-request'); }

public getInterruptedUrl(): string { return this.interruptedUrl; }

public setInterruptedUrl(url: string): void { this.interruptedUrl = url; }

}

  1. 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' }
    ]
  }
];
  1. 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
  1. Provide your
    AuthenticationModule
    in your
    AppModule

Customizing authentication headers

By default, requests are intercepted and a

{ Authorization: 'Bearer ${token}'}
header is injected. To customize this behavior, implement the
getHeaders
method on your
AuthenticationService

After login redirect to the interrupted URL

The

AuthService
has an optional method
setInterruptedUrl
which saves the URL that was requested before the user is redirected to the login page. This property can be used in order to redirect the user to the originally requested page after he logs in. E.g. in your
login.component.ts
(check also
AuthService
implementation above):
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

constructor( private router: Router, private authService: AuthenticationService, ) { }

public login() { this.authService .login() .subscribe(() => this.router.navigateByUrl(this.authService.getInterruptedUrl()) ); } }

Older Versions

For angular 6, use version 4.1.0

npm install [email protected] --save

For angular 5, use version 3.1.0

npm install [email protected] --save

For angular 4, use version 2.2.0

npm install [email protected] --save

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.