Why is my Facebook showing black screen?

This post might be deprecated, I dont use Facebook products anymore so I wont be updating it

By the way, do you want to jump-start your development using the Firebase modular SDK with AngularFire?

Download my free book that will take you from creating an app to properly using Firebase Auth and Firestore.

Download the book now

A blank page after login is a common problem when using Facebook as a sign-in method, especially when were 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 youre 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.

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 dont know which one is it, thats why it returns: unknown.

For example:

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

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

There you can see theres an authResponse object and a status object. Well 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. } });

Lets break them down and see what well 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));