Authentication is one of the common part of any web and mobile application, in this tutorial will cover how to use Firebase API in Angular2 project for open authentication. It includes Facebook, google, twitter and GitHub. We will use angular CLI for completing this project.

Prerequisite

There will be 2 pages one is for login and another would be home page which has to be login protected, once user authenticate successfully with any of the login provider he will redirect to home page. Where we have to show user's displayName, photo and email address.

Install Angular CLI using below command

Application will be up and running on port 4200 http://localhost:4200/

You can create Google Firebase App from console

For consume firebase API in angular we need to install firebase and angularfire2 lib using npm

For consume firebase API in angular we need to install firebase and angularfire2 lib using npm

First we need to configure AngularFireModule and AnglarFireAuth as below

app.module.ts

import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; import { HttpModule } from '@angular/http' ; import { AppComponent } from './app.component' ; import { AngularFireModule } from 'angularfire2' ; import { AngularFireAuth } from 'angularfire2/auth' ; export const firebaseConfig = { apiKey: "api-key" , authDomain: "auth-domain" , databaseURL: "database-url" , projectId: "project-id" , storageBucket: "storage-bucket" , messagingSenderId: "sender-id" } ; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, FormsModule, HttpModule, AngularFireModule.initializeApp(firebaseConfig), ], providers: [AngularFireAuth], bootstrap: [AppComponent] }) export class AppModule

Add Firebase to your web app” Firebase json configuration you can get it from Firebase console click on “

Project Overview Page





Create an Authorization service

In order to use firebase authentication in our application it is good to encapsulate authentication functions in one service, Lets create a service using angular CLI.

:~$ ng generate service providers/auth.service.ts

auth.service.ts

import { Injectable } from '@angular/core' ; import { AngularFireAuth } from 'angularfire2/auth' ; import * as firebase from 'firebase/app' ; @Injectable() export class AuthService { constructor ( public afa: AngularFireAuth ) { } loginWithGoogle() { return this .afa.auth.signInWithPopup( new firebase.auth.GoogleAuthProvider()); } loginWithFacebook() { return this .afa.auth.signInWithPopup( new firebase.auth.FacebookAuthProvider()); } loginWithTwitter() { return this .afa.auth.signInWithPopup( new firebase.auth.TwitterAuthProvider()); } loginWithGitHub() { return this .afa.auth.signInWithPopup( new firebase.auth.GithubAuthProvider()); } logout() { localStorage.clear(); return this .afa.auth.signOut(); } }

We need to import AngularFireAuth from angularfire2 lib and firebase from firebase lib. Next, AngularFireAuth service is injected into the constructor as public in AuthService. logout() method we are clearing out the localstorage data, will use localStorage to stroe displayname , email , photourl from app.component.ts

The AuthService consist of 5 following methods

loginWithFacebook() loginWithGoogle() loginWithTwitter() loginWithGitHub() logout()

AngularFireAuth provide two methods for OAuth, one is signInWithPopUp(provider) and signInWithRedirect(provider) , one opens popup window within the page and another redirect you to auth providers website respectively. Both method requires authentication object as parameter, Authentication object means which auth provider you want to use.

Create LoginPage Component

:~$ ng generate component loginPage

Let’s implement LoginPage Component, This component will wrap the AuthService methods to make available for login-page html template, Inject the AuthService and Router as below

login-page.component.ts

import { Component, OnInit } from '@angular/core' ; import { Router } from '@angular/router' ; import { AuthService } from '../providers/auth.service' ; @Component({ selector: 'app-login-page' , templateUrl: './login-page.component.html' , styleUrls: [ './login-page.component.css' ], }) export class LoginPageComponent implements OnInit { constructor ( public authService: AuthService , private router: Router ) { } ngOnInit() { } loginGoogle() { this .authService.loginWithGoogle().then((data)=> { this .router.navigate([ '' ]); }); } loginFacebook() { this .authService.loginWithFacebook().then((data)=> { this .router.navigate([ '' ]); }); } loginTwitter() { this .authService.loginWithTwitter().then((data)=> { this .router.navigate([ '' ]); }); } loginGitHub() { this .authService.loginWithGitHub().then((data)=> { this .router.navigate([ '' ]); }); } }

In above code snippet we have implemented 4 methods which returns the promise and once promise is resolved we are redirecting user to home page.

Login Page HTML

Let's create login html page, i'm using bootstrap 4 for designing this page and also custom css for social login buttons



login-page.component.html

<div class = "container" style= "margin-top: 20px" > <div class = "row" > <div class = "col-md-3" > <button class = "loginBtn loginBtn--facebook" type= "button" (click)= "loginFacebook()" >Login with Facebook</button> </div> <div class = "col-md-3" > <button class = "loginBtn loginBtn--twitter" type= "button" (click)= "loginTwitter()" >Login with Twitter</button> </div> <div class = "col-md-3" > <button class = "loginBtn loginBtn--google" type= "button" (click)= "loginGoogle()" >Login with Google</button> </div> <div class = "col-md-3" > <button class = "loginBtn loginBtn--github" type= "button" (click)= "loginGitHub()" >Login with GitHub</button> </div> </div> </div>

Each button attached an onclick event and its calling the exposed method by loginPage component i.e loginWith Facebook, Twitter, Google, GitHub respectively.





Create Home Page Component