This is a follow up article. In case you have not gone through Part one, it can be found here. Part One entails:

Adding Starting up an Angular (2) application.

Adding authentication

Twitter authentication

Facebook authentication

Gmail authentication

This Part 2 will walk you through the following:

Safeguarding the dashboard page and other protected pages

Adding Logout functionality

Authentication with Github accounts

Regular sign up/login

Note, you can find the complete code on github.

Click here to share this article on LinkedIn »

Lets Get Started!

Adding Logout Functionality

We implemented the logout functionality in our auth.service.ts file. Lets add the button on our Navigation and add click event that triggers the Logout function already in auth.service:

// dashboard.component.html

... <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a>Home</a></li> <li><a>About</a></li> <li><a>Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="" (click)="authService.logout()">Logout</a></li> </ul> ...

Safeguarding the Dashboard page

The dashboard page needs to be accessed only to authenticated user. The steps here will guide you in protecting other pages that requires authentication. Since this is just demo, we have just one protected page — the dashboard.

What Angular uses in protecting pages is called Navigation Route Guards and there are 5 of them. Here they are and scenarios where they are used:

CanActivate — Used in deciding if the route can be activated

CanActivateChild — Used in deciding if a route child can be activated

CanDeactivate — used in deciding if a route can be deactivated

CanLoad — to decide if children can be loaded. Used for lazy loading

Resolve — to perform route data retrieval before route activation.

More details about these route guards can be found in Angular documentation

The route guard that serves our purpose is the CanActivate guard and thats what we will be using.

Adding guard to Dashboard page

Run ng generate service services/auth-guard in the terminal to generate the AuthGuard and place it in services folder.

in the terminal to generate the AuthGuard and place it in services folder. Since services are not provisioned in the app module. We need to import it and add to providers under @NgModule decorator in app.module.ts file

Open app.routes.ts and import AuthGuard from ‘./services/auth-guard.service’;

and import AuthGuard from ‘./services/auth-guard.service’; Add canActivate: [AuthGuard] to dashboard path.

Here’s our AuthGuard Class

// services/auth-guard.service.ts import { AuthService } from './auth.service';

import { Injectable } from '@angular/core';

import { Router, CanActivate } from '@angular/router'; @Injectable()

export class AuthGuard implements CanActivate { constructor(private router: Router, private authService: AuthService) { } canActivate() { if ( this.authService.isLoggedIn() ) { return true; } this.router.navigate(['/']); return false; } }

Here we create the AuthGuard functionality by importing the CanActivate class, adding router (because we need it to redirect user if they are not logged in), added AuthService to check authentication.

If you go to http://localhost:4200/dashboard without being logged in, you will be kicked out and redirected to login page.

Authentication with Github Account

This is quite as easy as other steps. But first, register your app as a developer on Github. You will be provided with OAuth Client ID and Client Secret.

Go to your Firebase Dashboard > Develop > Sign-in Methods and click Github. Clicking Enable allows you to enter the IDs:

Registering your app with Github

Enabling GitHub signin in Firebase Dashboard

Add Click event to the ‘Login with Github’ button on Login page.

We edit this in the login/login.component.html file like so:

// login/login.component.html ... <button type="button" class="btn btn-block (click)="signInWithGithub()">

<i class="fa fa-github" aria-hidden="true"></i>Login with Github

</button> ...

Create Github signin function

In the login/login.component.ts file, we add the function to handle click event. Here:

// login/login.component.ts ...

signInWithGithub() { this.authService.signInWithGithub()

.then((res) => {

this.router.navigate(['dashboard'])

})

.catch((err) => console.log(err));

}

...

Add Github Signin to AuthService

From the above code, we are calling signInWithGithub() from the authService, so we will need to go create that function:

// services/auth.service.ts ...

signInWithGithub() {

return this._firebaseAuth.auth.signInWithPopup(

new firebase.auth.GithubAuthProvider()

)

} ...

Bingo! We are done with that. Didn’t I tell you, its easy? Now you can login with your Github account.

Regular Sign In with Email and Password

Firebase API now allows us to create a user with email/password and sign them in in just one form. To prepare our application for this, we do the following:

Add name, method and ngForm attributes tags to <form> tag in login.component.ts file to make it:

<form name="userform" method="post" #formCtrl="ngForm">

Import FormsModule and add it to Imports in app.module.ts . This will allow us us [(ngModel)] in our login form.

// app.module.ts

...

import { FormsModule } from '@angular/forms'; ... imports: [

BrowserModule,

AppRoutes,

FormsModule,

AngularFireModule.initializeApp(environment.firebase, 'angular-auth-firebase'),

AngularFireDatabaseModule,

AngularFireAuthModule

], ...

Add ngModel to the username and password input fields in login.component.html

// login/login.component.html ...

<div class="form-group">

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" [(ngModel)]="user.email" placeholder="Email" required>

</div> <div class="form-group">

<label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" [(ngModel)]="user.password" placeholder="Password" required>

</div>

...

Disable button when input fields are empty. Do this on the Login with Email button

// login/login.component.html

...

<div class="form-group">

<button type="buton" class="btn btn-primary btn-block" style="margin-bottom: 20px" (click)="signInWithEmail()" [disabled]="formCtrl.form.invalid"> Login with Email



</button>

</div>

...

In our login.component.ts , we will bind user inputs to user object so we can pass it to the EmailAuthProvider function.

We add this, just below export class LoginComponent implements OnInit {

user = {

email: '',

password: ''

};

Next, we create signInWithEmail function. This function will call the signInRegular function from our AuthService, passing the email and password as parameters. Here:

// login.component.ts ...

signInWithEmail() {

this.authService.signInRegular(this.user.email, this.user.password)

.then((res) => {

console.log(res);



this.router.navigate(['dashboard']);

})

.catch((err) => console.log('error: ' + err));

}

...

Now, let’s create the signInRegular function in our AuthService class.

// auth.service.ts ...

signInRegular(email, password) { const credential = firebase.auth.EmailAuthProvider.credential( email, password ); return this._firebaseAuth.auth.signInWithEmailAndPassword(email, password) }

...

All fine and dandy!

A Quick Recap

In this Part 2 ( Part 1 can be found here) series of authenticating your Angular app with Firebase, we implemented the following:

Safeguarding the dashboard page

Authentication using Github login

Authentication using Regular email/password

Added Logout functionality

Thank you for following along till this stage. If you encounter any challenge or have better ways of achieving this, feel free to drop a comment.

You can also follow me on Twitter and Github