Google Authentication in Angular 6

I have created a project in angular 6 which exhibits google authentication using angular-6-social-login. Following is the install command:

npm install --save angular-6-social-login


After this, i made the following changes to the app.module.ts file:

import {SocialLoginModule,AuthServiceConfig,GoogleLoginProvider} from "angular-6-social-login";


// Configs
export function getAuthServiceConfigs() {
let config = new AuthServiceConfig(
[
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("Your-Google-Client-Id")
}
];
);
return config;
}

@NgModule({
imports: [
...
SocialLoginModule
],
providers: [
...
{
provide: AuthServiceConfig,
useFactory: getAuthServiceConfigs
}
],
bootstrap: [...]
})


export class AppModule { }


And the following changes in app.component.ts:

import {Component, OnInit} from '@angular/core';
import {
AuthService,
GoogleLoginProvider
} from 'angular-6-social-login';

@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.css']
})


export class SigninComponent implements OnInit {

constructor( private socialAuthService: AuthService ) {}

public socialSignIn(socialPlatform : string) {
let socialPlatformProvider;
if(socialPlatform == "facebook"){
socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
}else if(socialPlatform == "google"){
socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
}else if (socialPlatform == "linkedin") {
socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
}

this.socialAuthService.signIn(socialPlatformProvider).then(
(userData) => {
console.log(socialPlatform+" sign in data : " , userData);
// Now sign-in with userData
// ...

}
);
}

}


Following is my app.component.html

<button (click)="socialSignIn('google')">Sign in with Google</button>


I started the application and it runs fine. Although i get the following error in the console:

Error that the console displays when i start the application. Basically when i run ng serve --open and open the console window of the application

The application runs fine, that is on click of the button, a google login screen pops up, asking me for my google credentials. I enter them and its authenticates.

I have 3 issues or rather doubts: 1) Why is that error appearing?

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'signIn'
of undefined
TypeError: Cannot read property 'signIn' of undefined
at angular-6-social-login.umd.js:250
at new ZoneAwarePromise (zone.js:891)
at GoogleLoginProvider.push../node_modules/angular-6-social-login/angular-6-
social-login.umd.js.GoogleLoginProvider.signIn (angular-6-social-
login.umd.js:249)


2) We have exported function getAuthServiceConfigs() and later declared it in the Providers array in app.module.ts. Whats the use of that?

3) I need to render the google login screen on start of the application i.e. without clicking on the button. How do i achieve that?

I tried calling the method in ngOnInit():

ngOnInit(){
this.socialSignIn('google');
}


but the screen appears blank

Please help me with this!

Continue reading...