Firebaseui-web: Unable to tell when authentication is loading, onAuthStateChanged called indeterminate amount of times.

[cdharris]

I'm having quite a bit of trouble identifying whether firebase authentication is in the process of authenticating my users or not.

Is there a way to tell if there's a current user authentication check loading/in-process ? If not please accept this as a feature request.

My justification is this:

Since sometimes (mostly on first login), after my app has loaded and firebase auth initialised, there's several hundred ms delay until the user is returned, I'm trying to show a loading indicator on a user avatar until it's known whether there is a logged in user or not.

I have tried to use onAuthStateChanged to toggle loading status, but it seems to be called an indeterminate number of times. I have looked at the docs for android here docs/reference/android/com/google/firebase/auth/FirebaseAuth.AuthStateListener but it doesn't seem to fully tally with what I'm seeing here.

When I refresh my app, onAuthStateChanged is called once and the user object from is present or null, (seemingly without any network requests to google?).

When via redirect, my app is loaded right after logging in, onAuthStateChanged is called twice: once with null, and subsequently once more with the user object.

I'd like to be able to tell, even though onAuthStateChanged has returned a null user, that the auth is still in progress and I should expect it to be called again on completion.

Thanks!

[bojeil-google]

onAuthStateChanged will be called with null and then with the logged in user (when using redirect flow). This is on purpose so you know when to render FirebaseUI. This is unlikely to change.
Typically:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User logged in.
  } else {
   // Show UI to login. This can be either triggered on initial sign in or on return from redirect
   // to complete the pending redirect.
    ui.start('#firebaseui-auth-container', uiConfig);
  }
});

You have the ability to render FirebaseUI at any time, so you know when the user is about to login. onAuthStateChanged will always trigger when the user is logged in.

I don't understand what you exactly want to do. Can you provide snippets with what you are trying to do and how you are trying to sign in the user?

[cdharris]

Thanks for taking the time to reply, your code sample helped clarify to me that we only need to ui.start('#...', uConfig) in those two cases.

I had trouble working out how to discern in my SPA that it had been reloaded following a redirect and thus I was keeping the UI mounted all the time, but only displaying it when the user clicked to see the login modal. This had the effect that the UI was showing it's loading progress when coming back from a redirect, but the user couldn't see it because it wasn't displayed, thus I was trying to implement my own loading indicator.

With the help of your comment https://github.com/firebase/firebaseui-web/issues/209#issuecomment-326509293 I was made aware (may have been obvious to others) that the firebase redirect will redirect back to the exact same location including hash, so I've used that solution thanks - I'm now only starting and displaying the login UI via the URL hash #login, which works both initially and when redirected back.

Ultimately I was confused where the boundaries of the firebaseui-web and firebase auth were, further complicated by wanting to only enable sign-in buttons after the user had accepted TOC's, and how to continue auth after a redirect in a SPA.

Working now - Cheers for the reply!

[bojeil-google]

Sounds good. Glad it is working now!

[ashishkr1996]

hiii,
i am trying to redirect my page after login ,but my page is redirected when my user credential is wrong also
this is my code snippet

function getData()
{
var email=document.getElementById("uname");
var password=document.getElementById("password");
//alert(email+" "+password);
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.

          var errorCode = error.code;
          var errorMessage = error.message;
          // ...
        alert(errorCode+" "+errorMessage);
        });
}
firebase.auth().onAuthStateChanged(function(username){
    if(username!=null)
    {
        alert(username);
        window.location="login1.html";
    }
    else
    {
        alert("not sign in");
    }
});

function getData() is called after clicking on login button.

[bojeil-google]

Your question is not related to firebaseui-web or this thread. Please post your question on stackoverflow. If you are experiencing some bug, then you should post to firebase-js-sdk: https://github.com/firebase/firebase-js-sdk/