Angular16 : ERROR Error: Uncaught (in promise): You should not call this method directly for Google, use "<asl-google-signin-button>" wrapper or generate the button yourself with "google.accounts.id.renderButton()

[DKGit2022]

Angular16 : ERROR Error: Uncaught (in promise): You should not call this method directly for Google, use "" wrapper or generate the button yourself with "google.accounts.id.renderButton()

from angularx-social-login.

[DKGit2022]

That is incorrect Id.
Thanks

[DKGit2022]

Any one can help me

[DKGit2022]

Here is my code

app.component.ts

import { Component,OnInit } from '@angular/core';
import { AuthServiceService } from './appServices/auth-service.service';
import { GoogleLoginProvider, SocialAuthService } from '@abacritt/angularx-social-login';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'GoogleLoginApp';

constructor(private authServiceService: AuthServiceService, private socialAuthService: SocialAuthService) { }

ngOnInit(): void {

}

onGoogleSignIn() {
this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID).then((res)=>{
alert('Sucess');
console.log(res);
});
}
}

app.Component.html
<button (click)="onGoogleSignIn()">Sign In Google

app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import {
GoogleLoginProvider,
FacebookLoginProvider
} from '@abacritt/angularx-social-login';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SocialLoginModule,
HttpClientModule
],
providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
'917274778655555-ledobcbb0b0ncpiqlb3ir.apps.googleusercontent.com'
)
}
],
onError: (err) => {
console.error(err);
}
} as SocialAuthServiceConfig,
}
],
bootstrap: [AppComponent]
})
export class AppModule { }

[ted-mundy]

I'm also getting this error

[ted-mundy]

(also if that is your google client ID, edit/delete that post @DKGit2022 )

[konlanz]

so do this npm install --save @types/google.accounts

Take out the method you wrote for the GoogleSignIn

this should be your

app.Component.html

and your

app.component.ts

import { Component,OnInit } from '@angular/core';
import { AuthServiceService } from './appServices/auth-service.service';
import { GoogleLoginProvider, SocialAuthService, SocialUser } from '@abacritt/angularx-social-login';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'GoogleLoginApp';
user: SocialUser | undefined;

constructor(private authServiceService: AuthServiceService, private socialAuthService: SocialAuthService) { }

ngOnInit(): void {
this.socialAuthService.authState.subscribe((user) => {
this.user = user;
});

}

}

this should resolve this issue