Facebook login ionic

Ionic Framework ionic-v3
21

@nylex
i had the same problem, this worked for me:

   if(this.platform.is('core')){
        // for dev in web browser
        // this is firebase, but whatever you want can go here
    } else {
        // use facebook connect
   }
22

ionic cordova run browser
(v3)

ionic run browser
(v2)

23

this is exactly what i needed! thanks so much!

1 Like
24

Hey, Iā€™m having issues navigating to the home page after logging in.
facebookLogin() {
this.facebook.login([ā€˜emailā€™, ā€˜public_profileā€™]).then(res=>{
const fc=firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
firebase.auth().signInWithCredential(fc).then((success)=>{
this.userProfile = success;
this.firebaseLogin.setUpUser(fc, success);
})
}).catch(err=>{
alert(JSON.stringify(err))
})
}

goToOtherPage() {
//push another page onto the history stack
//causing the nav controller to animate the new page in
this.navCtrl.push(HomePage);

}

Iā€™ve tried this.navCtrl.setroot also.

Iā€™ve also tried putting this.navCtrl.push(HomePage); inside facebookLogin() and that doesnā€™t work either. Any suggestions?

25

When are you calling goToOtherPage() and which issues are you having?

26

Hey, so I was able to resolve the issue with the following:
firebase.auth().signInWithCredential(credentials).then((success)=>{
this.userProfile = success;
this.firebaseLogin.setUpUser(credentials, success);
this.navCtrl.setRoot(HomePage);
})

And I added the following to AppComponent.ts:
initializeApp() {
this.platform.ready().then(() => {
firebase.auth().onAuthStateChanged((user) =>{
if(user){
this.nav.setRoot(HomePage);
}else{
this.nav.setRoot(LoginPage);
}
});

Now Iā€™m trying to resolve an issue when during navigation the login page flashes for a split second before the homepage opens.

Say for example you login with facebook then the splash screen appears. But right before the home page opens the login page flashes again.

27

How did you solve it? Iā€™m having this exact issue using Ionic 4 and testing on an Android 8.0 device. I followed @dayanajabif tutorial found in https://ionicthemes.com/tutorials/about/ionic-facebook-login . Route navigation is not working for some reason, it does work on other types of authentication I have on the app. Code example here:

private async nativeFacebookLogin() {
    // the permissions your facebook app needs from the user
    const permissions = ['public_profile', 'email'];

    await this.facebook.login(permissions).then(response => {
        const userId = response.authResponse.userID;
        console.log('facebook response:', response);
        this.uid = userId;
        // Getting name and gender properties
        this.facebook.api('/me?fields=name,email', permissions)
        .then(user => {
        user.picture = 'https://graph.facebook.com/' + userId + '/picture?type=large';
        const email = user.email;
        this.dataService.getUser(this.uid).subscribe((data) => {
          console.log('user is:', data.data());
          if (data.data() !== undefined) {
            this.user = data.data();
            this.deviceStorage.set('user', JSON.stringify(data.data()));
            this.deviceStorage.set('uid', this.uid);
            this.dataService.userNewListener(this.uid);
            if (data.data().isNew) {
              this.zone.run(() => {
                this.router.navigate(['/profile']);
              });
              this.toastService.showToast('Please set up your profile first.');
            } else {
              this.zone.run(() => {
                this.router.navigate(['/home']);
              });
              this.toastService.showToast('User has signed in successfully.');
            }
          } else {
            this.dataService.addUser(this.uid, {email, uid: this.uid, isNew: true, isFb: true}).then(() => {
              const obj =  {email, uid: this.uid, isNew: true, isFb: true};
              this.deviceStorage.set('uid', this.uid);
              this.deviceStorage.set('user', JSON.stringify(obj));
              this.toastService.showToast('Please set up your profile first.');
              this.zone.run(() => {
                this.router.navigate(['/profile']);
              });
            }).catch((err) => { console.log('facebookNerror 3 :' + err); });
          }
        });
        }).catch((err) => { console.log('facebookNerror 2 :' + err); });
      }, error => {
      console.log(error);
    }).catch((err) => { 
      console.log('facebookNerror 1 :' + err);
      this.toastService.showToast('Native facebook error:');
      this.toastService.showToast('Native facebook error:' + err);
    });
}