❤
npm
Sign UpSign In

ng-jwt
TypeScript icon, indicating that this package has built-in type declarations

1.1.11 • Public • Published

ng-jwt

NPM
Downloads Version

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

Readme

Keywords

Package Sidebar

Install

npm i ng-jwt

Repository

github.com/mo3in/ng-jwt

Homepage

github.com/mo3in/ng-jwt#readme

Weekly Downloads

2

Version

1.1.11

License

MIT

Last publish

Collaborators

  • mo3in
Try on RunKit
Report malware