Secure api with express-jwt (wip)

client/app/app.component.html

@@ -5,22 +5,22 @@
       <a routerLink="/" class="nav-item nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
         <i class="fa fa-home"></i> Home
       </a>
-      <a routerLink="/cats" class="nav-item nav-link" routerLinkActive="active">
+      <a routerLink="/cats" class="nav-item nav-link" routerLinkActive="active" *ngIf="auth.loggedIn()">
         <i class="fa fa-list"></i> Cats
       </a>
-      <a routerLink="/login" class="nav-item nav-link" routerLinkActive="active" *ngIf="!auth.loggedIn">
+      <a routerLink="/login" class="nav-item nav-link" routerLinkActive="active" *ngIf="!auth.loggedIn()">
         <i class="fa fa-sign-in"></i> Login
       </a>
-      <a routerLink="/register" class="nav-item nav-link" routerLinkActive="active" *ngIf="!auth.loggedIn">
+      <a routerLink="/register" class="nav-item nav-link" routerLinkActive="active" *ngIf="!auth.loggedIn()">
         <i class="fa fa-user-plus"></i> Register
       </a>
-      <a routerLink="/account" class="nav-item nav-link" routerLinkActive="active" *ngIf="auth.loggedIn">
+      <a routerLink="/account" class="nav-item nav-link" routerLinkActive="active" *ngIf="auth.loggedIn()">
         <i class="fa fa-user"></i> Account ({{auth.currentUser.username}})
       </a>
-      <a routerLink="/admin" class="nav-item nav-link" routerLinkActive="active" *ngIf="auth.loggedIn && auth.isAdmin">
+      <a routerLink="/admin" class="nav-item nav-link" routerLinkActive="active" *ngIf="auth.loggedIn() && auth.isAdmin">
         <i class="fa fa-lock"></i> Admin
       </a>
-      <a routerLink="/logout" class="nav-item nav-link" routerLinkActive="active" *ngIf="auth.loggedIn">
+      <a routerLink="/logout" class="nav-item nav-link" routerLinkActive="active" *ngIf="auth.loggedIn()">
         <i class="fa fa-sign-out"></i> Logout
       </a>
     </div>

client/app/app.module.ts

@@ -1,12 +1,10 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 import { RoutingModule } from './routing.module';
+import { AuthModule } from './auth.module';
 import { SharedModule } from './shared/shared.module';
 import { CatService } from './services/cat.service';
 import { UserService } from './services/user.service';
-import { AuthService } from './services/auth.service';
-import { AuthGuardLogin } from './services/auth-guard-login.service';
-import { AuthGuardAdmin } from './services/auth-guard-admin.service';
 import { AppComponent } from './app.component';
 import { CatsComponent } from './cats/cats.component';
 import { AboutComponent } from './about/about.component';
@@ -30,13 +28,11 @@ import { NotFoundComponent } from './not-found/not-found.component';
     NotFoundComponent
   ],
   imports: [
+    AuthModule,
     RoutingModule,
     SharedModule
   ],
   providers: [
-    AuthService,
-    AuthGuardLogin,
-    AuthGuardAdmin,
     CatService,
     UserService
   ],

client/app/auth.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { Http, RequestOptions } from '@angular/http';
+import { AuthHttp, AuthConfig } from 'angular2-jwt';
+
+import { AuthService } from './services/auth.service';
+import { AuthGuardLogin } from './services/auth-guard-login.service';
+import { AuthGuardAdmin } from './services/auth-guard-admin.service';
+
+export function authHttpServiceFactory(http: Http, options: RequestOptions) {
+  return new AuthHttp(new AuthConfig({
+    tokenName: 'token',
+          tokenGetter: (() => localStorage.getItem('token')),
+          globalHeaders: [{'Content-Type': 'application/json'}],
+     }), http, options);
+}
+
+@NgModule({
+  providers: [
+    AuthService,
+    AuthGuardLogin,
+    AuthGuardAdmin,
+    {
+      provide: AuthHttp,
+      useFactory: authHttpServiceFactory,
+      deps: [Http, RequestOptions]
+    }
+  ]
+})
+
+export class AuthModule { }

client/app/login/login.component.ts

@@ -25,7 +25,7 @@ export class LoginComponent implements OnInit {
               public toast: ToastComponent) { }
 
   ngOnInit() {
-    if (this.auth.loggedIn) {
+    if (this.auth.loggedIn()) {
       this.router.navigate(['/']);
     }
     this.loginForm = this.formBuilder.group({

client/app/services/auth-guard-login.service.ts

@@ -8,7 +8,11 @@ export class AuthGuardLogin implements CanActivate {
   constructor(public auth: AuthService, private router: Router) {}
 
   canActivate() {
-    return this.auth.loggedIn;
+    if (this.auth.loggedIn()) {
+      return true;
+    } else {
+      return false;
+    }
   }
 
 }

client/app/services/auth.service.ts

@@ -1,12 +1,11 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import { JwtHelper } from 'angular2-jwt';
+import { JwtHelper, tokenNotExpired } from 'angular2-jwt';
 
 import { UserService } from '../services/user.service';
 
 @Injectable()
 export class AuthService {
-  loggedIn = false;
   isAdmin = false;
 
   jwtHelper: JwtHelper = new JwtHelper();
@@ -28,14 +27,13 @@ export class AuthService {
         localStorage.setItem('token', res.token);
         const decodedUser = this.decodeUserFromToken(res.token);
         this.setCurrentUser(decodedUser);
-        return this.loggedIn;
+        return this.loggedIn();
       }
     );
   }
 
   logout() {
     localStorage.removeItem('token');
-    this.loggedIn = false;
     this.isAdmin = false;
     this.currentUser = { _id: '', username: '', role: '' };
     this.router.navigate(['/']);
@@ -46,12 +44,15 @@ export class AuthService {
   }
 
   setCurrentUser(decodedUser) {
-    this.loggedIn = true;
     this.currentUser._id = decodedUser._id;
     this.currentUser.username = decodedUser.username;
     this.currentUser.role = decodedUser.role;
     decodedUser.role === 'admin' ? this.isAdmin = true : this.isAdmin = false;
     delete decodedUser.role;
   }
 
+  loggedIn() {
+    return tokenNotExpired();
+  }
+
 }

client/app/services/cat.service.ts

@@ -1,39 +1,37 @@
 import { Injectable } from '@angular/core';
 import { Http, Headers, RequestOptions } from '@angular/http';
+import { AuthHttp } from 'angular2-jwt';
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 
 @Injectable()
 export class CatService {
 
-  private headers = new Headers({ 'Content-Type': 'application/json', 'charset': 'UTF-8' });
-  private options = new RequestOptions({ headers: this.headers });
-
-  constructor(private http: Http) { }
+  constructor(public authHttp: AuthHttp) { }
 
   getCats(): Observable<any> {
-    return this.http.get('/api/cats').map(res => res.json());
+    return this.authHttp.get('/api/cats').map(res => res.json());
   }
 
   countCats(): Observable<any> {
-    return this.http.get('/api/cats/count').map(res => res.json());
+    return this.authHttp.get('/api/cats/count').map(res => res.json());
   }
 
   addCat(cat): Observable<any> {
-    return this.http.post('/api/cat', JSON.stringify(cat), this.options);
+    return this.authHttp.post('/api/cat', JSON.stringify(cat));
   }
 
   getCat(cat): Observable<any> {
-    return this.http.get(`/api/cat/${cat._id}`).map(res => res.json());
+    return this.authHttp.get(`/api/cat/${cat._id}`).map(res => res.json());
   }
 
   editCat(cat): Observable<any> {
-    return this.http.put(`/api/cat/${cat._id}`, JSON.stringify(cat), this.options);
+    return this.authHttp.put(`/api/cat/${cat._id}`, JSON.stringify(cat));
   }
 
   deleteCat(cat): Observable<any> {
-    return this.http.delete(`/api/cat/${cat._id}`, this.options);
+    return this.authHttp.delete(`/api/cat/${cat._id}`);
   }
 
 }

client/app/services/user.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Http, Headers, RequestOptions } from '@angular/http';
+import { AuthHttp } from 'angular2-jwt';
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
@@ -10,7 +11,8 @@ export class UserService {
   private headers = new Headers({ 'Content-Type': 'application/json', 'charset': 'UTF-8' });
   private options = new RequestOptions({ headers: this.headers });
 
-  constructor(private http: Http) { }
+  constructor(private http: Http,
+              public authHttp: AuthHttp) { }
 
   register(user): Observable<any> {
     return this.http.post('/api/user', JSON.stringify(user), this.options);
@@ -21,27 +23,27 @@ export class UserService {
   }
 
   getUsers(): Observable<any> {
-    return this.http.get('/api/users').map(res => res.json());
+    return this.authHttp.get('/api/users').map(res => res.json());
   }
 
   countUsers(): Observable<any> {
-    return this.http.get('/api/users/count').map(res => res.json());
+    return this.authHttp.get('/api/users/count').map(res => res.json());
   }
 
   addUser(user): Observable<any> {
-    return this.http.post('/api/user', JSON.stringify(user), this.options);
+    return this.authHttp.post('/api/user', JSON.stringify(user));
   }
 
   getUser(user): Observable<any> {
-    return this.http.get(`/api/user/${user._id}`).map(res => res.json());
+    return this.authHttp.get(`/api/user/${user._id}`).map(res => res.json());
   }
 
   editUser(user): Observable<any> {
-    return this.http.put(`/api/user/${user._id}`, JSON.stringify(user), this.options);
+    return this.authHttp.put(`/api/user/${user._id}`, JSON.stringify(user));
   }
 
   deleteUser(user): Observable<any> {
-    return this.http.delete(`/api/user/${user._id}`, this.options);
+    return this.authHttp.delete(`/api/user/${user._id}`);
   }
 
 }

package.json

@@ -35,6 +35,7 @@
     "core-js": "^2.4.1",
     "dotenv": "^4.0.0",
     "express": "^4.15.3",
+    "express-jwt": "^5.3.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
     "jsonwebtoken": "^8.0.1",

server/controllers/base.ts

@@ -4,58 +4,95 @@ abstract class BaseCtrl {
 
   // Get all
   getAll = (req, res) => {
-    this.model.find({}, (err, docs) => {
-      if (err) { return console.error(err); }
-      res.json(docs);
-    });
-  }
+    if (!req.payload.user._id) {
+      res.status(401).json({
+        'message' : 'UnauthorizedError: private'
+      });
+    } else {
+      this.model.find({}, (err, items) => {
+        if (err) { return console.error(err); }
+        res.json(items);
+      });
+    }
+  };
 
   // Count all
   count = (req, res) => {
-    this.model.count((err, count) => {
-      if (err) { return console.error(err); }
-      res.json(count);
-    });
-  }
+    if (!req.payload.user._id) {
+      res.status(401).json({
+        'message' : 'UnauthorizedError: private'
+      });
+    } else {
+      this.model.count((err, count) => {
+        if (err) { return console.error(err); }
+        res.json(count);
+      });
+    }
+  };
 
   // Insert
   insert = (req, res) => {
-    const obj = new this.model(req.body);
-    obj.save((err, item) => {
-      // 11000 is the code for duplicate key error
-      if (err && err.code === 11000) {
-        res.sendStatus(400);
-      }
-      if (err) {
-        return console.error(err);
-      }
-      res.status(200).json(item);
-    });
-  }
+    if (!req.payload.user._id) {
+      res.status(401).json({
+        'message' : 'UnauthorizedError: private'
+      });
+    } else {
+      const obj = new this.model(req.body);
+      obj.save((err, item) => {
+        // 11000 is the code for duplicate key error
+        if (err && err.code === 11000) {
+          res.sendStatus(400);
+        }
+        if (err) {
+          return console.error(err);
+        }
+        res.status(200).json(item);
+      });
+    }
+  };
 
   // Get by id
   get = (req, res) => {
-    this.model.findOne({ _id: req.params.id }, (err, obj) => {
-      if (err) { return console.error(err); }
-      res.json(obj);
-    });
-  }
+    if (!req.payload.user._id) {
+      res.status(401).json({
+        'message' : 'UnauthorizedError: private'
+      });
+    } else {
+      this.model.findOne({ _id: req.params.id }, (err, obj) => {
+        if (err) { return console.error(err); }
+        res.json(obj);
+      });
+    }
+  };
 
   // Update by id
   update = (req, res) => {
-    this.model.findOneAndUpdate({ _id: req.params.id }, req.body, (err) => {
-      if (err) { return console.error(err); }
-      res.sendStatus(200);
-    });
-  }
+    if (!req.payload.user._id) {
+      res.status(401).json({
+        'message' : 'UnauthorizedError: private'
+      });
+    } else {
+      this.model.findOneAndUpdate({ _id: req.params.id }, req.body, (err) => {
+        if (err) { return console.error(err); }
+        res.sendStatus(200);
+      });
+    }
+  };
 
   // Delete by id
   delete = (req, res) => {
-    this.model.findOneAndRemove({ _id: req.params.id }, (err) => {
-      if (err) { return console.error(err); }
-      res.sendStatus(200);
-    });
-  }
+    if (!req.payload.user._id) {
+      res.status(401).json({
+        'message' : 'UnauthorizedError: private'
+      });
+    } else {
+      this.model.findOneAndRemove({ _id: req.params.id }, (err) => {
+        if (err) { return console.error(err); }
+        res.sendStatus(200);
+      });
+    }
+  };
+
 }
 
 export default BaseCtrl;