Google Authentication In Angular

Introduction:

Angular Google social login tutorial, In this extensive tutorial, you will discover how to create Google social login in an angular application using the angularx-social-login package.

For Angular, a social login/sign in and authentication module is provided via the angularx-social-login package.

It supports flawlessly Facebook, Amazon, VK, and other forms of authentication in addition to Google login.

You need a client id and secret in order to integrate Google Sign-In or Login into Angular. Only after creating a Google project or app inside the Google developer interface are you able to obtain a client ID and secret.

To obtain the OAuth key and enable the login feature for your app, we will do a few basic but required actions in your Google account. For this, you can either sign up for a new Google account or utilise your existing one.

Let’s start…

Step 1: Add new Angular Project

Commence the first step by installing the new angular project with following command:

ng new googleAuthentication

Step 2: Install Bootstrap

You need bootstrap to create the Google Login Auth template, so install it right away with the command below:

npm i bootstrap

Step 3: Get Google Client ID and Secret

How to obtain the Google client id and secret is thoroughly explained in this step. Next, go to the Google developer console and take the following actions, if appropriate:

1)Sign in at the Google Development Console by going there. You should start a new project on the dashboard by entering the name of the application and a few other parameters.

2) create a new creential & select OAuth Client ID

then choose web application option from Application Type.

3) You must also define the site or privacy policy url on the next screen:

When the OAuth client popup finally appears on the screen, you may copy your client ID or client secret from there.

Step 4: Install Angular Social Login Package

The angularx-social-login package must now be installed generally using the NPM command. The most fundamental plugin for creating Google Social Sign-In in Angular Applications is this one.

npm install angularx-social-login

Step 5: Register Social Login Modules in App Module

Import the ReactiveFormsModule, SocialLoginModule, SocialAuthServiceConfig, and GoogleLoginProvider modules from the app.module.ts file.

Also, inject these modules in imports as well as inside the providers’ array.

app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import {
  SocialLoginModule,
  SocialAuthServiceConfig,
} from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SocialLoginModule,
    ReactiveFormsModule
  ],
  providers: [ {
    provide: 'SocialAuthServiceConfig',
    useValue: {
      autoLogin: false,
      providers: [
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider('Your Goolge Client ID'),
        },
      ],
    } as SocialAuthServiceConfig,
  },],
  bootstrap: [AppComponent]
})
export class AppModule { }

Although you may also import the other social networks when creating social login in angular, we imported GoogleLoginProvider from the ‘angularx-social-login’ package.

Step 6: Integrate Google Social Login in Angular

Hence, app.component.html template file and add the following code.

<div class="container" style="max-width: 550px">
  <h2 class="text-center mb-5">Angular Login with Google</h2>
  <div *ngIf="isLoggedin === false">
    <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>
</div>

Open and update the app.component.ts template.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'google';
  loginForm!: FormGroup;
  socialUser!: SocialUser;
  isLoggedin? = false;
  constructor(
    private formBuilder: FormBuilder,
    private socialAuthService: SocialAuthService
  ) {}
  ngOnInit() {
    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);
  }
  logOut(): void {
    this.socialAuthService.signOut();
  }
}

Now run the project.

Conclusion:

Eventually, the angular login with Google tutorial is over; in this tutorial, we extensively explained how to sign in with google in angular using the Google client id.