Facebook login stopped working since upgrade to Ionic 3

Ionic Framework ionic-v3
1

I have been using Ionic 3.1.1 with the Cordova Facebook Plugin with AngularFire2 to log into Firebase. It has been working perfectly for months, and has now stopped working. (I am not sure if it is a result of an upgrade from Ionic 2 to Ionic 3.1.1)

Here is my code:

login.ts

loginFacebookCordova(): Promise<FirebaseAuthState> {
    return new Promise<FirebaseAuthState>((resolve) => {
        Facebook.login(['public_profile', 'email']).then(facebookData => {
            let cred: firebase.auth.AuthCredential = firebase.auth.FacebookAuthProvider.credential(facebookData.authResponse.accessToken);
            firebase.auth().signInWithCredential(cred).then((data: FirebaseAuthState) => {
                resolve(data);
            });
        }, error => {
            this.loading.dismiss();
            console.error('loginFacebook: ' + error);
            this.doAlert('loginFacebook: ' + error.message);
        });
    });
}

loginFacebookBrowser(): Promise<FirebaseAuthState> {
    return new Promise<FirebaseAuthState>((resolve) => {
        this.af.auth.login({ provider: AuthProviders.Facebook, method: AuthMethods.Popup }).then((data: FirebaseAuthState) => {
            resolve(data);
        }).catch((error) => {
            this.loading.dismiss();
            console.error('loginFacebook', error);
            this.doAlert('loginFacebook: ' + error.message);
        });
    });
}

config.xml

<plugin name="cordova-plugin-facebook4" spec="~1.7.4">
    <variable name="APP_ID" value="XXXXXXXXXXX" />
    <variable name="APP_NAME" value="theWhoZoo" />
</plugin>

1. Browser

If I try login with a browser (non Cordova), I get the following warning in the console:

auth.js:101 firebase.auth.AuthCredential.provider is deprecated.
Please use the providerId field instead.

I then get a verification email, which I verify as usual, and then attempt to log in. It fails with the following error message:

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Loading
chunk 4 failed. Error: Loading chunk 4 failed.

2. Android Devise

When I try login with an Android device (Cordova plugin), I get the following:

Invalid key has: The key has xXXXXXXXXXXX= does not match any stored
hashes. Configure your app key hashes at
https://developers.facebook.com/apps/XXXXXXXXXXX/

When I look at the basic settings at developers.facebook.com, my APP ID matches the variable APP_ID in my config.xml.

I have looked through documentation, and I cannot find what has changed or what may have affected this Facebook login. If anyone can assist I would greatly appreciate it.

I need help with both browser and Cordova login.

Thanks

2

Could please provide links to the plugins you are using? I am a bit confused about Facebook vs. Firebase.

3

Hi Sujan12,

I am using the following:

"angularfire2": "^2.0.0-beta.8",
"firebase": "^3.7.5",

Apologies, I should have mention AngularFire2.

4

The issue was in developers.facebook.com my Key Hash was incorrect. This fixed the issue for the Android login as well as the browser login (not sure why?).

developers.facebook.com -> Settings -> Basic - Android -> Key Hashes.

2 Likes