Navigate to the auth.service.ts file and add all the imports we'll need.

app/src/app/services/ auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as firebase from 'firebase';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable({    
    providedIn: 'root'
})

In the AuthService class we need to add Router, afAuth, and AngularFireAuth to the class constructor.

app/src/app/services/ auth.service.ts 

export class AuthService {    
    constructor(private router: Router, public afAuth: AngularFireAuth) {}
}

Under the constructor, in the AuthService class, create a string variable called token and create a signInUser function that will route us to the home page once we are authenticated.

app/src/app/services/ auth.service.ts 

token: string;
signInUser(email: string, password: string){                            this.afAuth.auth.signInWithEmailAndPassword(email, password)
  .then(      
  response => {                  
    this.router.navigate(['/']);              firebase.auth().currentUser.getIdToken()              
    .then(              
      (token: string) => this.token = token               );      
    }   
  ).catch(error => error);
}

Now create a getToken function that will get the token, and an isAuthenticated function that will return a true/false value based on whether that token is null or not.

app/src/app/services/ auth.service.ts 

getToken() {        
    firebase.auth().currentUser.getIdToken()        
    .then(          
      (token: string) => this.token = token);  
}

isAuthenticated() {      
  return this.token != null;
}

Now in the AuthGuard service we can finally get rid of the error we've been staring at.

Add the imports you will need

app/src/app/services/authguard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({      
    providedIn: 'root'
})

On the class itself we need to implement CanActivate. This is what we are using in the app.module.ts file and is giving us the error. The error is pretty self explanatory. We havent told angular what CanActivate does.

We need Can Activate to route us to our main component ( we named the login in routes in app.module.ts ) if we are authenticated, and route us to the login component if we are not.

app/src/app/services/ authguard.service.ts

export class AuthguardService implements CanActivate {      
constructor(private authService: AuthService, private router: Router){}                                  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {  
    if (!this.authService.isAuthenticated()) {            this.router.navigateByUrl('login');  
    }        
    return this.authService.isAuthenticated();    
  }
}

Set Your User Account in Firebase For the Web App.

• Navigate to project from user console.
• Select Authentication under Develop
• Select the Sign-in method tab
• Enable Email/Password
• Select Users
• click add user
• create your email and password

See Our Data

So I know you've been waiting to see data, and we are getting really close! We programmed the router to try to go to '/' on the initial load but we programmed the AuthGuardService to navigate us to login if we are not authenticated. To actually get the behavior we are expecting we need to replace all the bootstrapped html in the app.component.html file with a router-outlet angular element.

app/src/app/app.component.html:

<router-outlet></router-outlet>

Now in the main.component.html file we need to replace the bootrapped html. 

app/src/main.comonent.html

<div class="container">      
  <div class="ph">              
    <app-ph></app-ph>      
  </div>      
  <div class="con">              
    <app-con></app-con>      
  </div>
</div>

Now we style the container class for the main component.

app/src/main.component.css

.container {      
  display: grid;      
  grid-template-columns : 1fr 1fr;    
  grid-template-rows: 1fr;     
  row-gap: 1em;     
  column-gap: 1em;     
  grid-template-areas:    
  "c p";     
  text-align: center;    
  color: white;
}

.con {      
  grid-area: c;
}

.ph {    
  grid-area: p;
}

Add imports we will need at the top of the login.component.ts file.

src/app/login/login.component.ts

import { NgForm } from '@angular/forms';
import { AuthService } from '../services/auth.service';

Add the authservice to the constructor:

src/app/login/login.component.ts

constructor(private authService: AuthService) { }

Create the sign in function under the constructor that takes info from a form and uses the signInUser function from the authservice service file to send it off to firebase for authentication.

 src/app/login/login.component.ts

signIn(form: NgForm) {      
  const email = form.value.email;      
  const password = form.value.password;      
  this.authService.signInUser(email, password);  
}

Create the form and use the signIn function

src/app/login/login.component.html

<form (ngSubmit)="signIn(f)" #f="ngForm">    
  <input type="text" id="email" name="email" ngModel>   
  <input type="password" id="password" name="password" ngModel>   
  <input type="submit" value="Sign In" id="login">
</form>

Now to add some styling to the login page

src/app/login/login.component.css

form {  
  display: grid;  
  grid-template-columns: 
  10% 1fr 10%;  
  grid-template-rows: 2fr 1fr 1fr 1fr;  
  grid-template-areas:   
  ". . ."  
  ". e ."  
  ". p ."  
  ". l .";
}
#email {  
  grid-area: e;  
  font-size: 1.25em;   
  text-align: center; 
  background-color: #c9c9c9;  
  border-color: #f39c12; 
  border-style: solid;  
  border-bottom-style: none;   
  height: 2.25em;
}

#password {  
  grid-area: p;  
  font-size: 1.25em;  
  text-align: center;  
  background-color: #c9c9c9;  
  border-style: solid;  
  border-bottom-style: none;  
  border-color: #f39c12;
}

#login {   
  grid-area: l; 
  font-size: 1.25em;  
  border-color: #f39c12;  
  border-style: solid;  
  background-color: #f39c12;  
  color: white;
}

All that's left is the PH and Conductivity Components! So close.

Add the imports you will need to the ph.component.ts file 

src/app/main/ph.component.ts

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';

Now we need to set the itemRef as an Observable and subscribe to it so we can update the phData on valueChanges. 

src/app/main/ph.component.ts

export class PhComponent {      
  itemRef: AngularFireObject<any>;     
  phReading: number;     
  constructor(db: AngularFireDatabase) {       
    this.itemRef = db.object('PH');        
    this.itemRef.valueChanges()         
    .subscribe(             
      (phData: number) => {               
         this.phReading = phData;            
     }        
   );     
  }
}

Now for your first piece of IOT data to salivate over.

src/app/main/ph.component.html

<div class="container">   
  <p> PH: {{ phReading }} </p>
</div>

Make it look presentable   

src/app/main/ph.component.css

.container {     
  background-color: #44bd32;     
  height: 4em;  display: grid;     
  grid-template-rows: 1fr 1fr 1fr;      
  grid-template-areas:      
  "."  "p"  "."
}
p {     
  grid-area: p;
}

At this point you should be able to login to your app and view the PH data. Turn everthing on and watch the IOT magic happen.

The Conductivity component will need to be set up almost exactly like the PH component and that is my challenge to YOU! If you run into any issues all the code has been uploaded on Github!

Arduino code here

Angular code here