How To Implement Google Authentication In Angular

Hello Developers, In this blog we are going to learn how we can implement Google Authentication in Angular

First of all, we need to create a clientID and set up Google Cloud Console

Then click on Select project

Now click on New project:

Then choose the project name as per your choice

Now click on Credentials from the sidebar.

Then click on create Credentials Button and select the OAuth client ID option

After clicking on the OAuth client ID button click on Configure Consent screen button

Then you will be redirected to this screen:

Select external user type and click on create button

Now you will be redirected to this page

Then fill out all the required pieces of information like your app name, app logo, and a valid email address and click on save, and continue

Now again go to credentials click on create credentials and OAuth client ID then select web application in the application type

Then provide Authorized Javascript origins and Authorized redirect URL and click on Create button

Now a popup will open on your screen like below

We will use this client ID later

That’s it, now create a new app using the following command

ng new google-login

Then install the following package in your app

npm i @abacritt/angularx-social-login

Now add the below code in app.module.ts file

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {
  SocialLoginModule,
  SocialAuthServiceConfig,
  SocialAuthService
} from '@abacritt/angularx-social-login';
import { GoogleLoginProvider  } from '@abacritt/angularx-social-login';
import { AcceptJSService } from '@openutility/acceptjs-angular-wrapper';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    SocialLoginModule,
    HttpClientModule
  ],
  providers: [AcceptJSService,SocialAuthService,
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('1052122538452-8hou9gek5kjbdg1jjjr13u48kle822h9.apps.googleusercontent.com'),
          }
        ],
      } as SocialAuthServiceConfig,
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

the below code add-in app.component.html file

<div class="container" style="max-width: 550px">
    <h2 class="text-center mb-5">Angular Login with Google</h2>
    <div >
      <div>
        <button type="button" (click)="loginWithGoogle()" class="btn btn-danger">Login with Google</button>
      </div>
    </div>
    <div *ngIf="isLoggedin === true">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" class="form-control" [value]="socialUser.firstName" id="firstname" readonly>
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input type="text" class="form-control" [value]="socialUser.lastName" id="lastname" readonly>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" [value]="socialUser.email" id="email" readonly>
      </div>
      <button type="button" (click)="logOut()" class="btn btn-primary">Log Out</button>
    </div>
    <asl-google-signin-button data-shape="circle">login</asl-google-signin-button>
  </div>

And add this code in the app.component.ts file

import { GoogleLoginProvider, SocialAuthService } from '@abacritt/angularx-social-login';
import { Component } from '@angular/core';
import { SocialUser } from 'angularx-social-login';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loginForm!: FormGroup;
  socialUser!: SocialUser;
  isLoggedin?: boolean;
  constructor(
    private formBuilder: FormBuilder,
    public socialAuthService: SocialAuthService
  ) { }

  ngOnInit(): void {

    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
    });
    this.socialAuthService.authState.subscribe((user) => {
      this.socialUser = user;
      this.isLoggedin = user!= null;
      console.log(this.socialUser);
    });
  }
  loginWithGoogle():void {
    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID).then((res)=>{
      console.log(res)
    })
  }
  logOut():any {
    this.socialAuthService.signOut();
  }
}

Output:-