CODEWITHSUNDEEP
angulargoogle-signindeveloper-console
richa singh
richa singh

Reputation: 1

Cannot read properties of undefined (reading 'signIn')

I have a simple login with google functionality. Here is the code: dashboard.ts

import { Component, OnInit } from '@angular/core';
import { SocialUser, GoogleLoginProvider } from 'angularx-social-login';
import { SocialAuthService } from 'angularx-social-login';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
user: SocialUser | any
  constructor(
    private authservice : SocialAuthService
  ) { }

  ngOnInit(): void {
    this.authservice.authState.subscribe((user) =>{
      this.user=user;
    })
  }
  signInGoogle(){
    this.authservice.signIn(GoogleLoginProvider.PROVIDER_ID)
  }
 signOut(){
   this.authservice.signOut();
 }

}

dashboard.html

<div class="button" *ngIf="!user" (click)="signInGoogle()">log in</div>

here is my app.module.ts

  providers: [ {
    provide: 'SocialAuthServiceConfig',
    useValue: {
      autoLogin: false,
      providers: [
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider(
            'client Id'
          )
        }
      ],
      onError: (err) => {
        console.error(err);
      }
    } as SocialAuthServiceConfig,
  }],
  bootstrap: [AppComponent],
  entryComponents: [DialogExampleComponent]
})
export class AppModule { }

ng --version :13.2.7

I am unable to understand why is the login functionality not working

Upvotes: 0

Views: 3083

Answers (3)

jphantom
jphantom

Reputation: 11

I had the same problem and I solved changing the angularx-social-login way to the Sign In With Google way I found in https://developers.google.com/identity/gsi/web/guides/display-button , in your case (which was the same of mine) you just have to put the next code inside the ngOnInit in your dashboard.component.ts:

  google.accounts.id.initialize({
    client_id: 'your_client_id',
    callback: this.handleCredentialResponse
  });
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { theme: "outline", size: "large" }  // customization attributes
  );
  google.accounts.id.prompt(); // also display the One Tap dialog

It will show you an error with "google" so add a variable after the last import:

declare var google:any;

Inside your class DashboardComponent in dashboard.component.ts and outside your ngOnInit function, add this function:

 handleCredentialResponse(response:any) {
console.log("Encoded JWT ID token: " + response.credential);}

In your dashboard.component.html add this:

<div id="buttonDiv"></div>

And finally in your file index.html inside the body add this:

<script src="https://accounts.google.com/gsi/client" async defer></script>

Now if you run your app it should work, it should show you a new button to signin with google and it show work, this way worked for me.

If you are working in local don't forget to add http://localhost:4200 and http://localhost in your authorized JavaScript origins.

Upvotes: 1

jphantom
jphantom

Reputation: 11

I had the same problem and I solved changing the angularx-social-login way to the Sign In With Google way I found in https://developers.google.com/identity/gsi/web/guides/display-button , in your case (which was the same of mine) you just have to put the next code inside the ngOnInit in your dashboard.component.ts:

  google.accounts.id.initialize({
    client_id: 'your_client_id',
    callback: this.handleCredentialResponse
  });
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { theme: "outline", size: "large" }  // customization attributes
  );
  google.accounts.id.prompt(); // also display the One Tap dialog

Inside your class DashboardComponent in dashboard.component.ts and outside your ngOnInit function, add this function:

 handleCredentialResponse(response:any) {
console.log("Encoded JWT ID token: " + response.credential);}

In your dashboard.component.html add this:

<div id="buttonDiv"></div>

And finally inside your file index.html after the tag that starts the body () add this:

<script src="https://accounts.google.com/gsi/client" async defer></script>

Now if you run your app it should work, it should how you a new button to signin with google and it show work, this is the way it worked for me.

If you are working in local don't forget to add http://localhost:4200 and http://localhost in your authorized JavaScript origins.

Upvotes: 0

Aakash Garg
Aakash Garg

Reputation: 10979

Put SocialLoginModule in imports:-

import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
    
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'clientId'
            )
          },
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider('clientId')
          }
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [...]
})
export class AppModule { }

Upvotes: 0

Related Questions