Error: Uncaught (in promise): Object: {"error":"popup_closed_by_user"}

Question

I am trying to use Google login with the ionic app using angular 11. but I am keep receiving the error Error: Uncaught (in promise): Object: {"error":"popup_closed_by_user"}

Also in the warnings, I am receiving "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the Migration Guide for more information."

I am also using angularx-social-login plugin.

let me know if anything else is required. need help.

Answer 1

I also have encountered this issue and was using '@abacritt/angularx-social-login' for social media login. This issue happens for all the newly created Google Client IDs. This can be resolved by adding 'plugin_name' in the provider if you are using Angular application.

In app.module.ts, create an object which holds the 'plugin_name'.

const googleLoginOptions = {
  scope: 'profile email',
  plugin_name:'login' //you can use any name here
}; 

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

This solution worked for me. Hope this helps.