angularx-social-login Facebook return "Error: init not called with valid version"

Question

I have integrated angularx-social-login to my app in order to login with Facebook. (Angular 11.2.5) That worked fine until this morning. I didn't made any changes but I started receiving this error in the console :

ERROR Error: Uncaught (in promise): Error: init not called with valid version
at resolvePromise (zone-evergreen.js:1209:1)
at zone-evergreen.js:1116:1
at angularx-social-login.js:81:1
at ZoneDelegate.invoke (zone-evergreen.js:368:1)
at Object.onInvoke (core.js:28513:1)
at ZoneDelegate.invoke (zone-evergreen.js:367:1)
at Zone.run (zone-evergreen.js:130:1)
at zone-evergreen.js:1272:1
at ZoneDelegate.invokeTask (zone-evergreen.js:402:1)
at Object.onInvokeTask (core.js:28500:1)

After checking on the web, I found that I had to change the version of the facebook api that is called. In my Angular component, I've tried to change :

this.SocialAuthService.signIn(FacebookLoginProvider.PROVIDER_ID);

to :

const fbLoginOptions = {
        scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',
        locale: 'fr_FR',
        return_scopes: true,
        enable_profile_selector: true,
        fields: 'name,email,picture,first_name,last_name,accounts',
        version: 'v13.0',
    };
this.SocialAuthService.signIn(FacebookLoginProvider.PROVIDER_ID, fbLoginOptions);

Without success.

I've tried to include it directly in the app.module.ts

{
        provide: 'SocialAuthServiceConfig',
        useValue: {
            autoLogin: false,
            scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',
            providers: [
                {
                    id: FacebookLoginProvider.PROVIDER_ID,
                    provider: new FacebookLoginProvider('XXXXXXXXXXX'),
                }
            ],
            locale: 'fr_FR',
            return_scopes: true,
            enable_profile_selector: true,
            fields: 'name,email,picture,first_name,last_name,accounts',
            version: 'v13.0',

            onError: (err) => {
                console.error(err);
            }
        } as SocialAuthServiceConfig,
    }

Nothing...

After checking the file vendor-es2015.js I found these informations (that I think override mine) :

class FacebookLoginProvider extends BaseLoginProvider {
constructor(clientId, initOptions = {
    scope: 'email,public_profile',
    locale: 'en_US',
    fields: 'name,email,picture,first_name,last_name',
    version: 'v4.0',
}) .....

Problem, this file is generated when launching npm build watch, so no way of editing it directly.

I also tried to manually add

<div id="fb-root"></div>

Still nothing..

I also tried to directly edit the file facebook-login-provider.d.ts :

import { BaseLoginProvider } from '../entities/base-login-provider';
import { SocialUser } from '../entities/social-user';
export declare class FacebookLoginProvider extends 
BaseLoginProvider {
private clientId;
private initOptions: {
    scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',
    version: 'v14.0',
};
static readonly PROVIDER_ID: string;
constructor(clientId: string, initOptions?: any);
initialize(): Promise<void>;
getLoginStatus(): Promise<SocialUser>;
signIn(signInOptions?: any): Promise<SocialUser>;
signOut(): Promise<void>;

}

That doesn't work too.

Does anyone knows how to fix this issue ?

Thanks.

PS: I am conscient that there is other posts related to this issue but nothing fixed it.

Answer 1

You're probably not the only one with this problem. most likely facebook-sdk has changed in some way, which interferes with the normal work of the "angularx-social-login" library, analyzed the source code of the library a bit (FacebookLoginProvider). I noticed that the init method in FacebookLoginProvider is called only after the dynamic addition of the facebook-sdk script, through the loadScript method of the parent class BaseLoginProvider this does not cause any errors, but when you try to call the signIn method, an error of the wrong version is generated (init not called with valid version) most likely the problem is in the wrong loading facebook-sdk. Most likely this will be fixed soon, but if authorization is critical for your site, I suggest you add facebook sdk loading to index.html (like temporary solution)

  <!-- Load the JS SDK asynchronously -->
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>