Ionic AngularFire Firebase Facebook Login - firebase

Question

I meat a problem with Ionic. I will explain that.
I use Ionic 2 and AngularFire 2 to use Firebase. So I can have access to my database and login with Facebook. I use a button to call this function:
this.af.auth.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup
}).then(function(response){
console.log('facebook login ', response);
});
Everything works great on the ionic lab. However, when I test my app in my device, the button does nothing, neither the Popup nor the Redirect work. So can you help me with that ?

Answer 1

You need to fix some things, I used Cordova for facebook login:
You didn't share your log error, but I think you will need to do this:
In you Facebook app:
Add a new Platform, Android or IOS (You didn't say what you are using).
Add a cordova plugin:
ionic plugin add cordova-plugin-facebook4 --save --variable APP_ID="999999999" --variable APP_NAME="myApplication"
Use your facebook app id and name.
Install ionic-native in your app:
npm install ionic-native --save
Add a Facebook import in your code:
import { Facebook } from 'ionic-native';
and change your method for using a Cordova login:
loginWithFacebook() {
return Observable.create(observer => {
if (this.platform.is('cordova')) {
Facebook.login(['public_profile', 'email']).then(facebookData => {
let provider = firebase.auth.FacebookAuthProvider.credential(facebookData.authResponse.accessToken);
console.log('facebook accessToken: '+facebookData.authResponse.accessToken);
firebase.auth().signInWithCredential(provider).then(firebaseData => {
console.log('facebook login ', firebaseData);
observer.next();
}).catch(function(error) {
// Handle Errors here.
console.log("error");
console.log(error);
// ...
});
}, error => {
observer.error(error);
});
} else {
this.af.auth.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup
}).then((response) => {
console.log('facebook login ', response);
observer.next();
}).catch((error) => {
console.info("login", error);
observer.error(error);
});
}
});
}
Note: If your app is in development only developers can login.

Answer 2

The code above can be made simpler for use inside an AuthProvider like the axample given here just by doing this:
signInWithFacebook(): firebase.Promise<any> {
if (this.platform.is('cordova')) {
return Facebook.login(['public_profile', 'email']).then(facebookData => {
let provider = firebase.auth.FacebookAuthProvider.credential(facebookData.authResponse.accessToken);
console.log('facebook accessToken: ' + facebookData.authResponse.accessToken);
return firebase.auth().signInWithCredential(provider);
});
} else {
return this.auth$.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup
});
}
}