ng-jwt

Provides an Angular (2-5) auth module to handle authentication based on JWT.

tnx angular-jwt

Feature status:

| Feature | Status | Docs | |------------------|-------------------------------------|--------------| | AuthenticationService | Available | README | | TokenService | Available | README | | AuthHttp | Available | README | | Auth | Available | README | | LoggedInAuth | Available | README | | LoggedOutAuth | Available | README |

Installation

ng-jwt is available on NPM

$ npm install ng-jwt --save

Setup & Usage

Once the module has been installed, you need to include NgJwtModule into your root module:

import { NgJwtModule } from 'ng-jwt';
...
@NgModule({
  imports: [
    ...
    NgJwtModule.forRoot({
        loginEndPoint: 'http://localhost:5000/connect/token',
        loginParams: {"grant_type": "password", "client_id": "roclient.public"}
    }),
    ...
  ],
  ...
})
export class AppModule {}

In the forRoot function you can specify a custom config as well.

Feature status:

| Feature | Desc |Default | |------------------|-------------------------------------|--------------| | loginEndPoint * | Endpoint url for login with AuthenticationService | [null / Require] | | loginTokenName | Token object name for reading from result | access_token | | loginParams | additional params for sending login request | [null / optional] | | headerName | set Authorization header name for AuthHttp Requests | Authorization | | headerPrefix | Authorization value for AuthHttp Requests | Bearer | | guards | Logged[in/out] guard redirect router name | [null] |

Login && Logout

AuthenticationService service comes withlogout and login function built-in:

import {Component} from '@angular/core';
import {Auth, AuthenticationService} from "ng-jwt";

@Component({
	...
})
export class AppComponent {

	constructor(private authentication: AuthenticationService) {
	}

	logOut() {
		this.authentication.logout();
	}

	login() {
		this.authentication.login('admin', '123456').subscribe(data => console.log((data ? "Success" : "Failed")), error => console.log(error));
	}
}

Manually Login & Logout

In case of of needing a customized Login/Logout functionality, you may use TokenService.

import {Component} from '@angular/core';
import {TokenService} from "ng-jwt";
import {Http} from "@angular/http";

@Component({
...
})
export class AppComponent {

	constructor(private _http: Http, private _tokenService: TokenService) {
	}

	logOut() {
		this._tokenService.removeToken();
	}

	login(username: string, pass: string) {
		this._http.post('/token', {
			username: username,
			password: pass
		}).map(res => res.json())
			.subscribe(response => this._tokenService.setToken(response.token), error => console.error(error));
	}
}

Sending Requests

ng-jwt uses HttpInterceptor to modify HttpClient headers for Authentication. So while using HttpClientModule, ng-jwt would send the Authentication headers alongside the request.

for angular < 4.3:

If you want to send a request with the Authorization header set with the JWT token you can use the AuthHttp class. It will set the authentication headers on the request on the fly.

import { AuthHttp } from 'ng-jwt';
...
@Component({
  ...
})
export class AppComponent {
  constructor(private _authHttp: AuthHttp) {}

  getThing() {
    this._authHttp.get('/get/thing') .subscribe(
        data => this.thing = data,
        error => console.error(error),
        () => console.log('finish ...')
    )
  }
}

Login Validation

Auth class provides another helper method for authentication validation. By using Auth.loggedIn function you can check if the client is logged in. This method returns a Boolean.

import {Component, OnInit} from '@angular/core';
import {Auth} from "ng-jwt";

@Component({
...
})
export class AppComponent implements OnInit {
	constructor(public _auth: Auth) {
	}

	ngOnInit(): void {
		console.log(this._auth.loggedIn());
	}
}

Default Auth Guards

If you want to loggedIn in router:

for authModule config:

import { AuthModule } from 'ng-jwt';
...
@NgModule({
  imports: [
    ...
    AuthModule.forRoot({
        loginEndPoint: 'http://localhost:5000/connect/token',
        loginParams: {"grant_type": "password", "client_id": "roclient.public"},
        guards: {loggedInGuard: {redirectUrl: 'unauthorized'}, loggedOutGuard: {redirectUrl: ''}}
    }),
    ...
  ],
  ...
})
export class AppModule {}

for route config:

const routes: Routes = [
	{path: 'family', component: FamilyListComponent, canActivate: [LoggedInAuth]},
	{path: 'unauthorized', component: UnAuthorizedComponent}
];

License

ng-jwt is released under MIT license.

Author

Mo3in