Cannot read properties of undefined (reading 'signIn') @abacritt/angularx-social-login

[maziCodes]

The version of angular is 13. When using the angularx-social-login library I saw on the npm page that it has become obsolete and uses the new @abacritt library /angularx-social-login, on facebook it works correctly but on google it shows me this error.

Error:

core.mjs:6494 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'signIn')
TypeError: Cannot read properties of undefined (reading 'signIn')
    at abacritt-angularx-social-login.mjs:93:30
    at new ZoneAwarePromise (zone.js:1349:1)
    at GoogleLoginProvider.signIn (abacritt-angularx-social-login.mjs:90:16)
    at abacritt-angularx-social-login.mjs:275:26
    at new ZoneAwarePromise (zone.js:1349:1)
    at SocialAuthService.signIn (abacritt-angularx-social-login.mjs:267:16)
    at LoginPage.signInWithGoogle (login.page.ts:156:26)
    at LoginPage_Template_button_click_45_listener (template.html:84:67)
    at executeListenerWithErrorHandling (core.mjs:15031:1)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15069:1)
    at resolvePromise (zone.js:1262:1)
    at zone.js:1169:1
    at abacritt-angularx-social-login.mjs:283:25
    at push.23484._ZoneDelegate.invoke (zone.js:409:1)
    at Object.onInvoke (core.mjs:25608:1)
    at push.23484._ZoneDelegate.invoke (zone.js:408:1)
    at push.23484.Zone.run (zone.js:169:1)
    at zone.js:1326:1
    at push.23484._ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask `(core.mjs:25595:1)

Imports in app.module.js

import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import {
  GoogleLoginProvider,
  FacebookLoginProvider
} from '@abacritt/angularx-social-login';

Providers

imports: [
    ...
    SocialLoginModule,
    ...
  ],

  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: true,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'GOOGLE-ID'
            ),
          },
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider('FACEBOOK-ID'),
          }
        ],
      } as SocialAuthServiceConfig,
    },
  ],

Button in template

<button type=button class="google-auth" (click)="signInWithGoogle()">  Google </button>

TS

import { SocialAuthService, SocialUser } from "@abacritt/angularx-social-login";
import { FacebookLoginProvider, GoogleLoginProvider } from "@abacritt/angularx-social-login";

user: SocialUser;
GoogleLoginProvider = GoogleLoginProvider;

 constructor( public authService: SocialAuthService){}

 // function call auth Service with Google provider

 signInWithGoogle(): void {
        this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
    }

[XclaimR]

this.authService.signIn does not work in the newer versions of this package. You need to subscribe to the this.authService.authState to check whether your user is loggedIn or not. You can read about it more in the readme file

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.