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:
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.
Lets break them down and see what well need to do in each.
For the first one:
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.
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: