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?