Angular 13 Login with Google Or Gmail Account Tutorial

Today now in this post i will show you how to Login with Google Or Gmail Account in Angular 13? Now ib this post i will focused on the angular 13 google login example. We can see the angular 13 login with google example. So let’s discuss about login with Gmail account on angular 13. So in this example i will help you sign-in with Gmail in angular 13 application.

You have to follow the bellow step and need to make login with the google account in angular 13. So let’s follow the steps:

Step 1: Create Google App

Here we need to create the google app and the get client id and secret. So let’s go to the Google Console.

Now let’s see one by one screen shot show you in bellow:

Angular 13 Login with Google Or Gmail Account
Angular 13 Login with Google Or Gmail Account
Angular 13 Login with Google Or Gmail Account
Angular 13 Login with Google Or Gmail Account
Angular 13 Login with Google Or Gmail Account
Angular 13 Login with Google Or Gmail Account
Angular 13 Login with Google Or Gmail Account
Angular 13 Login with Google Or Gmail Account

Step 2: Create New App

Now in this step is not need; however, if you don’t have then need to created the angular application, then you may go ahead and then execute the below command:

ng new myNewApp
Step 3: app/app.component.ts
import { Component, OnInit, ViewChild, ElementRef  } from '@angular/core';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'loginGoogle';
    
  auth2: any;
    
  @ViewChild('loginRef', {static: true }) loginElement!: ElementRef;
     
  constructor() { }
    
  /*------------------------------------------
  --------------------------------------------
  About 
  --------------------------------------------
  --------------------------------------------*/
  ngOnInit() {
     
    this.googleAuthSDK();
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  callLoginButton() {
     
    this.auth2.attachClickHandler(this.loginElement.nativeElement, {},
      (googleAuthUser:any) => {
     
        let profile = googleAuthUser.getBasicProfile();
        console.log('Token || ' + googleAuthUser.getAuthResponse().id_token);
        console.log('ID: ' + profile.getId());
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());
            
       /* Write Your Code Here */
    
      }, (error:any) => {
        alert(JSON.stringify(error, undefined, 2));
      });
 
  }
  
  /**
   * Write code on Method
   *
   * @return response()
   */
  googleAuthSDK() {
     
    (<any>window)['googleSDKLoaded'] = () => {
      (<any>window)['gapi'].load('auth2', () => {
        this.auth2 = (<any>window)['gapi'].auth2.init({
          client_id: 'YOUR CLIENT ID HERE',
          cookiepolicy: 'single_host_origin',
          scope: 'profile email'
        });
        this.callLoginButton();
      });
    }
     
    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement('script'); 
      js.id = id;
      js.src = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
      fjs?.parentNode?.insertBefore(js, fjs);
    }(document, 'script', 'google-jssdk'));
   
  }
}
Step 4: app/app.component.html
<div class="container mt-5">
  <h1>Google Login with Angular - codingspoint.com</h1>
  <div class="row mt-5">
    <div class="col-md-4 mt-2 m-auto ">
        <button class="btn btn-danger" #loginRef>
            Login with Google
          </button>
    </div>    
  </div>
</div>
Run Angular App:

That’s good all required steps have been completed , now we need to type the given below command and then hit enter to run the Angular app:

ng serve

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →