In this Angular 9 tutorial, you can learn how to implement Social Login (Google Authentication) in Angular.

Install GAUTH

npm install --save @types/gapi
npm install --save @types/gapi.auth2

tsconfig.json

"types": ["gapi", "gapi.auth2"],

appcomponent.html:

<div class="container mt-5">
  <h2>Google Login</h2>
  <div class="row mt-5">
    <div class="col-md-4 mt-2 m-auto ">
          <button class="login-Btn" #loginRef>
            Login with Google<img class="social-btn-icon" alt="Login with Google" src="https://hrcdn.net/fcore/assets/google-colored-20b8216731.svg">
          </button>
    </div>   
  </div>
 
</div>

.css

.social-btn-icon{
    height: 18px;
    margin-left: 17px;
    margin-bottom: -3px;
}

.login-Btn{
    margin-left: 44%;
    font-size: 15px;
    font-weight: bold;
    background-color: aliceblue;
    border: 2px solid black;
    height: 40px;
}

**app.component.ts **

import { ViewChild,ElementRef } from '@angular/core'


@ViewChild('loginRef', {static: true }) loginElement: ElementRef;

 ngOnInit() {
    this.googleInitialize();
  }

  googleInitialize() {
    window['googleSDKLoaded'] = () => {
      window['gapi'].load('auth2', () => {
        this.auth2 = window['gapi'].auth2.init({
          client_id: '631867203803-gfnbuj33563dmuorhmfm6cv2prqasulq.apps.googleusercontent.com',
          cookie_policy: 'single_host_origin',
          scope: 'profile email'
        });
        this.prepareLogin();
      });
    }
    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'google-jssdk'));
  }

  prepareLogin() {
    this.auth2.attachClickHandler(this.loginElement.nativeElement, {},
      (googleUser) => {
        let profile = googleUser.getBasicProfile();
        console.log('Token || ' + googleUser.getAuthResponse().id_token);
        this.show = true;
        this.Name =  profile.getName();
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());
      }, (error) => {
        alert(JSON.stringify(error, undefined, 2));
      });
  }

#angular #web-development #javascript