Google Authentication in Angular 6

Question

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!

Answer 1

If the code you have posted for app.module.ts is literally what you are trying to run, please note that the constructor for GoogleLoginProvider() within getAuthServiceConfigs() {...new GoogleLoginProvider("Your-Google-Client-Id")...} is expecting you to populate it with your Google Client ID.

More specifically, please note that the client ID will look something like YOUR_CLIENT_ID.apps.googleusercontent.com where YOUR_CLIENT_ID will be a long list of digits and numbers given to you by the Google API console. This whole string YOUR_CLIENT_ID.apps.googleusercontent.com must be given to the GoogleLoginProvider() constructor.... again, with YOUR_CLIENT_ID replaced with your web site client ID from the Google API console.

If you need to obtain a client ID from Google, you can follow the following link and click the blue CONFIGURE A PROJECT button: https://developers.google.com/identity/sign-in/web/sign-in

I hope that helps. Best wishes.

Answer 2

The problem here is this

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

The injected socialAuthService of SigninComponent is not available on ngOnInit(). You can see more in Difference between Constructor and ngOnInit

Since I see a button on app.component.html. If you are trying to simulate a mouse click I would suggest using the appropriate Lifecycle Hooks

Also, delete FacebookLoginProvider and LinkedInLoginProvider in app.component.ts since there are no imports and no mention in app.module.ts