Firebase using Angular4

While prototyping for few apps for our clients using MongoDB, Couchbase and MySQL databases, Firebase caught my interest and I started playing around with it. Initially I thought it’s MongoDB on cloud, this is true to some extent but Firebase offers many additional features like real time database, cloud messaging, analytics, out of the box authentication and many more. This additional features makes it perfect technology stack for rapid prototyping of MVP and also for small to medium size apps.

This blog is series of tutorials on what I discovered while learning Firebase and eventually Angular4.

On perusal of Firebase official documentation, I came to know that to understand Firebase I would have to pick up one of UI technologies. As a data engineer with no exposure to UI technologies, I researched which could be an easier UI stack to get onto Firebase. Finally, I decided Angular4 would be appropriate as a programming environment to learn Firebase, mainly because it uses typescript which I can relate to already familiar Scala programming language.

This multi-part blog series is written the way I had learned Angular2 and Firebase. I call it “Learn Firebase- the Data Engineer Way”.
Note: In case you have never written Angular 4 app and does not know HTML5 and CSS (like me), I suggest you to first visit bootstrap website and angular.io for a quick start guide.

USE CASE – INVENTORY APP

Lets develop basic inventory app for Agile Soft Systems, Inc where users can request for available inventory and admin can keep track of it.

Source code is available at git-link

Requirement Specification

Inventory app is a web based portal which

Should have web based login/logout for employee/user using company email account
Should have two types of user – Admin user and Simple user
Should have functionality for simple user to request inventory item
Should have functionality for admin user to approve/decline user request
Should have functionality for admin user to add/update inventory item

UI Wireframe The app layout should look like below wireframe

DEV SETUP

We need to set up our development environment before we start our coding. I use CentOS7, so all installation commands are given for centos, you can search equivalent installation steps for your os version.

Node.js

Angular2 needs nodejs 6+. You can find installation steps at node-js

Angular CLI

You can develop angular2 application without angular cli as well but it makes app developers life very easy and I strongly recommend it. You will like it too when you see magic in next section.

sudo npm install -g @angular/cli

Visual Studio Code

You can use your choice of code editor. I like Visual Studio Code, it is real cool code editor.

You can find installation steps at vs-code

That’s it. We are good to code our app.

Init App

Lets create Angular2 App using angular cli.

ng new inventory-app

We can invoke angular cli command using command ng. ng new . This command generates standard skeleton for angular 4 app.
Checkout angular-io link for folder structure and associated files. Also, do read about components.

Editor

Open newly created inventory-app project in Visual Studio Code.

Go to View → Integrated Terminal.

VS Code provides integrated terminal from where you can run cli commands. In integrated terminal, type ng server.

Open http://localhost:4200 in your web browser.

Congratulations…!!! We have our dev environment ready.

USER INTERFACE

Lets extend app to create UI similar to wireframe.

Angular cli (ng) has many commands in its kitty to create components and services.

Looking at wireframe, we should create project structure similar to image shown to right.

Header & Home Components

ng generate component header

Yeah, you guessed it right. g for generate and c for component.

Inventory Components

ng g c inventory/request
ng g c inventory/manage
ng g c inventory/approve

Auth Components

ng g c auth/signup
ng g c auth/signin

Similar to components, we can create services using angular cli.

ng generate service auth/auth
ng g s inventory/inventor

Service is nothing but common/reusable Typescript code which needs to be provided to angular app components and modules.

We have created the folder structure. Now we need to wire all the components using html and typescript code. header.component.htmlheader.component.html

<nav class=navbar navbar-inverse>
<div class=container-fluid>
<div class=navbar-header>

  <a class=navbar-brand href=www.agsft.com>Agile Soft Systems</a>

```
</div>
```
<ul class=nav navbar-nav>
<li><a routerLink=/>Home</a></li>
<li><a routerLink=/manage>Manage</a></li>
<li><a routerLink=/request >Request</a></li>
<li><a routerLink=/approve >Approve</a></li>
```
</ul>
```
<ul class=nav navbar-nav navbar-right>
<li><a>UserName</a></li>
<li ><a routerLink=/signup><span class=glyphicon glyphicon-user></span> Sign Up</a></li>
<li ><a routerLink=/signin><span class=glyphicon glyphicon-log-in></span> Login</a></li>
<li><a href=# (click)=onSignOut()><span class=glyphicon glyphicon-log-out></span> Logout</a></li>
```
</ul>
```
</div>
</nav>

Header component contains all links of our app.

routerLink is an Angular 2 feature which navigates to respective component.

app.component.html

<app-header></app-header>
<div class=container>
<div class=row>
<div class=col-md-12>
```
 <router-outlet></router-outlet>
```
```
</div>
```
</div>
</div>

app component is a root component which gets gets initialize at the start of angular app.
We have added header component in app.component.html, so that will be shown up as first page.
router-outlet is a magical directive included in Angular 2 which magically redirects to associated component.

“A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.” — snippet from angular.io

app.module.ts

import { Routes,RouterModule } from '@angular/router';
const appRoutes: Routes = [
{ path: , component: HomeComponent },
{ path: manage, component: ManageComponent},
{ path: request, component: RequestComponent },
{ path: approve, component: ApproveComponent },
{ path: signin, component: SigninComponent },
{ path: signup, component: SignupComponent }
];
find imports array and add
RouterModule.forRoot(appRoutes)

Similar to app.component.html, the corresponding typescript file gets initialized.
app.module.ts is an important file where we will be writing lot of boot code.
appRoutes is a place where we bind components to html link, which is futher refer by routerLink.
e.g. when user will click on http://localhost:4200/request , angular framework(routerLink) will call RequestComponent
Register appRoutes in angular app using RouterModule.

Reload the app on brower. The angular app should look like

This app works but something missing. We can change look and feel by simply adding bootstrap library to our app.

npm install --save bootstrap@latest

Edit .angular-cli.json
Add “../node_modules/bootstrap/dist/css/bootstrap.min.css” In styles array.

styles: [
styles.css,
../node_modules/bootstrap/dist/css/bootstrap.min.css
]

Kill the ng serve process if already running and invoke again.
Open browser and check angular app.

Our base app template is ready, now it’s time to add business logic.

FIREBASE

We will use Authentication feature of Firebase which will allow us user to authenticate in app.

First step is to register yourself in Firebase portal. Firebase offers flexible pricing plans and base plan(spark) is free and is enough for our use case.
Once you register yourself, create a new project in firebase console.
Go to firebase console – https://console.firebase.google.com/
Find and Click on +Add project link
Enter name of your project and country
Click on create.
On project home page, click on Add Firebase to your web app
This will generate Firebase setting. Copy config variable and add it in app.module.ts file.
Note: Generated code is javascript code and we need to add those values in typescript file, so there is slight changes requires as below –

FIREBASE

We will use Authentication feature of Firebase which will allow us user to authenticate in app.

export const firebaseConfig = {
apiKey: ZyVHE8CXx6zRhtByguogEAIzaSyCVODV6oS4diF,
authDomain: inventory-app-726af.firebaseapp.com,
databaseURL: https://inventory-app.firebaseio.com,
projectId: inventory-app,
storageBucket: inventory-app.appspot.com,
messagingSenderId: 5963xxx54439
};

Lets implement authentication feature using this information.

We have to install firebase node module and angular2 node module to use firebase library.

npm install [email protected] --save
npm install [email protected] --save

We are ready to use firebase APIs.

app.module.ts

import firebase modules

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

Signup Component

signup.component.html

<div class=row>
<div class=col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2>
<form (ngSubmit)=onSignup(f) #f=ngForm>
<div class=form-group>
```
    <label for=email>Mail</label>
```

    <input type=email id=email name=email ngModel class=form-control>

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

    <label for=password>Password</label>

    <input type=password id=password name=password ngModel class=form-control>

```
  </div>
```

  <button class=btn btn-primary type=submit \[disabled\]=!f.valid>Sign Up</button>

```
</form>
```
</div>
</div>

signup.component.ts

onSignup(form: NgForm) {
const email = form.value.email;
const password = form.value.password;
this.authService.signupUser(email, password);

This is simple signup form which has two fields email and password.
Things to notice here are ngModel and ngSubmit.
Whichever form field you wish to access in typescript file just insert keyword ngModel in input tag. Also, ngModel required attribute “name” in input tag.
ngSubmit runs prescribed method on click of form submit button.
In typescript code, we are reading form values and passing it to authService which we will be coding soon.

Auth Service

auth.service.ts

constructor(private router: Router, private af: AngularFireAuth) {}
signupUser(email: string, password: string) {
this.af.auth.createUserWithEmailAndPassword(email, password)
.then(
(success) ={
let user:any = this.af.auth.currentUser;
user.sendEmailVerification().then(
(success) ={
console.log(please verify your email);
alert(please verify your email);
}
).catch(
(err) ={
console.log(Error: + err);
alert(Error: + err);
}
)
})
.catch(
error = alert(error.message)
);
}
createUserWithEmailAndPassword & sendEmailVerification is built in method provided by Firebase.

app.module.ts

signin.component.html

<div class=row>
<div class=col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2>
<form (ngSubmit)=onSignin(f) #f=ngForm>
<div class=form-group>
```
    <label for=email>Mail</label>
```

    <input type=email id=email name=email ngModel class=form-control>

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

    <label for=password>Password</label>

    <input type=password id=password name=password ngModel class=form-control>

```
  </div>
```

  <button class=btn btn-primary type=submit \[disabled\]=!f.valid>Sign In</button>

```
  Or
```

  <button class=btn btn-primary type=submit (click)=onSigninGmail()>Sign In with Google</button>

```
</form>
```
</div>
</div>

signin.component.ts

onSignin(form: NgForm) {
const email = form.value.email;
const password = form.value.password;
this.authService.signinUser(email, password);
}
onSigninGmail() {
this.authService.signinGmail();
}
auth.service.ts
signinUser(email: string, password: string) {
this.af.auth.signInWithEmailAndPassword(email,password)
.then(
response = {
this.router.navigate(['/']);
this.af.auth.currentUser.getToken()
.then(
(token: string) = {
localStorage.setItem('token',token);
localStorage.setItem('uid',this.af.auth.currentUser.uid);
localStorage.setItem('email',this.af.auth.currentUser.email);
}
)
}
)
.catch(
error = console.log(error)
);
}
signinGmail() {
this.af.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
.then(
response = {
this.router.navigate(['/']);
this.af.auth.currentUser.getToken()
.then(
(token: string) = {
localStorage.setItem('token',token)
localStorage.setItem('uid',this.af.auth.currentUser.uid);
localStorage.setItem('email',this.af.auth.currentUser.email);
}
)
}
)
.catch(
error = console.log(error)
);
}
logout() {
this.af.auth.signOut();
localStorage.clear();
}
getEmail(){
return localStorage.getItem('email');
}
getToken() {
return localStorage.getItem('token')
}
isAuthenticated() {
return localStorage.getItem('token') != null;
}

Firebase not only provides authentication using email/password but also for social providers such as Google, Facebook, Twitter.
Agile Soft System, Inc uses google for work and it make sense to enable Google provider as well.

signinUser

This method takes email/password and validate the user against Firebase user list.
I am storing few of the parameters such as token, uid and email.
Specify firebase.auth.GoogleAuthProvider() in signInWithPopup method. This will allow user to sign in to our app using google creds.

logout,getEmail,getToken

These are helper methods that I have created, to implement logout and other functionality.

Reload angular app and try to sign in. You will get an verification email on sign up.
Once you verify it, you will be registered in firebase project.
You can check registered users in firebase console as well.
Firebase console → Firebase Project → Authentications → Users

Everything should work now from Sign up to Sign In. We still have to modify few things in header component to make UI look like wireframe.

Lets give final touch.

header.component.html

<nav class=navbar navbar-inverse>
<div class=container-fluid>
<div class=navbar-header>

  <a class=navbar-brand href=#>Agile Soft Systems</a>

```
</div>
```
<ul class=nav navbar-nav>
<li><a routerLink=/>Home</a></li>
<li><a routerLink=/manage>Manage</a></li>
<li><a routerLink=/request >Request</a></li>
<li><a routerLink=/approve >Approve</a></li>
```
</ul>
```
<ul class=nav navbar-nav navbar-right>
<li><a>{{ authService.getEmail() }}</a></li>
<li \*ngIf=!authService.isAuthenticated()><a routerLink=/signup><span class=glyphicon glyphicon-user></span> Sign Up</a></li>
<li \*ngIf=!authService.isAuthenticated()><a routerLink=/signin><span class=glyphicon glyphicon-log-in></span> Login</a></li>
<li \*ngIf=authService.isAuthenticated()><a href=# (click)=onSignOut()><span class=glyphicon glyphicon-log-out></span> Logout</a></li>
```
</ul>
```
</div>
</nav>

header.component.ts

constructor(private authService: AuthService) { } ngOnInit() { } onSignOut() { this.authService.logout(); }

Reload the app and figure out the magic.

CAN-ACTIVATE

It seems everything is working but did you figure out – user is still able to access links request, approve and manage even if he/she not logged into the inventory-app.
CanActivate prevents exactly same thing.

auth-guard.service.ts

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

if(!this.authService.isAuthenticated())

```
  this.router.navigate(\['/'\]);
```

return this.authService.isAuthenticated();

}
}

app.module.ts

import { AuthGuard } from './auth/auth-guard.service';
providers: [AuthService,AngularFireAuth,AuthGuard],
const appRoutes: Routes = [
{ path: , component: HomeComponent },
{ path: manage, component: ManageComponent, canActivate: [AuthGuard] },
{ path: request, component: RequestComponent, canActivate: [AuthGuard] },
{ path: approve, component: ApproveComponent, canActivate: [AuthGuard] },
{ path: signin, component: SigninComponent },
{ path: signup, component: SignupComponent }
]

Check the app now, it should not allow unauthenticated users to access request link.

I know this is a long blog but I hope its informative and gets you off on a good start to learn Firebase. Thanks for being with me. We will implement few more features of our inventory app using Firebase Real Time Database in next blog post. Keep visiting for the update on next blog.