Social login implemented for Google & Facebook

.gitignore

@@ -7,6 +7,7 @@
 
 # dependencies
 /node_modules
+/ts-lint
 package-lock.json
 
 # IDEs and editors

README.md

@@ -13,7 +13,9 @@ This is an Angular 7 BoilerPlate app that includes -
 
 ## Installatation Instructions
 
-Open base folder with the name angular-7-boiler-plate in command prompt or terminal and then run `npm i` to install all the dependencies.
+1. Open base folder with the name angular-7-boiler-plate in command prompt or terminal and then run `npm i` to install all the dependencies.
+2. Run this command to install third party module for social login.
+    `npm install angular-6-social-login --save`
 
 ## Run Development server
 

package.json

@@ -20,11 +20,14 @@
     "@angular/platform-browser": "~7.1.4",
     "@angular/platform-browser-dynamic": "~7.1.4",
     "@angular/router": "~7.1.4",
+    "angular-6-social-login": "^1.1.1",
+    "angular2-text-mask": "^9.0.0",
     "bootstrap": "^4.2.1",
     "core-js": "^2.5.4",
     "ngx-bootstrap": "^3.1.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
+    "twit": "^2.2.11",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

src/app/auth/auth-routing.module.ts

@@ -1,21 +1,42 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { SharedModule } from '../shared/shared.module';
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { SharedModule } from "../shared/shared.module";
+
+import { HomeComponent } from "./home/home.component";
+import { SignupComponent } from "./signup/signup.component";
+import { ForgotPasswordComponent } from "./forgot-password/forgot-password.component";
+import { SocialLoginComponent } from "./home/social-login/social-login.component";
+import { LoginComponent } from "./home/login/login.component";
+import { GoogleComponent } from "./home/social-login/google/google.component";
+import { AuthApiService } from "../core/services/auth-api.service";
+import {
+  AuthServiceConfig,
+  GoogleLoginProvider,
+  FacebookLoginProvider
+} from "angular-6-social-login";
+import { CLIENT_IDS } from "./auth.constants";
+import { FacebookComponent } from './home/social-login/facebook/facebook.component';
 
-import { LoginComponent } from './login/login.component';
-import { SignupComponent } from './signup/signup.component';
-import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
 
 const authRoutes: Routes = [
-  { path: 'login', component: LoginComponent },
-  { path: 'signup', component: SignupComponent },
-  { path: 'forgot', component: ForgotPasswordComponent },
-  { path: '', redirectTo: 'login', pathMatch: 'full' }
+  { path: "login", component: HomeComponent },
+  { path: "signup", component: SignupComponent },
+  { path: "forgot", component: ForgotPasswordComponent },
+  { path: "", redirectTo: "login", pathMatch: "full" }
 ];
 
 @NgModule({
   imports: [SharedModule, RouterModule.forChild(authRoutes)],
-  declarations: [LoginComponent, SignupComponent, ForgotPasswordComponent],
+  declarations: [
+    HomeComponent,
+    SignupComponent,
+    ForgotPasswordComponent,
+    SocialLoginComponent,
+    LoginComponent,
+    GoogleComponent,
+    FacebookComponent
+  ],
   exports: [RouterModule]
 })
+
 export class AuthRoutingModule {}

src/app/auth/auth.constants.ts

@@ -0,0 +1,11 @@
+export const CLIENT_IDS = {
+  GOOGLE_ID:
+    "459485045205-7ua7jrun7krsscfkookmor4leqjmi5s4.apps.googleusercontent.com",
+  FACEBOOK_ID: "365387637391875",
+  TWITTER_IDS: {
+    CONSUMER_KEY: "aOKQBaHL9CU1RBW2H9Vm8XlS3",
+    CONSUMER_SECRET: "w4Nt4VlyBotO3e01tdtqAoPRSuxmqlF8nRArydy7zyz1cay84s",
+    ACCESS_TOKEN: "1110843965660499969-uiw21f4gqHzyVZMi8uUXiMfFpm7tgb",
+    ACCESS_TOKEN_SECRET: "fSYIEIZjvvq7WCp7FVhoKROjIPhxYUNHwqCihC7NuPBHS"
+  }
+};

src/app/auth/auth.module.ts

@@ -1,8 +1,9 @@
-import { NgModule } from '@angular/core';
-import { AuthRoutingModule } from './auth-routing.module';
+import { NgModule } from "@angular/core";
+import { AuthRoutingModule } from "./auth-routing.module";
+
 
 @NgModule({
-  declarations: [],
-  imports: [AuthRoutingModule]
+  imports: [AuthRoutingModule],
 })
-export class AuthModule { }
+export class AuthModule {}
+

src/app/auth/forgot-password/forgot-password.component.ts

@@ -20,7 +20,6 @@ export class ForgotPasswordComponent implements OnInit {
   }
 
   public forgot(): void {
-    console.log(this.forgotForm.value);
     this.router.navigate(['auth/login']);
   }
 

src/app/auth/home/home.component.html

@@ -0,0 +1,5 @@
+<div class="container-login bg-light">
+  <app-login></app-login>
+  <div class="login-or"><h2>OR</h2></div>
+  <app-social-login></app-social-login>
+</div>

src/app/auth/home/home.component.scss

@@ -0,0 +1,12 @@
+.container-login {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  align-content: center;
+}
+
+.login-or {
+  display: flex;
+  align-items: center;
+}

src/app/auth/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/auth/login/login.component.html → src/app/auth/home/login/login.component.html

@@ -1,15 +1,26 @@
 <alert type="danger" *ngIf="showAlert">
-    Please enter a valid username/password and try submitting again.
+  Please enter a valid username/password and try submitting again.
 </alert>
-<div class="container-login bg-light">
+
+<div class="normal-login">
   <form [formGroup]="loginForm" (ngSubmit)="login()" class="login-form">
     <div class="form-group">
       <label for="username"><b>Username</b></label>
-      <input type="text" id="username" formControlName="username" class="form-control" />
+      <input
+        type="text"
+        id="username"
+        formControlName="username"
+        class="form-control"
+      />
     </div>
     <div class="form-group">
       <label for="password"><b>Password</b></label>
-      <input type="password" id="password" formControlName="password" class="form-control" />
+      <input
+        type="password"
+        id="password"
+        formControlName="password"
+        class="form-control"
+      />
     </div>
     <div class="forgot">
       <a tabindex (click)="goToForgot()">Forgot Password?</a>
@@ -19,6 +30,6 @@
     </div>
   </form>
   <div class="signup">
-      <a tabindex (click)="goToSignup()">Click here to Sign Up</a>
-    </div>
+    <a tabindex (click)="goToSignup()">Click here to Sign Up</a>
+  </div>
 </div>

src/app/auth/home/login/login.component.scss

@@ -0,0 +1,8 @@
+.normal-login {
+  height: 100vh;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  margin-right: 32px;
+}

src/app/auth/home/social-login/facebook/facebook.component.html

@@ -0,0 +1,5 @@
+<div class="social-btn-container">
+  <button class="btn btn-social btn-facebook" (click)="onSignIn()">
+    <img src="../../../../../assets/logos/facebook.svg" class="social-icon"/>
+  </button>
+</div>

src/app/auth/home/social-login/facebook/facebook.component.scss

@@ -0,0 +1,8 @@
+.social-btn-container{
+    margin: 8px 0;
+}
+
+.social-icon {
+    height: 32px;
+    width: 32px;
+}

src/app/auth/home/social-login/facebook/facebook.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from "@angular/core";
+import { AuthApiService } from "src/app/core/services/auth-api.service";
+import {
+  GoogleLoginProvider,
+  FacebookLoginProvider
+} from "angular-6-social-login";
+import { CLIENT_IDS } from "src/app/auth/auth.constants";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-facebook",
+  templateUrl: "./facebook.component.html",
+  styleUrls: ["./facebook.component.scss"]
+})
+export class FacebookComponent implements OnInit {
+  FB: any;
+  constructor(private authAPIService: AuthApiService, private router: Router) {}
+
+  ngOnInit() {
+    (window as any).fbAsyncInit = function() {
+      this.FB.init({
+        appId: CLIENT_IDS.FACEBOOK_ID,
+        cookie: true,
+        xfbml: true,
+        version: "v3.1"
+      });
+      this.FB.AppEvents.logPageView();
+    };
+
+    (function(d, s, id) {
+      let js,
+        fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) {
+        return;
+      }
+      js = d.createElement(s);
+      js.id = id;
+      js.src = "https://connect.facebook.net/en_US/sdk.js";
+      fjs.parentNode.insertBefore(js, fjs);
+    })(document, "script", "facebook-jssdk");
+  }
+
+  onSignIn() {
+    this.authAPIService
+      .socialLogin(FacebookLoginProvider.PROVIDER_ID)
+      .then(userData => {
+        if (userData) {
+          console.log("Data Received: ", userData);
+          localStorage.setItem("userName", userData["name"]);
+          this.router.navigate(["home"]);
+        }
+      });
+  }
+}

src/app/auth/home/social-login/google/google.component.html

@@ -0,0 +1,9 @@
+<div class="social-btn-container">
+  <button class="btn btn-social btn-google" (click)="onSignIn()">
+    <span>
+      <img
+        src="../../../../../assets/logos/google.svg"
+        class="social-icon"/></span
+    >
+  </button>
+</div>

src/app/auth/home/social-login/google/google.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GoogleComponent } from './google.component';
+
+describe('GoogleComponent', () => {
+  let component: GoogleComponent;
+  let fixture: ComponentFixture<GoogleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GoogleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GoogleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/home/social-login/google/google.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { GoogleLoginProvider } from "angular-6-social-login";
+
+import { AuthApiService } from "src/app/core/services/auth-api.service";
+
+@Component({
+  selector: "app-google",
+  templateUrl: "./google.component.html",
+  styleUrls: ["./google.component.scss"]
+})
+export class GoogleComponent implements OnInit {
+  constructor(private authAPIService: AuthApiService, private router: Router) {}
+
+  ngOnInit() {}
+
+  onSignIn(): void {
+    console.log(GoogleLoginProvider.PROVIDER_ID);
+
+    this.authAPIService
+      .socialLogin(GoogleLoginProvider.PROVIDER_ID)
+      .then((userData:any) => {
+        if (userData) {
+          console.log("Data Received: ", userData);
+          localStorage.setItem("userName", userData["name"]);
+          this.router.navigate(["home"]);
+        }
+      });
+  }
+}

src/app/auth/home/social-login/social-login.component.html

@@ -0,0 +1,5 @@
+<div class="social-login">
+  <app-google></app-google>
+  <app-facebook></app-facebook>
+  <!-- <app-twitter></app-twitter> -->
+</div>

src/app/auth/home/social-login/social-login.component.scss

@@ -0,0 +1,9 @@
+.social-login {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: 32px;
+}
+