Why is javascript async function not awaiting for firebase.auth method to finish?

Question

I am trying to check if a user is logged in and return true or false based on that. But the function return before the firebase call is completed.

async function checkLogin() {
    var result;

    await firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          result = true;
          console.log("user is signed in");
        } else {
        result = false;
          console.log("user is not signed in");
        }
        });
        console.log("End of function");
        return result;
}

"End of function" gets printed out before any of the above two. The value in result is always undefined. It seems the function returns before the completion of firebase.auth(). Is there a way I can make it wait before returning.

If your end goal is checking if the user's login status, you can just use `firebase.auth().currentUser` — frunkad, Jun 11 '20 at 21:14
Does `onAuthStateChanged` actually return a promise? It seems odd to return a promise *and* take a callback. — jonrsharpe, Jun 11 '20 at 21:14
@frunkad doesn't work either. it never waits for await. Returns undefined — GunJack, Jun 11 '20 at 21:17
In that scenario, your checkLogin() function (better: it's functionality) should be called from within onAuthStateChanged — frunkad, Jun 11 '20 at 21:18
Wrap it in a promise you *can* await or move the code you want to run after it finishes *into the callback*. See https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — jonrsharpe, Jun 11 '20 at 21:20

score 3 · Accepted Answer · answered Jun 11 '20 at 21:17

onAuthStateChanged() does not return a promise, it returns an unsubscribe function. You use onAuthStateChanged() to add a listener/observer/subscriber that get invoked as the sign-in state changes over time. You can write code inside that callback to do what you want as the user become signed in or out. Promises won't help you here - design your code to use that callback instead.

score 2 · Answer 2 · answered Jun 11 '20 at 21:21

As Doug mentioned, onAuthStateChanged() does not return a promise but an event, you can rather change your logic to:

async function afterLoginTask() {
    var result;
    // perform UI or other changes
    return result;
}

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      console.log("user is signed in");
      afterLoginTask()
    } else {
      console.log("user is not signed in");
    }
});

Why is javascript async function not awaiting for firebase.auth method to finish?

2 Answers2