Add authentication and auth guard

ng2auth/src/app/app-routing.module.ts

@@ -1,10 +1,36 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { CallbackComponent } from './callback.component';
+import { PublicDealsComponent } from './public-deals/public-deals.component';
+import { PrivateDealsComponent } from './private-deals/private-deals.component';
+import { AuthGuard } from './auth/auth.guard';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'deals',
+    pathMatch: 'full'
+  },
+  {
+    path: 'deals',
+    component: PublicDealsComponent
+  },
+  {
+    path: 'special',
+    component: PrivateDealsComponent,
+    canActivate: [
+      AuthGuard
+    ]
+  },
+  {
+    path: 'callback',
+    component: CallbackComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
+  providers: [AuthGuard],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

ng2auth/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import { PublicDealsComponent } from './public-deals/public-deals.component';
 import { PrivateDealsComponent } from './private-deals/private-deals.component';
 import { CallbackComponent } from './callback.component';
+import { AuthService } from './auth/auth.service';
 
 
 @NgModule({
@@ -20,7 +21,9 @@ import { CallbackComponent } from './callback.component';
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [
+    AuthService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

ng2auth/src/app/auth/auth.guard.ts

@@ -1,12 +1,21 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
+import { AuthService } from './auth.service';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class AuthGuard implements CanActivate {
+
+  constructor(private authService: AuthService, private router: Router) {}
+
   canActivate(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    if (!this.authService.authenticated) {
+      this.router.navigate(['/']);
+      return false;
+    }
     return true;
   }
 }

ng2auth/src/app/auth/auth.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import * as auth0 from 'auth0-js';
 import { AUTH_CONFIG } from './auth0-variables';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class AuthService {
@@ -21,7 +22,7 @@ export class AuthService {
   loggedIn: boolean;
   loggedIn$ = new BehaviorSubject<boolean>(this.loggedIn);
 
-  constructor() {
+  constructor(private router: Router) {
     // If authenticated, set local profile property and update login status subject
     if (this.authenticated) {
       this.userProfile = JSON.parse(localStorage.getItem('profile'));
@@ -42,13 +43,14 @@ export class AuthService {
 
   handleAuth() {
     // When Auth0 hash parsed, get profile
-    this.auth0.parseHash((err, authResult) => {
+    this.auth0.parseHash(window.location.hash, (err, authResult) => {
       if (authResult && authResult.accessToken && authResult.idToken) {
         window.location.hash = '';
         this._getProfile(authResult);
       } else if (err) {
         console.error(`Error: ${err.error}`);
       }
+      this.router.navigate(['/']);
     });
   }
 

ng2auth/src/app/callback.component.ts

@@ -1,19 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from './auth/auth.service';
 
 @Component({
   selector: 'app-callback',
   template: `
     <p>
-      callback works!
+      Loading...
     </p>
   `,
   styles: []
 })
 export class CallbackComponent implements OnInit {
 
-  constructor() { }
+  constructor(private authService: AuthService) { }
 
   ngOnInit() {
+    this.authService.handleAuth();
   }
 
 }