Firebase authWithOAuthRedirect() woes

Question

I'm trying to update my angularjs app to support Firebase 1.1 (I was stick with Firebase 1.0.x).
It deprecates firebasesimplelogin, including authentication inside Firebase core.

I have been able to successfully implement authentication using

authWithOAuthPopup("<provider>", function(error, authData) { ... });

It accepts a callback, which is passed authentication data in authData.

On the contrary, I can't undersand how to use

authWithOAuthRedirect("<provider>", function(error) { ... });

Firebase Authentication docs page is very concise... :-(. This is all what is said:

Alternatively [instead of authWithOAuthPopup], you may prompt the user to login with a full browser redirect, and Firebase will automatically restore the session when you return to the originating page

How do I get authData, when Firebase - after redirection - returns to my page?

Answer 1

The authData is available by registering a listener directly on the ref (so before calling authWithOAuthRedirect).

ref.onAuth(function(authData) { 
    ... 
} 
ref.authWithOAuthRedirect("google", function(error) { ... });

See https://www.firebase.com/docs/web/guide/user-auth.html#section-monitoring-authentication

Answer 2

I think I'm running into the same issue as you. I'm trying to do Facebook authentication.

First, I'd like to clarify the reproduction steps for my issue.

1. My app is loaded on the client.
2. User clicks login with Facebook.
3. ref.authWithOAuthRedirect('facebook', ...) is called.
4. Client is redirected to Facebook and Facebook redirects client back to Firebase app
5. Despite successful authentication with Facebook, the callback passed to onAuth() is invoked (only once) with authData === null.

The callback passed to onAuth() is not invoked a second time with correct authData.

However, reloading the app causes the callback passed to onAuth to be invoked with correct authData. The reasons for this are not known to me but I suspect race condition.

Here's my workaround.

Before calling ref.authWithOAuthRedirect('facebook', ...) set yourself a flag in sessionStorage.

sessionStorage.reload = true;
ref.authWithOAuthRedirect('facebook', ...)

When the client is redirected to your app back from Facebook, you should be able to check for this flag and reload the page if necessary.

if (sessionStorage.reload) {
    delete sessionStorage.reload;
    setTimeout(function() {
        location.reload();
    }, 1000)
}

setTimeout(function() { ... }, 1000) helps fight the assumed race condition. I found 500 ms is insufficient time for the race condition to be resolved.

And one small gotcha: if you reload the page too soon, then authData remains null no matter how many times you reload the page.