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

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

In this tutorial, we are going to learn how to add Google social login or sign in functionality to an Angular 11 application using the angularx-social-login library. This library provides a powerful set of features for connecting with third-party login providers like Google, Facebook, Twitter, and Microsoft Live and many more.

Prerequisites

• Node.js (version >= 10.x)
• NPM (version >= 6.x)
• Angular CLI (version >= 11.x)

Getting Started

First, create a new Angular 11 project using the following command:

ng new angular-social-login

Next, open the project in your favorite code editor and navigate to the root folder of the project.

Install angularx-social-login Library

Now, install the angularx-social-login library using the following command:

npm install angularx-social-login --save

Once the library is installed, you can import the SocialLoginModule to the app.module.ts file as shown below:

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
 
const config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
  }
]);
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SocialLoginModule],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function provideConfig() {
  return config;
}

Don’t forget to replace the Google-OAuth-Client-Id with your own Google OAuth Client ID.

Create Login Component

Now, we are ready to create the login component. Run the following command in the terminal to generate the component:

ng generate component login

Add Google Login Button

Next, open the login.component.html file and add the following HTML code in it:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button type="button" (click)="googleSignIn()" class="btn btn-primary">Google Login</button>
        </div>
    </div>
</div>

Handle Authentication Events

Next, open the login.component.ts file and add the following code in it:

import { Component, OnInit } from '@angular/core';
import { AuthService } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";
 
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    constructor(private authService: AuthService) { }
   
    ngOnInit(): void { }
   
    googleSignIn() {
        this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
    }
}

Now, you have successfully integrated Google Social Login or Sign In functionality in your Angular 11 application. You can visit the official documentation of the library to explore more advanced features.