How to detect `getRedirectResult()` state after `signInWithRedirect()`

Question

I'm using signInWithRedirect(provider), and getRedirectResult() to fetch the result after sign-in from provider (i.e. Google).

The problem I am facing is that, it seems getRedirectResult() took a long time (could take 3-5 sec) to resolve after redirection, and as a result, it's still showing the default view (i.e. sign-in form) after Google redirect, while waiting for the promise to resolve, which is not a great experience.

Is there a way to detect if the user is redirected from Google Sign-in, so that I can load up a spinner, while waiting for getRedirectResult() to resolve?

I have tried document.referrer with no luck.

Answer 1

getRedirectResult() should resolve quickly (fraction of a second) when there is no pending redirect. If there is a pending redirect, you should show some spinner before it resolves. BTW, you can also use onAuthStateChanged to detect the sign in state too regardless there is a pending redirect or not.

Here is a simple example of how to show a spinner. while the redirect operation is being processed.

// On load, show spinner.
showSpinner();
firebase.auth().getRedirectResult().then(result => {
  // If user just signed in or already signed in, hide spinner.
  if (result.user || firebase.auth().currentUser) {
    hideSpinner();
  } else {
    hideSpinner();
    showSignInForm();
  }
});

You can also track it yourself.

// Before starting sign in with redirect.
window.sessionStorage.setItem('pending', 1);
firebase.auth().signInWithRedirect(authProvider)...

// On return.
if (window.sessionStorage.getItem('pending')) {
  window.sessionStorage.removeItem('pending');
  showSpinner();
  firebase.auth().getRedirectResult().then(result => {
    hideSpinner();
  });
}