Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      AdviceWorks
      AdviceWorks
      Bridgestone
      Bridgestone
      NatWest Markets
      NatWest Markets
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      Academy Sports & Outdoors
      Academy Sports & Outdoors

      Case Studies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Laravel Mobile App Embedded & Hardware

      Industries

      Information Technology BFSI Education Marketing & Advertising Manufacturing Retail Logistics & Transportation
      Healthcare eCommerce Public Services Travel & Hospitality Cloud Telecommunications Real Estate
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      SAP Solutions

      SAP Consultation

      Innovate

      Robotic Process Automation Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combat Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

12+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Case Studies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
      Industries
      • Information Technology
      • BFSI
      • Education
      • Marketing & Advertising
      • Manufacturing
      • Retail
      • Logistics & Transportation
      • Healthcare
      • eCommerce
      • Public Services
      • Travel & Hospitality
      • Cloud
      • Telecommunications
      • Real Estate
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      SAP Solutions
      • SAP Consultation
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combat
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
Google social login

Angular 11 Google Social Login or Sign In Tutorial using angularx-social-login

Aishwary Rawat
Aishwary Rawat Angular Developer
Last Updated on March 23, 2023 | Written By: Archita Nayak, Riya Christi
May 13, 2021 6 min read

Table of Content

▣ Introduction

▣ Goal of Google Social Login tutorial

▣ Steps to Implement Google Social Login

▣ Steps to Integrate Google Social Login with Angular 11 Application using angularx-social-login

▣ Conclusion

Introduction

In this tutorial, we will learn how to implement the Google Social Login using the angular-social-login library available in Angular. You can implement this approach for Angular 9+. Older versions of Angular require a slight change in some of the code (particularly in the module.ts file).

With the help of Social login, you can access or sign in to the third-party app without creating a new login account and using your current Google/Twitter/Facebook accounts. Here we would only discuss Google Social Login.

You might like to visit the How to Integrate Google and Facebook Authenticate Using Angular 8 tutorial.

Goal of Google Social Login Tutorial

Before learning how to implement Google Social Login with Angular 11 Application. Let’s see this video to ensure the takeaway from this tutorial.

Steps to implement Google Social Login

Here we will build a demo application together and focus on implementing Google Social Login using the Angular 11 app with the help of a Google developer account and angularx-social-login plugin.

We need to have client id and secret from our project on Google Developer Console to implement Google Social Login in Angular 11. If you don’t have these or are unaware of the steps to get the follow these instructions:

Step 1: Open Google Developer console

First of all, head towards the Google Developer Console and use your Google credentials to log in there.

Step 2: Select a project.

In this step, we will select our project. It’s totally up to you whether you want to work with an existing project or start afresh and create a new project.

Select a project
Select a project.

Step 3: Click the CREATE button.

If you want to create a new project, the hit the Create button and enter the details asked.

Click the CREATE button to create a new project

Step 4: Now go to the OAuth consent screen

It’s time to move towards the OAuth consent screen; for that, click on External from the sidebar at the left. You will be able to see the OAuth consent screen if you have a google account. Hit on CREATE.

OAuth consent screen

Step 5: Application set-up

Here in this step, write your application’s name. The name you entered will be visible on the OAuth consent screen. Some of the additional fields like –

  • Application Homepage
  • Authorized domain link
  • Privacy policy link
  • Terms of Service link.

should be hosted on an Authorized domain.

After providing these fields, they will also be visible on the OAuth consent screen. Once done, hit the Save button.

Application set-up

Step 6: Create Credentials

Now further, click on the Create Credentials and choose OAuth client ID from the given options.

Create Credentials and choose OAuth client ID

Step 7: Create OAuth Client ID

The below form will appear. From the Application Type options, select Web application.

Define Name and Authorised Javascript Origins (Here, I am running my application on localhost:4200).
Lastly, click on the Create button.

Create OAuth Client ID

Step 8: Your Client Id and Your Client Secret

A modal pop-up containing Your Client Id and Your Client Secret appears. Save it for later use.

Your Client Id and Your Client Secret

Note: If you change your authorized JavaScript origin (say, to localhost:4100), don’t forget to add it to the Authorized JavaScript Origins list; otherwise, you will receive a runtime error.

runtime error

So now we have Client Id and Client Secret. It’s time to integrate Google Social Login with our Angular application.

Are you looking for skilled Angular developers to work on your project?
Prepare to have your struggle reduced! Hire Angularjs developer from Bacancy today and begin working on your dream product! We are here to help!

Steps to Integrate Google Social Login with Angular 11 Application using angularx-social-login

Follow these steps to integrate your application with Google Social Login.

Step 1 : Create a new Angular app

Create a new Angular application by executing the below command in your terminal-

ng new GoogleSocialLogin

Step 2 : Generate a new component

Use this command to generate a new component named Login-

ng g c login 

Step 3 : Install angularx-social-login and bootstrap.

Install the NPM package called angularx-social-login and bootstrap library for implementing the google social login in our angular app.

npm install --save angularx-social-login

Step 4 : Open the app.module.ts file.

Open app.module.ts file.

Import these modules from angularx-social-login

  • ReactiveFormsModule
  • SocialLoginModule
  • SocialAuthServiceConfig
  • GoogleLoginProvider

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

Add YOUR-GOOGLE-CLIENT-ID in the following code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { LoginComponent } from './GoogleSocialLogin/login.component';
import { SocialLoginModule,SocialAuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider } from "angularx-social-login";
import { environment } from 'src/environments/environment';
 
const CLIENT_ID = environment.client_Id;
@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [BrowserModule, FormsModule, SocialLoginModule],
  providers: [
    {
      provide: "SocialAuthServiceConfig",
      useValue: {
        autoLogin: true,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              CLIENT_ID
            )
          }
        ]
      } as SocialAuthServiceConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5 : Open login.component.html file and add the below code.

login component

Step 6 : the Open login.component.ts

Update the login.component.ts file with the below code for integrating Google Social Login into your angular app.

import { Component, OnInit } from '@angular/core';
import { SocialAuthService } from "angularx-social-login";
import { SocialUser } from "angularx-social-login";
import { GoogleLoginProvider } from "angularx-social-login";
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
   public user: SocialUser = new SocialUser;
   	constructor(private authService: SocialAuthService) {}
ngOnInit() {
      this.authService.authState.subscribe(user => {
      this.user = user;
      console.log(user);
    });
  }
  public signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }
  public signOut(): void {
    this.authService.signOut();
  }
}

Step 7 : Start the development server to test the application.

Run this command and test your application-

ng serve

You should see a screen with a google login button.

Conclusion

So, this was all about how to integrate Google Social Login with the Angular 11 application. I hope the purpose of this tutorial has been served the way you expected. If you wish to explore more about Angular, then visit AngularJS tutorials. Our team has specially designed the Angular tutorials for beginners and experienced developers. I believe you don’t want to miss such an opportunity!

Contact Bacancy Technology and hire Angular developer for satisfying your project requirements. Bacancy has versatile, enthusiastic, and dedicated Angular developers! Without any delay, connect with us!


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

Angularjs Development Tools
Reynal Dsouza

July 11, 2023

AngularJS

15 Best AngularJS Development Tools to Know in 2023

By : Reynal Dsouza

Quick Summary: The blog covers a well-curated list of top AngularJS Development Tools. Discover a handpicked selection that will empower your development process and elevate...

< 1 Minute Read
Read More
Dockerize Angular Apps
Ritwik Verma

June 14, 2023

AngularJS

Steps to Dockerize Angular Apps With Docker Containerization

By : Ritwik Verma

Quick Summary: As technological advancements take a step further to change our daily lives. Every business owner strives for faster, more efficient, and more effective...

< 1 Minute Read
Read More
OpenAI Image Creation API in Angular
Ritwik Verma

May 15, 2023

AngularJS

The Need for OpenAI Image Creation API in Angular Applications

By : Ritwik Verma

Quick Summary: AI or Artificial Intelligence is the new dawn of the evolution of human intellect with the potential to revolutionize the world. Whether it...

8 Minute Read
Read More

How Can We Help You?

india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solutions
  • Careers
  • Testimonials
  • Tutorials
  • QandA
  • Contact Us
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.8
    bacancy goodfirms review
    iso
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation