How to Create Facebook and Google social login in angular | E-commerce – part 2

This is part 2 of social authentication in angular. In part 1 step by step, we learned about how to generate Google OAuth Client Id and Facebook App Id. Here we see how to integrate the social authentication.

First, install the npm package of angularx-social-login by the command

After instal import module in the app.module.ts file

Code: app.module.ts

In above code Please add your facebook app Id and google OAuth Client Id to the particular function (mentioned in commands)

Then create social Login component by command

Code: social-login-component.html

Code: social-login-component.css

.login-box {
    background: #fff;
    padding: 20px;
    max-width: 480px;
    margin: 25vh auto;
    text-align: center;
    letter-spacing: 1px;
    position: relative;
}
 
.login-box:hover {
      box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
 
.login-box h2 {
    margin: 20px 0 20px;
    padding: 0;
    text-transform: uppercase;
    color: #4688F1;
}
 
.social-button {
      background-position: 25px 0px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    height: 50px;
      line-height: 50px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    width: 100%;
      border-radius: 3px;
    margin: 10px auto;
    outline: rgb(255, 255, 255) none 0px;
    padding-left: 20%;
    transition: all 0.2s cubic-bezier(0.72, 0.01, 0.56, 1) 0s;
      -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
 
#facebook-connect {
    background: rgb(255, 255, 255) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook.svg?sanitize=true') no-repeat scroll 5px 0px / 30px 50px padding-box border-box;
    border: 1px solid rgb(60, 90, 154);
}
 
#facebook-connect:hover {
      border-color: rgb(60, 90, 154);
      background: rgb(60, 90, 154) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook-white.svg?sanitize=true') no-repeat scroll 5px 0px / 30px 50px padding-box border-box;
      -webkit-transition: all .8s ease-out;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease-out;
}
 
#facebook-connect span {
      box-sizing: border-box;
    color: rgb(60, 90, 154);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    border: 0px none rgb(255, 255, 255);
    outline: rgb(255, 255, 255) none 0px;
      -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
 
#facebook-connect:hover span {
      color: #FFF;
      -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
 
#google-connect {
    background: rgb(255, 255, 255) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
    border: 1px solid rgb(220, 74, 61);
}
 
#google-connect:hover {
      border-color: rgb(220, 74, 61);
      background: rgb(220, 74, 61) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus-white.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
      -webkit-transition: all .8s ease-out;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease-out;
}
 
#google-connect span {
      box-sizing: border-box;
    color: rgb(220, 74, 61);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    border: 0px none rgb(220, 74, 61);
    outline: rgb(255, 255, 255) none 0px;
      -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
 
#google-connect:hover span {
      color: #FFF;
      -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

Code: social-login-component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'angularx-social-login';
import { FacebookLoginProvider, GoogleLoginProvider } from 'angularx-social-login';
import { SocialUser } from 'angularx-social-login';
import { Router } from '@angular/router';
@Component({
  selector: 'app-social-login',
  templateUrl: './social-login.component.html',
  styleUrls: ['./social-login.component.css']
})
export class SocialLoginComponent implements OnInit {
  public user: SocialUser;
  public loggedIn: boolean;
  public status: any;
constructor(
    private authService: AuthService,
    private route: Router
  ) { }

  ngOnInit(): void {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
      if (this.loggedIn) {
        this.route.navigate(['/products']);
      } else {
        this.route.navigate(['/login']);
      }
    });
  }
 signInWithGoogle(): void {
    try {
      this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
    } catch (e) {
      console.log(e);
    }
  }
    signInWithFB(): void {
    try {
      this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
    } catch (e) {
      console.log(e);
    }
  }


}

In ngOnit, the authState function get subscribe and listen to the authetication from google or facebook if it is loged in then with the use of router we redirect to products or dashboard page.

Then In your header file, you want to display the name, image, email, and logout from social authentication. Like the below image.

Code: header.component.html

<aside class="bg-dark " *ngIf='loggedIn'>
  <ul>
  
  
  <li><div class="icons"><i class="fa fa-male"></i></div><div class="linktitle">Mens wear</div></li>
  <li><div class="icons"><i class="fa fa-female"></i></div><div class="linktitle">Womens wear</div></li>
  <li><div class="icons"><i class="fa fa-bed"></i></div><div class="linktitle">Furnitures</div></li>
  <li><div class="icons"><i class="fa fa-laptop"></i></div><div class="linktitle">Electronics</div></li>
  <li><div class="icons"><i class="fa fa-heart"></i></div><div class="linktitle">Favorite</div></li>  
</ul> 
  </aside>
<nav class="navbar navbar-expand-md bg-dark pb-0 fixed-top" id="banner">
	<div class="container-fluid ">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><span>Helperscript</span> Shopify</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse " *ngIf='loggedIn' id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto ">
      <li class="nav-item" (click)="navigate('/products')" [ngClass]="product ?'active':''">
        <a class="nav-link" routerLink="/products">Products</a>
      </li>
      <li class="nav-item" (click)="navigate('/offers')" [ngClass]="offers ?'active':''">
        <a class="nav-link" routerLink="/offers">offers</a>
      </li>
      <li class="nav-item" (click)="navigate('/cart')" [ngClass]="cart ?'active':''">
        <a class="nav-link" routerLink="/cart"><i class="fa fa-shopping-cart"></i></a>
      </li> 
	   <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        <img src="{{user.photoUrl}}"style="width:40px;height:40px;border-radius:50%;"/>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
        <a class="dropdown-item" href="javascript:void(0)">{{user.name}}</a>
        <a class="dropdown-item" href="javascript:void(0)">{{user.email}}</a>
        <a class="dropdown-item" (click)="signOut()" href="javascript:void(0)">Logout</a>
      </div>
    </li>
    </ul>
  </div>
	</div>
</nav>

Code: header.component.css

@import url('https://fonts.googleapis.com/css?family=Gothic+A1|Kaushan+Script|Libre+Baskerville|Lobster');
.body{
	font-family: 'Gothic A1', sans-serif;
	font-size:16px;
	}
	p{
	color:#6c6c6f;
	font-size:1em;
	}
    h1,h2,h3,h4,h5,h6{color:#323233;text-transform:uppercase;}
    .navbar-brand  span{
        color: #fed136;
        font-size:25px;font-weight:700;letter-spacing:0.1em;
        font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
    }
    
    .navbar-brand {
        color: #fff;
        font-size:25px;
        font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
        font-weight:700;
        letter-spacing:0.1em;
    }
    
    .navbar-nav .nav-item .nav-link{
        padding: 1.1em 1em!important;
        font-size: 120%;
        font-weight: 500;
        letter-spacing: 1px;
        color: #fff;
       font-family: 'Gothic A1', sans-serif;
    }
    .navbar-nav .nav-item .nav-link:hover{color:#fed136;}
    .nav-item.active{
       border-bottom: 4px solid #fed136;
    }
    .navbar-expand-md .navbar-nav .dropdown-menu{
        border-top:3px solid #fed136;
    }
    .dropdown-item:hover{background-color:#fed136;color:#000;}
    nav{-webkit-transition: padding-top .3s,padding-bottom .3s;
        -moz-transition: padding-top .3s,padding-bottom .3s;
        transition: padding-top .3s,padding-bottom .3s;
        border: none;
        }
        

        /* aside side nav */

        aside
        {
        height:600px;
        width:180px;
        float:left;
        position: fixed;
        padding-top: 83px;
        }
        
        ul
        {
        padding:0px;
        margin:0px;
        border-bottom:1px solid #1c1f21;
        }
        
       aside ul li
        {
        list-style-type:none;
        color:#fff;
        padding:10px;
        /* border-bottom:1px solid #272a2c; */
        border-top:1px solid #1c1f21;
        overflow: auto;
        cursor:pointer;
        }
        
       /* aside ul li:first-child{border-top:none;} */
        
        .fa
        {
        color:#fed136;
        display:block;
        }
        
      aside  ul li:hover .fa
        {
        color:#fed136;
        }
        
      aside  ul li:hover .linktitle
        {
        color: #f3d143;;
        }
        
      aside  ul li div
        {
        float:left;
        }
        
       aside .icons
        {
        padding:10px;
        }
        
       aside .linktitle
        {
        line-height: 35px;
        padding-left: 10px;
        }
        
        
        /* Reponsive menu code */
        @media all and (max-width: 600px) {
        aside
        {
        width:60px;
        padding:0px 10px;
        }
        
        ul li
        {
        overflow:hidden;
        padding:0px 10px;
        }
        
        .linktitle
        {
        position: absolute;
        z-index: -1;
        left: -50px;
        padding: 29px 15px;
        line-height:0px;
        background:#222527;
        }
        
        ul li:hover .linktitle
        {
        left:80px;
        }
        .icons
        {
        padding: 20px 10px;
        }
        
        ul li:hover .icons
        {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);
        }
        }
        /* aside side nav end */

Code: header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService, SocialUser } from 'angularx-social-login';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  public product = true;
  public offers = false;
  public cart = false;
  public user: SocialUser;
  public loggedIn: boolean;
  public status: any;
  constructor(
    private authService: AuthService,
    private route: Router) { }

  ngOnInit(): void {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
      if (this.loggedIn) {
        this.route.navigate(['/products']);
      } else {
        this.route.navigate(['/login']);
      }
    });
  }
// signout function for social login
  signOut(): void {
    this.authService.signOut();
  }

  navigate(page) {
    console.log(page);
    if (page === '/products') {
      this.product = true;
      this.offers = false;
      this.cart = false;
    } else if (page === '/offers') {
      this.product = false;
      this.offers = true;
      this.cart = false;

    } else if (page === '/cart') {
      this.product = false;
      this.offers = false;
      this.cart = true;
    } else {

    }
  }


}

Then run your code and get social Facebook and google plus login to your web application. I hope this will helpful to you. If any queries please comment below in the comment section. Have a good day!.