angular2-jwt
Advanced tools
angular2-jwt is a helper library for working with JWTs in your Angular 2 applications.
For examples of integrating angular2-jwt with SystemJS, see auth0-angular2. ##Contents
AUTH_PROVIDERSprovideAuth
angular2-jwt is a small and unopinionated library that is useful for automatically attaching a JSON Web Token (JWT) as an Authorization header when making HTTP requests from an Angular 2 app. It also has a number of helper methods that are useful for doing things like decoding JWTs.
This library does not have any functionality for (or opinion about) implementing user authentication and retrieving JWTs to begin with. Those details will vary depending on your setup, but in most cases, you will use a regular HTTP request to authenticate your users and then save their JWTs in local storage or in a cookie if successful.
For more on implementing authentication endpoints, see this tutorial for an example using HapiJS.
AuthHttp classnpm install angular2-jwt
The library comes with several helpers that are useful in your Angular 2 apps.
AuthHttp - allows for individual and explicit authenticated HTTP requeststokenNotExpired - allows you to check whether there is a non-expired JWT in local storage. This can be used for conditionally showing/hiding elements and stopping navigation to certain routes if the user isn't authenticatedAUTH_PROVIDERSAdd AUTH_PROVIDERS to the providers array in your @NgModule.
import { NgModule } from '@angular/core';
import { AUTH_PROVIDERS } from 'angular2-jwt';
...
@NgModule({
...
providers: [
AUTH_PROVIDERS
],
...
})
If you wish to only send a JWT on a specific HTTP request, you can use the AuthHttp class. This class is a wrapper for Angular 2's Http and thus supports all the same HTTP methods.
import { AuthHttp } from 'angular2-jwt';
...
class App {
thing: string;
constructor(public authHttp: AuthHttp) {}
getThing() {
this.authHttp.get('http://example.com/api/thing')
.subscribe(
data => this.thing = data,
err => console.log(err),
() => console.log('Request Complete')
);
}
}
AUTH_PROVIDERS gives a default configuration setup:
AuthorizationBearerid_token(() => localStorage.getItem(tokenName))falseIf you wish to configure the headerName, headerPrefix, tokenName, tokenGetter function, noTokenScheme, globalHeaders, or noJwtError boolean, you can using provideAuth or the factory pattern (see below).
By default, if there is no valid JWT saved, AuthHttp will return an Observable error with 'Invalid JWT'. If you would like to continue with an unauthenticated request instead, you can set noJwtError to true.
The default scheme for the Authorization header is Bearer, but you may either provide your own by specifying a headerPrefix, or you may remove the prefix altogether by setting noTokenScheme to true.
You may set as many global headers as you like by passing an array of header-shaped objects to globalHeaders.
provideAuthYou may customize any of the above options using a factory which returns an AuthHttp instance with the options you would like to change.
import { NgModule } from '@angular/core';
import { provideAuth } from 'angular2-jwt';
export function authHttpServiceFactory(http: Http, options: RequestOptions) {
return new AuthHttp(new AuthConfig({
tokenName: 'token',
tokenGetter: (() => sessionStorage.getItem('token')),
globalHeaders: [{'Content-Type':'application/json'}],
}), http, options);
}
@NgModule({
// ...
providers: [
// ...
{
provide: AuthHttp,
useFactory: authHttpServiceFactory,
deps: [Http, RequestOptions]
}
]
})
To configure angular2-jwt in Ionic 2 applications, use the factory pattern in your @NgModule. Since Ionic 2 provides its own API for accessing local storage, configure the tokenGetter to use it.
import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { Http } from '@angular/http';
import { Storage } from '@ionic/storage';
let storage = new Storage();
export function getAuthHttp(http) {
return new AuthHttp(new AuthConfig({
headerPrefix: YOUR_HEADER_PREFIX,
noJwtError: true,
globalHeaders: [{'Accept': 'application/json'}],
tokenGetter: (() => storage.get('id_token')),
}), http);
}
@NgModule({
imports: [
IonicModule.forRoot(MyApp),
],
providers: [
{
provide: AuthHttp,
useFactory: getAuthHttp,
deps: [Http]
},
...
bootstrap: [IonicApp],
...
})
To use tokenNotExpired with Ionic 2, use the Storage class directly in the function.
import { Storage } from '@ionic/storage';
import { tokenNotExpired } from 'angular2-jwt';
let storage = new Storage();
this.storage.get('id_token').then(token => {
console.log(tokenNotExpired(null, token)); // Returns true/false
});
You may also send custom headers on a per-request basis with your authHttp request by passing them in an options object.
getThing() {
let myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
this.authHttp.get('http://example.com/api/thing', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
// Pass it after the body in a POST request
this.authHttp.post('http://example.com/api/thing', 'post body', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
}
If you wish to use the JWT as an observable stream, you can call tokenStream from AuthHttp.
...
tokenSubscription() {
this.authHttp.tokenStream.subscribe(
data => console.log(data),
err => console.log(err),
() => console.log('Complete')
);
}
This can be useful for cases where you want to make HTTP requests out of observable streams. The tokenStream can be mapped and combined with other streams at will.
The JwtHelper class has several useful methods that can be utilized in your components:
decodeTokengetTokenExpirationDateisTokenExpiredYou can use these methods by passing in the token to be evaluated.
...
jwtHelper: JwtHelper = new JwtHelper();
...
useJwtHelper() {
var token = localStorage.getItem('id_token');
console.log(
this.jwtHelper.decodeToken(token),
this.jwtHelper.getTokenExpirationDate(token),
this.jwtHelper.isTokenExpired(token)
);
}
...
The tokenNotExpired function can be used to check whether a JWT exists in local storage, and if it does, whether it has expired or not. If the token is valid, tokenNotExpired returns true, otherwise it returns false.
Note:
tokenNotExpiredwill by default assume the token name isid_tokenunless a token name is passed to it, ex:tokenNotExpired('token_name'). This will be changed in a future release to automatically use the token name that is set inAuthConfig.
// auth.service.ts
import { tokenNotExpired } from 'angular2-jwt';
...
loggedIn() {
return tokenNotExpired();
}
...
The loggedIn method can now be used in views to conditionally hide and show elements.
<button id="login" *ngIf="!auth.loggedIn()">Log In</button>
<button id="logout" *ngIf="auth.loggedIn()">Log Out</button>
To guard routes that should be limited to authenticated users, set up an AuthGuard.
// auth-guard.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { CanActivate } from '@angular/router';
import { Auth } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: Auth, private router: Router) {}
canActivate() {
if(this.auth.loggedIn()) {
return true;
} else {
this.router.navigate(['unauthorized']);
return false;
}
}
}
With the guard in place, you can use it in your route configuration.
...
import { AuthGuard } from './auth.guard';
export const routes: RouterConfig = [
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },
{ path: 'unauthorized', component: UnauthorizedComponent }
];
...
Pull requests are welcome!
Use npm run dev to compile and watch for changes.
Auth0 helps you to:
If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
This project is licensed under the MIT license. See the LICENSE file for more info.
FAQs
Helper library for handling JWTs in Angular 2+
We found that angular2-jwt demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.