How to fix getting a blank page when trying to use Facebook login?

First Published: 9 September 2017
Updated on: 24 September 2018

A blank page after login is a common problem when using Facebook as a sign-in method, especially when we’re in development mode.

It happens because you already logged in and authorized the app, so when it tries to log-in again, it goes blank.

What most people do is to manually go into their Facebook account and remove their app so they can try again, but is this the best use of your time? Doing it +10 times in a few hours when you’re in development mode?

The most straightforward way to fix this is first to check if the user has already logged in and authorized your app before calling the .login() function.

Luckily, Facebook provides a function to do it, where they handle (almost) everything for you.

NOTE: If you need to go through the Facebook authentication concepts make sure to check this post first.

The getLoginStatus() function

The getLoginStatus() functions determines 1) if a user is signed into Facebook and 2) if the user has already authorized your app.

There are three possible states for a user:

  • The user is logged into Facebook and has authorized your app, in this case, the function will return: connected.
  • The user is logged into Facebook but has not authenticated your application, in this case, the function will return: not_authorized.
  • The user is either not logged into Facebook or explicitly logged out of your application, in this case, we don’t know which one is it, that’s why it returns: unknown.

For example:

When we call getLoginStatus() we’ll get an object similar to this:

{
  authResponse: {
  userID: '12345678912345',
  accessToken: 'kgkh3h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn',
  session_Key: true,
  expiresIn: '5183738',
  sig: '...'
},
  status: 'connected'
}

There you can see there’s an authResponse object and a status object. We’ll focus on the status object first, checking for each of the three possible responses.

this.facebookProvider.getLoginStatus(response => {
  if (response.status === 'connected') {
    // User Authenticated and your App is authorized
  } else if (response.status === 'not_authorized') {
    // User authenticated but your app isn't authorized yet.
  } else {
    // the user isn't logged in to Facebook.
  }
});

Let’s break them down and see what we’ll need to do in each.

For the first one:

if (response.status === 'connected') {
  // User Authenticated and your App is authorized
}

We already know the user is authenticated and has already authorized your app. At this point, our best move is to use the access token to sign the user into our Firebase app.

if (response.status === 'connected') {
  const accessToken = response.authResponse.accessToken;
  const facebookCredential = firebase.auth.FacebookAuthProvider.credential(
    accessToken
  );

  firebase
    .auth()
    .signInWithCredential(facebookCredential)
    .then(success => {
      console.log('Firebase success: ' + JSON.stringify(success));
    })
    .catch(error => {
      console.log('Firebase failure: ' + JSON.stringify(error));
    });
}

In both other cases, the best move is to call the login function, it will display a Facebook native box asking our user to authorize our app:

this.facebookProvider
  .login(['email'])
  .then(response => {
    const accessToken = response.authResponse.accessToken;
    const facebookCredential = firebase.auth.FacebookAuthProvider.credential(
      accessToken
    );

    firebase
      .auth()
      .signInWithCredential(facebookCredential)
      .then(success => {
        console.log('Firebase success: ' + JSON.stringify(success));
      });
  })
  .catch(error => console.log(error));

Next Steps

If you have any questions don’t forget you can always leave a comment below.

If you want to take a deeper dive on Ionic + Firestore you should go through my FREE course: Build your first Firestore powered Ionic app.