title: Google Authentication in Angular 6
body: <p>I have created a project in angular 6 which exhibits google authentication using <a href="https://www.npmjs.com/package/angular-6-social-login" rel="nofollow noreferrer">angular-6-social-login</a>. Following is the install command:</p>
  
  <pre><code>npm install --save angular-6-social-login
  </code></pre>
  
  <p>After this, i made the following changes to the <strong>app.module.ts</strong> file:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>And the following changes in <strong>app.component.ts</strong>: </p>
  
  <pre><code>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) =&gt; {
      console.log(socialPlatform+" sign in data : " , userData);
      // Now sign-in with userData
      // ...
  
       }
     );
   }
  
   }
  </code></pre>
  
  <p>Following is my <strong>app.component.html</strong></p>
  
  <pre><code>&lt;button (click)="socialSignIn('google')"&gt;Sign in with Google&lt;/button&gt; 
  </code></pre>
  
  <p>I started the application and it runs fine. Although i get the following error in the console: </p>
  
  <p><a href="https://i.stack.imgur.com/Cm4AL.png" rel="nofollow noreferrer">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</a></p>
  
  <p>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. </p>
  
  <p>I have 3 issues or rather doubts:
  1) Why is that error appearing? </p>
  
  <pre><code>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)
  </code></pre>
  
  <p>2) We have exported <strong>function getAuthServiceConfigs()</strong> and later declared it in the Providers array in <strong>app.module.ts</strong>. Whats the use of that?</p>
  
  <p>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?</p>
  
  <p>I tried calling the method in ngOnInit():</p>
  
  <pre><code>ngOnInit(){
      this.socialSignIn('google');
  }
  </code></pre>
  
  <p>but the screen appears blank</p>
  
  <p>Please help me with this!</p>