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]

I am doing angular social login with google and facing bellow error on button click.

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()" (https://developers.google.com/identity/gsi/web/guides/display-button#javascript)
at resolvePromise (zone.js:1193:31)
at resolvePromise (zone.js:1147:17)
at zone.js:1260:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25990:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25990:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:26300:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)

[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 )

[DKGit2022]

That is incorrect Id.
Thanks

[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

[jayna456]

Is there any solution to resolve the issue?

[ted-mundy]

Is there any solution to resolve the issue?

I just ended up resorting to building my own google sign-in process

[gambheera]

I'm also getting the same error. I checked the ClientId twice and no issue with the clientId. But still I'm facing the same issue :(

[furevor]

Also have this error with the similar code from some guides like this

[klebermachado]

Why does the library force me to use Google's design pattern for the login button, even though it doesn't fit the layout of my app?

I want to apply my own style. Is it possible to implement this with the library?