Unable to do sign in with google ERROR Object: {"error":"popup_closed_by_user"}

Question

I am using angular and trying to sign in with google using the library : My angular version is 13. I have followed this blog https://medium.com/@danilrabizo/google-authentication-in-the-angular-application-e86df69be58a

when i setup my own code i am facing below error:

It works perfect when i use the client id given in this blog. but when i use my own client id i am getting this error. Please help me on this.

Thank You !!!

Answer 1

Try adding plugin_name and scope in GoogleLoginProvider

solution - screenshot

Answer 2

I agree with the solution given by the coneh.

Actually, New Client IDs created before July 29th, 2022 can use the older Google Platform Library. By default, newly created Client IDs are now blocked from using the Platform Library and instead must use the newer Google Identity Services library. You may choose any value, a descriptive name such as product or plugin name is recommended for easy identification.

Example: plugin_name: 'login'.

Please Read my article Angular 14 Login with Google using OAuth 2.0 where I explained everything step by step.

googleAuthSDK() {

    (<any>window)['googleSDKLoaded'] = () => {
      (<any>window)['gapi'].load('auth2', () => {
        this.auth2 = (<any>window)['gapi'].auth2.init({
          client_id: 'YOUR CLIENT ID',
          plugin_name:'login',
          cookiepolicy: 'single_host_origin',
          scope: 'profile email'
        });
        this.callLogin();
      });
    }

Answer 3

I was facing this issue for my Angular application. I was using @abacritt/angularx-social-login package for Angular v14. Thanks for the solution given by Coneh, the issue is resolved now. This issue happens for all the newly created Client IDs. This can be overcome by adding 'plugin_name' in the provider for Angular.

In app.module.ts, i have created an object which holds the 'plugin_name'.

const googleLoginOptions = {
  scope: 'profile email',
  plugin_name:'sample_login' //this can be any string
}; 

And in providers, pass the 'googleLoginOptions' object along with the google client ID.

@NgModule({
 declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    NgbModule,
    AppRoutingModule,
    CommonModule,
    HttpClientModule,
    SocialLoginModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
        {
          provide: 'SocialAuthServiceConfig',
          useValue: {
            autoLogin: false,
            providers: [
              {
                id: GoogleLoginProvider.PROVIDER_ID,
                provider: new GoogleLoginProvider(
                  'YOUR GOOGLE CLIENT_ID', 
                   googleLoginOptions
                )
              }
            ],
            onError: (err) => {
              console.error(err);
            }
          } as SocialAuthServiceConfig,
        }
  ],
  bootstrap: [AppComponent]
})

Now, clear the browser cache and it should be working. For the changes in app.component.ts you may refer to @abacritt/angularx-social-login- documentation