Getting Started With Firebase And Protecting Routes From Unauthorized Users in Angular

Hello Readers,

In this tutorial I am going to cover the following topics

• Firebase
• Authentication using Firebase
• Protecting routes from unauthorized users and much more..

At the end of the tutorial, you will find the source code, so feel free to play with the code yourself.

I will divide this tutorial into 3 sections,

• Setting up the Firebase
• Fetching the data
• Protecting routes.

Setting up the Firebase

1. First visit the https://www.firebase.com/ then click on See our new Website and then at the right hand side top corner you will find Go to Console click on that and log in to your account or else visit https://console.firebase.google.com/ and login.
   
   
2. Then from console click on create new project
   
   
   
   
   

Then after creating database click on authentication as shown below

As I want to create Login and sign up by email id and password I must enable it from sign-in method tab as shown below

Then click on web setup (top right corner),to get your configuration

Now it’s time to set the web configuration in index.html,open your index.html file and paste the script tag that you just got from Firebase as shown below,

So now all firebase setup portion is done, so now move to Angular to create the user. I am using in built authentication of firebase, for more information about it you can visit https://firebase.google.com/docs/auth/web/password-auth, there you can find doc about user management.

Angular Side

First I will generate one service and name it as user-auth.service, in which I created signupUser,signinUser,logout, etc.. 

[code language=”typescript”]
import { Injectable } from '@angular/core';
import { User } from './user.interface';
import { Router } from '@angular/router';
import { Observable, Subject } from 'rxjs/Rx';
declare var firebase: any;
@Injectable()
export class UserAuthService {

  constructor(private router: Router) { }
  signupUser(user: User) {
    firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
      .catch(function (error) {
        console.log(error);
      });
  }
  logout() {
    firebase.auth().signOut();
    this.router.navigate(['/signin']);
  }
  signinUser(user: User) {
    firebase.auth().signInWithEmailAndPassword(user.email, user.password)
      .catch(function (error) {
        console.log(error);
        // ...
      });
  }
  isAuthenticated() {
    var user = firebase.auth().currentUser;
    if (user) {
      return true;
    }
    else {
      return false;
    }
  }
  userProfile() {
    var user = firebase.auth().currentUser;
    var name, email, photoUrl,password, uid, emailVerified;
    if (user != null) {
      //name = user.displayName;
      email = user.email;
      //password=user.password;
    return user;
      //photoUrl = user.photoURL;
      //emailVerified = user.emailVerified;
      //uid = user.uid;
    }
    else{
      return null;
    }
  }
  }
[/code]

Here in the above code I had declared variable as firebase which is imported on index.html. Then methods like signinUser,signupUser,Logout methods are just copied from firebase docs. I also created one method isAuthenticated which will return true if user is authenticated and false if not authenticated, depending on this value we will display log out in header.component. Also I had created one interface of User which shown below. 

[code language=”typescript”]
export interface User{
    email:string;
    password:string;
    confirmpassword:string;
}
[/code]

Now that I created service for user management, now I will create header.component for routing through the application. Here I  used bootstrap for styling the application. For more details about how routing works you may read my other tutorials.( https://jinalshahblog.wordpress.com/2016/12/28/crud-in-angular2-part2/ )

Header.component.html 

[code language=”html”]
<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a routerLink="/signup">Sign Up</a></li>
                <li><a routerLink="/signin">Sign In</a></li>
                <li><a routerLink="/userProfile">ViewProfile</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" *ngIf="isAuth()">
                <li><a (click)="onLogout()" style="cursor: pointer;">Logout</a></li>
            </ul>
        </div>
    </nav>
</header>
[/code]

 header.component.ts 

[code language=”typescript”]
import { Component, OnInit } from '@angular/core';
import { UserAuthService } from './user-auth.service';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(private userauthService:UserAuthService) { }
isAuth() {
        return this.userauthService.isAuthenticated();
    }
  ngOnInit() {
  }
onLogout() {
  alert("LogOut Called");
        this.userauthService.logout();
    }
}
[/code]

Here I  imported the service which I created previously. Look at the method isAuth() which is calling the isAuthenticated method of service which will return true if user is logged in or return false if user is not logged in and based on that result I am displaying the logout button of header.component.html as shown below. 

[code language=”html”]
<ul class="nav navbar-nav navbar-right" *ngIf="isAuth()">
                <li><a (click)="onLogout()" style="cursor: pointer;">Logout</a></li>
            </ul>
[/code]

So far I covered how to set up firebase,user-auth service,headercomponent and etc..

In this tutorial I am showing data driven approach for signup and signin component.

Data Driven Approch

First I will create signup.component to create new user. As I am using data driven approach I need to import formbuilder,formgroup,validator,formcontrol from @angular/forms.

Signup.component 

[code language=”html”]
<form [formGroup]="myForm" (ngSubmit)="onSignup()">
  <div class="form-group">
    <label for="email">E-Mail</label>
    <input formControlName="email" type="email" id="email" #email class="form-control">
    <span *ngIf="!email.pristine && email.errors != null && email.errors['noEmail']">Invalid mail address</span>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input formControlName="password" type="password" id="password" class="form-control">
  </div>
  <div class="form-group">
    <label for="confirm-password">Confirm Password</label>
    <input formControlName="confirmPassword" type="password" id="confirm-password" #confirmPassword class="form-control">
    <span *ngIf="!confirmPassword.pristine && confirmPassword.errors != null && confirmPassword.errors['passwordsNotMatch']">Passwords do not match</span>
  </div>
  <button type="submit" [disabled]="!myForm.valid" class="btn btn-primary">Sign Up</button>
</form>
[/code]

Signup.component.ts 

[code language=”typescript”]
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from "@angular/forms";
import { UserAuthService } from '../user-auth.service';
@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
 myForm: FormGroup;
    error = false;
    errorMessage = '';
   constructor(private fb: FormBuilder, private userauthService: UserAuthService) {}
  ngOnInit() {
  this.myForm = this.fb.group({
            email: ['', Validators.compose([
                Validators.required,
                this.isEmail
            ])],
            password: ['', Validators.required],
            confirmPassword: ['', Validators.compose([
                Validators.required,
                this.isEqualPassword.bind(this)
            ])],
        });
  }
  isEmail(control: FormControl): {[s: string]: boolean} {
        if (!control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
            return {noEmail: true};
        }
    }
    isEqualPassword(control: FormControl): {[s: string]: boolean} {
        if (!this.myForm) {
            return {passwordsNotMatch: true};
        }
        if (control.value !== this.myForm.controls['password'].value) {
            return {passwordsNotMatch: true};
        }
    }
 onSignup() {
      this.userauthService.signupUser(this.myForm.value);
    }
}
[/code]

Here in the above example I  used two different validations to show some example of how to use custom validations in Angular. Here I am checking email and both passwords and confirming whether the  password are the same or not. As shown in the above code you can use custom validations. In above example 2-3 key terms are important while using a data driven approach.

1. [formGroup]=”myForm”
2. FormBuilder
3. Validators

And the most important thing to rember while using the data driven approach is to add ReactiveFormsModule in app.module.ts file as shown below otherwise it will give error of formGroup property of form tag. 

[code language=”typescript”]
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
    BrowserModule,
     ReactiveFormsModule,
    HttpModule,
    routing

  ],
  providers: [UserAuthService,UserAuthGuardService]
})
[/code]

So after adding everything correctly, your signup using firebase authentication is done. Now it’s time for Signin.component

Signin.component.html 

[code language=”html”]
<h1>Sign In</h1>
<form [formGroup]="myForm" (ngSubmit)="onSignin()">
  <div class="form-group">
    <label for="email">E-Mail</label>
    <input formControlName="email" type="email" id="email" class="form-control">
  </div>
  <div class="input-group">
    <label for="password">Password</label>
    <input formControlName="password" type="password" id="password" class="form-control">
  </div>
  <button type="submit" [disabled]="!myForm.valid" class="btn btn-primary">Sign In</button>
</form>
[/code]

Signin.component.ts 

[code language=”typescript”]
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { UserAuthService } from '../user-auth.service';
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {
myForm: FormGroup;
    error = false;
    errorMessage = '';
    constructor(private fb: FormBuilder, private userauthService: UserAuthService) {}
    onSignin() {
      this.userauthService.signinUser(this.myForm.value);
    }
ngOnInit():any {
        this.myForm = this.fb.group({
            email: ['', Validators.required],
            password: ['', Validators.required],
        });
    }
}
[/code]

Here in signin.component I am only using required validator for email and password. onSignIn I am passing the the value of myForm i.e. whole form because myForm contains email and password only.

Now as signin and signup is done, now it’s time for viewprofile of logged In User. But before displaying user’s profile ,I had to check whether the user is authenticated to access the profile page or not.(i.e. user is only able to see his/her profile once he/she is logged in. Before log in they can’t visit viewprofile page.) To do so I am creating new service named user-auth-guard. In simple language I am creating routing guard so that anybody can’t access the restricted pages without logging in. There are two ways for doing it. One is previously used for the log out button and the other one is to use canActivate property of routing.

User-auth-guard.service.ts 

[code language=”typescript”]
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { UserAuthService } from './user-auth.service';
@Injectable()
export class UserAuthGuardService {
  constructor(private _data: UserAuthService) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    return this._data.isAuthenticated();
  }
}
[/code]

To create guard for router I am overriding canActivate method which is imported from CanActivate package of @angular/router ,which takes two arguments activatedroutesnapshot and routerstatesnapshot and returns Boolean value, so on this method I am returning result of isAuthenticated method of userAuthService ,which will return true if user is logged in false otherwise. And in app.routing.ts ,which contains array for routing I am using canActivate property of routing as shown below.

App.routing.ts 

[code language=”typescript”]
import { RouterModule, Routes } from "@angular/router";
import { SignupComponent } from './users/signup.component';
import { UsersComponent } from './users/users.component';
import { SigninComponent } from './users/signin.component';
import { UserAuthGuardService } from './user-auth-guard.service';
const APP_ROUTES: Routes = [
    {path: '', redirectTo: '/signup', pathMatch: 'full'},
    {path: 'signup', component: SignupComponent},
    {path: 'userProfile', component: UsersComponent ,canActivate:[UserAuthGuardService] },
    {path: 'signin', component: SigninComponent}
];
export const routing = RouterModule.forRoot(APP_ROUTES);
[/code]

Here in above array app_routes I can visit signup.component,signin.component without logging in but I can’t visit users.component without logging in, because I had used canActivate property. You can apply this canActivate property on any component which you want to be protected from unauthorized access.

Summary

We covered a lot in this tutorial!! Let’s just summarize it.

• Starting with firebase
• Using inbuilt authentication of firebase
• Route guard
• Fetching and inserting data to firebase

You can download the soureCode here.

Note

To run the demo correctly don’t forget to add web configuration setting in index.html and also don’t forget to run npm install to download all the dependencies.