Google Social Login/Signin in Angular 12

Angular 12 social login with google using angularx-social-login library example; In this tutorial, i am going to show you how to create google social login in angular 12 app.

Authentication is used by a server when the server needs to know exactly who is accessing their information or site. Authentication is used by a client when the client needs to know that the server is system it claims to be. In authentication, the user or computer has to prove its identity to the server or client.

Google Developers Console is a site that is used by the developers for managing and viewing traffic data, authentication, and billing information for Google APIs. To access the Google APIs our project must be registered on Google Developers Console, as follow;

Open the Google API Console. If you don’t have a Google account, select More options > Create account and then fill in the form to create an account.
From the projects list, select a project or create a project.
Open the API Library.
Search the API Library for the Google Play Custom App Publishing API.

Angular 12 Google Social Login Tutorial with Example

Step 1 – Create New Angular App
Step 2 – Install Social Login Library
Step 3 – Import Modules on App.Module.ts File
Step 4 – Add Code on View File
Step 5 – Add Code On App.Component ts File
Step 6 – Start the Angular Google Login App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Social Login Library

Install NPM package called angularx-social-login and bootstrap library for implement google social login in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

npm install --save angularx-social-login

After that, open angular.json file and update the following code into it:

"styles": [
        ...
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ...
         ],
"scripts": [
       ...
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ...
       ]

Recommended:-Google Maps in Angular 12

Step 3 – Import Modules on App.Module.ts File

Go to src/app directory and open app.module.ts file. And please add YOUR-GOOGLE-CLIENT-ID in following code. Then add the following lines of into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { SocialLoginModule, AuthServiceConfig } from 'angularx-social-login';
const config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("YOUR-GOOGLE-CLIENT-ID")
  }
]);
export function provideConfig() {
  return config;
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    SocialLoginModule
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Add Code on View File

Create google social login button in angular 11 app. So, visit src/app/app.component.html and update the following code into it:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Angular 12 Google Social Login - Laratutorials.com</title>
  </head><body class="bg-light">
  <div class="container">
    <div class="row py-5 justify-content-center">
      <div class="col-md-8">
        <h1 class="text-center py-4">Angular 11 Sign In with Google</h1>        
        <div *ngIf="loggedIn===false">
          <div>
            <button type="button" (click)="signInWithGoogle()" class="btn btn-primary">Sign In With Google</button>
          </div>
        </div>        
        <div *ngIf="loggedIn===true">
          <div class="form-group">
            <label for="firstname">First Name</label>
            <input type="text" class="form-control" id="firstname" [value]="user.firstName" readonly >
          </div>          <div class="form-group">
            <label for="lastname">Last Name</label>
            <input type="text" class="form-control" id="lastname" [value]="user.lastName" readonly >
          </div>          <div class="form-group">
            <label for="email2">Email</label>
            <input type="text" class="form-control" id="email2" [value]="user.email" readonly >
          </div>
        
          <button type="button" (click)="signOut()" class="btn btn-primary">Sign Out</button>         </div>
      </div>
    </div>
  </div>
</body>
</html>

Step 5 – Add Code On App.Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService,GoogleLoginProvider, SocialUser } from 'angularx-social-login';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  signinForm: FormGroup;
  user: SocialUser;
  loggedIn: boolean;  
  constructor(private fb: FormBuilder, private authService: AuthService) { }  
  ngOnInit() {
    this.signinForm = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
      console.log(this.user);
    });
  }  
  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
  signOut(): void {
    this.authService.signOut();
  }
}

Step 6 – Start the Angular Google Login App

Execute the following command on terminal to start angular google social login app:

ng serve