Firebase-js-sdk: FR: Determine if there is pending processing of locally persisted credentials

[dsl101]

My application handles startup roughly like this:

firebase.initializeApp(configObject)

firebase.auth().onAuthStateChanged(async user => {
  // 'await' the user token and process accordingly
}

if(haveLocalAuth()) {
  // Display a 'Loading...' type message
  // Set up a watcher on the stuff that will be configured inside onAuthStateChanged()
  // Redirect once that event has happened, either to the content, or to /login if authentication failed
} else {
  // Redirect immediately to /login
}

Note this code is spread across different modules, as this is a Vue / Vuex / VueRouter setup. But the flow above illustrates the key points.

The haveLocalauth() function _used_ to test window.localStorage for a key matching firebase:authUser and my application's API key. It was a really useful way to display a kind of 'in progress' message to the user, so that they aren't presented with the login screen again immediately after logging in and, say, refreshing the page—which is what would happen if auth().currentUser is used to test whether we're logged in or not.

Since the move to indexedDB, this code doesn't work, and I can't find any other way to know if the authentication code is in the progress of loading / dealing with locally-persisted credentials. This makes the user experience worse than it was before. Either they have to see the login screen until authentication is completed, or they are permanently stuck at the 'Loading...' screen when there are _no_ local credentials to be processed.

[puf]

Also posted on Stack Overflow: https://stackoverflow.com/questions/49492187/test-if-there-is-a-pending-firebase-authentication. Please indicate when you cross-post, so that others can check both links.

[bojeil-google]

Answered on stackoverflow. Closing in favor of continuing the discussion there.

[dsl101]

I still think this is a valid feature request, as the solution on SO can get out of sync with the firebase library, and there's still no easy way to detect that. Frank suggested posting feature requests here rather than as an issue. I've done that, but can't link to it. Copy below for anyone interested:

---

Assume an app begins the authentication process at /login, using the firebaseUI widget. On redirect back to the app (back to /login), the ui widget shows the moving 'progress' bar to give the user an indication that the authentication process is continuing. Eventually, assuming all is well, the onAuthStateChange() event will be fired, which the application can handle and redirect the user to content.

Now, when the app first starts up (first visit or page refresh), it will start up 'unauthenticated' in one of 2 states:

• The firebase authentication library detects persisted credentials, processes them successfully and authenticate the user, triggering an onAuthStateChange() event once completed.
• The firebase library does not detect any valid saved credentials and so does not attempt any authentication (no events are triggered in the app).

So, the app cannot determine the difference between no authentication in progress and authentication still in progress on startup. This means either:

• The user must be redirected to /login, even if they have just logged in, which may cause confusion especially if the app is slow to load or running on a slow network.
• The app must show a 'Loading...' place holder with an arbitrary timeout to allow sufficient time for the firebase authentication to either succeed (detectable via onAuthStateChange()), or fail (undetectable?). Arbitrary timeouts do not seem like a good design choice here.

In the past, when window.locatStorage was used for persistence, it was possible to detect if there were _any_ locally stored credentials, and from this infer if authentication was likely to be in progress. This is no longer possible since the switch to indexedDB.

It was suggested on the SO discussion this was bad practice anyway (which seems reasonable), and that maintaining an application 'flag' for whether the user has saved credentials would be better. But it would still allow the app and the firebase library to get out of sync where, for example, the firebase credentials were corrupted, cleared, etc. but the application flag was still set.

Therefore, my request is for some official mechanism via documented API to determine whether the firebase authentication system is attempting to process saved credentials (in which case, a 'Loading...' placeholder can be displayed to the user, and success or failure will be notified via onAuthStateChanged()), or whether no such processing is taking place, in which case the user can be correctly redirected to /login. Note ideally this should be a synchronous request (so the app can get the response as part of its start-up to determine first page view), and available early in the initialisation flow (e.g. immediately after firebase.initializeApp()).