Ionic Facebook Authentication Redirection Problem

Question

I followed this tutorial step by step https://ionicthemes.com/tutorials/about/ionic-facebook-login

The issue I’m having is that after the login, my app is not redirecting to the page I need it to. No error on the console when testing this on an emulated Pixel 2 device running Android 9 . Here’s the code for handling the authentication:

const permissions = ['public_profile', 'email'];

await this.facebook.login(permissions).then(response => {
    this.uid = response.authResponse.userID;
    this.facebook.api('/me?fields=name,email', permissions)
    .then(user => {
    user.picture = 'https://graph.facebook.com/' + userId + 
    '/picture?type=large';
    this.dataService.getUser(this.uid).subscribe((data) => {
      if (data.data() !== undefined) {
        if (data.data().isNew) {
          this.zone.run(() => {
            this.router.navigate(['/profile']);
          });
        } else {
          this.zone.run(() => {
            this.router.navigate(['/home']);
          });
        }
      } else {
        this.dataService.addUser(....)}).then(() => {
          this.zone.run(() => {
            this.router.navigate(['/profile']);
        });
       }
     });
    });

I expect that after login success the app is redirected correctly using the router angular component.

Answer 1

Problem cause

I figured the problem was related to my Angular Fire Auth Observable:

this.afAuth.auth.onAuthStateChanged((user) => {
              console.log('user state:', user);
              if (user) {
                this.fireUser = user;
                this.deviceStorage.set('uid', user.uid);
                this.dataService.userNewListener(user.uid);
              } else {
                    this.deviceStorage.set('uid', '');
                    this.router.navigate(['/login']);
              }
});

Since I'm using a native solution (facebook cordova plugin) that observable doesn't change, since it was redirecting me back to login.

Solution

The solution was that after I successfully perform the login using the plugin, I could use the response access token as a credential to proceed and sign in with it using AngularFire:

this.facebook.login(permissions).then(response => {

    const facebookCredential = firebase.auth.FacebookAuthProvider.credential(response.authResponse.accessToken);
    this.afAuth.auth.signInWithCredential(facebookCredential).then(() => {
              console.log('navigating profile');
              this.router.navigate(['/profile']);
    });
});

Answer 2

I would start by unravelling the code.

Check the logs

You can use Chrome to see the output of whats happening and debug it:

Using Chrome DevTools - Android Development - Ionic Documentation

Put some logging in there

Put some console.logs in the code like:

  if (data.data() !== undefined) {
    if (data.data().isNew) {
      this.zone.run(() => {
        console.log("routing to profile");
        this.router.navigate(['/profile']);
      });
    } else {
      this.zone.run(() => {
        console.log("routing to home");
        this.router.navigate(['/home']);
      });
    }
  } else {
    this.dataService.addUser(....)}).then(() => {
      this.zone.run(() => {
        console.log("adduser - routing to profile");
        this.router.navigate(['/profile']);
    });
  }

Does the tutorial itself work?

Strip out your Firebase dataService calls and see if its getting to that point.

Do you need the zone?

I think this was something that was sprinkled into the code for the beta of Ionic4 but mostly it's been resolved. I don't fully understand what it is but maybe you are following an out of date Firebase tutorial.