<!DOCTYPE html>
<html>
<head>
<base href="./" />
<title>Angular 2 JWT Authentication Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<body class="container m-t-1">
<app>Loading...</app>
</body>
</html>
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Complete copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: './app',
// angular bundles
'@angular/core': 'https://unpkg.com/@angular/core@4.0.3/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common@4.0.3/bundles/common.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler@4.0.3/bundles/compiler.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@4.0.3/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@4.0.3/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'https://unpkg.com/@angular/router@4.0.3/bundles/router.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms@4.0.3/bundles/forms.umd.js',
'@angular/http': 'https://unpkg.com/@angular/http@4.0.3/bundles/http.umd.js',
'@angular/http/testing': 'https://unpkg.com/@angular/http@4.0.3/bundles/http-testing.umd.js',
// other libraries
'rxjs': 'https://unpkg.com/rxjs@5.1.1',
'ts': 'https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://unpkg.com/typescript@2.2.0/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app',
template: `
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<router-outlet></router-outlet>
</div>
</div>
</div>
`
})
export class AppComponent { }
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate() {
if (localStorage.getItem('currentUser')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page
this.router.navigate(['/login']);
return false;
}
}
export * from './authentication.service';
export * from './auth.guard';
export class User {
username: string;
password: string;
firstName: string;
lastName: string;
}
export * from './user';
export * from './user.service';
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class AuthenticationService {
public token: string;
constructor(private http: Http) {
// set token if saved in local storage
var currentUser = JSON.parse(localStorage.getItem('currentUser'));
this.token = currentUser && currentUser.token;
}
login(username: string, password: string): Observable<boolean> {
return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
.map((response: Response) => {
// login successful if there's a jwt token in the response
let token = response.json() && response.json().token;
if (token) {
// set token property
this.token = token;
// store username and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
// return true to indicate successful login
return true;
} else {
// return false to indicate failed login
return false;
}
});
}
logout(): void {
// clear token remove user from local storage to log user out
this.token = null;
localStorage.removeItem('currentUser');
}
}
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
import { AuthenticationService } from '../security/index';
import { User } from '../models/index';
@Injectable()
export class UserService {
constructor(
private http: Http,
private authenticationService: AuthenticationService) {
}
getUsers(): Observable<User[]> {
// add authorization header with jwt token
let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });
let options = new RequestOptions({ headers: headers });
// get users from api
return this.http.get('/api/users', options)
.map((response: Response) => response.json());
}
}
import { Component, OnInit } from '@angular/core';
import { User } from '../../models/index';
import { UserService } from '../../services/index';
@Component({
moduleId: module.id,
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
users: User[] = [];
constructor(private userService: UserService) { }
ngOnInit() {
// get users from secure api end point
this.userService.getUsers().subscribe(users => {
this.users = users;
});
}
}
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p>You're logged in with JWT!!</p>
<div>
Users from secure api end point:
<ul>
<li *ngFor="let user of users">{{user.firstName}} {{user.lastName}}</li>
</ul>
</div>
<p><a [routerLink]="['/login']">Logout</a></p>
</div>
export * from './home.component';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from '../../security/index';
@Component({
moduleId: module.id,
templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
model: any = {};
loading = false;
error = '';
constructor(
private router: Router,
private authenticationService: AuthenticationService) { }
ngOnInit() {
// reset login status
this.authenticationService.logout();
}
login() {
this.loading = true;
this.authenticationService.login(this.model.username, this.model.password)
.subscribe(result => {
if (result === true) {
this.router.navigate(['/']);
} else {
this.error = 'Username or password is incorrect';
this.loading = false;
}
});
}
}
<div class="col-md-6 col-md-offset-3">
<div class="alert alert-info">
Username: test<br />
Password: test
</div>
<h2>Login</h2>
<form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
<label for="username">Username</label>
<input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
<div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
</div>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
<div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary">Login</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
<div *ngIf="error" class="alert alert-danger">{{error}}</div>
</form>
</div>
export * from './login.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
// used to create fake backend
import { FackBackendModule } from './fack/index';
import { AppComponent } from './app.component';
import { AuthenticationService, AuthGuard } from './security/index';
import { UserService } from './services/index';
import { HomeComponent, LoginComponent } from './components/index';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
FackBackendModule.forRoot(),
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: '**', redirectTo: '' }
])
],
providers: [ AuthGuard, AuthenticationService, UserService ],
declarations: [ AppComponent, LoginComponent, HomeComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
export let fakeBackendProvider = {
// use fake backend in place of Http service for backend-less development
provide: Http,
useFactory: (backend: MockBackend, options: BaseRequestOptions) => {
// configure fake backend
backend.connections.subscribe((connection: MockConnection) => {
let testUser = { username: 'test', password: 'test', firstName: 'Test', lastName: 'User' };
// wrap in timeout to simulate server api call
setTimeout(() => {
// fake authenticate api end point
if (connection.request.url.endsWith('/api/authenticate') && connection.request.method === RequestMethod.Post) {
// get parameters from post request
let params = JSON.parse(connection.request.getBody());
// check user credentials and return fake jwt token if valid
if (params.username === testUser.username && params.password === testUser.password) {
connection.mockRespond(new Response(
new ResponseOptions({ status: 200, body: { token: 'fake-jwt-token' } })
));
} else {
connection.mockRespond(new Response(
new ResponseOptions({ status: 200 })
));
}
}
// fake users api end point
if (connection.request.url.endsWith('/api/users') && connection.request.method === RequestMethod.Get) {
// check for fake auth token in header and return test users if valid, this security is implemented server side
// in a real application
if (connection.request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
connection.mockRespond(new Response(
new ResponseOptions({ status: 200, body: [testUser] })
));
} else {
// return 401 not authorised if token is null or invalid
connection.mockRespond(new Response(
new ResponseOptions({ status: 401 })
));
}
}
}, 500);
});
return new Http(backend, options);
},
deps: [MockBackend, BaseRequestOptions]
};
import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpModule, BaseRequestOptions } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
// used to create fake backend
import { fakeBackendProvider } from './fake-backend';
@NgModule({
imports: [ HttpModule ],
providers: [ MockBackend, BaseRequestOptions ]
})
export class FackBackendModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: FackBackendModule,
providers: [
BaseRequestOptions,
MockBackend,
fakeBackendProvider
]
};
}
}
export * from './fack-backend.module';
export * from "./home/index";
export * from "./login/index";