Firebase Web SDK: refreshing auth token so that email_verified is updated in firestore rules

Question

Using Firebase Web SDK, I'm requiring users to verify their email before accessing Firestore documents. I have a Firestore rule that gates the document like this:

allow read: if request.auth != null && request.auth.token.email_verified;

I'd like the email verification to be reflected as soon as the user verifies his/her email without requiring the user to sign out and sign back in. Unfortunately onAuthStateChanged() doesn't fire when emailVerified changes, so I'm refreshing the client token by polling for changes to emailVerified. Something like this:

Note: My examples use the new beta Firebase Web SDK V9 (Modular Web SDK) in case the syntax is unfamiliar.

    window.setInterval(() => {
      reload(auth.currentUser).then(() => {
        if (!auth.currentUser?.emailVerified)
          return;

        // unsubscribe the previous onAuthStateChanged() listener
        unsubscribe();

        // resubscribe to auth changes
        unsubscribe = auth.onAuthStateChanged(user => {

          // Yay! user.emailVerified is now true
          console.log(user.emailVerified);

        });

      });
    }, 2000);

With the code above, I can get emailVerified to be reflected property inside my web app, but the problem arises when I try to make a request to Firestore:

const unsubscribe = onSnapshot(
  doc(db, 'widgets', 'widget1'),
  snap => {
    console.log(snap);
  },
);

That request results in a Firestore permission error. Once the user signs out and signs back in, the Firestore request is accepted.

How can I get the auth token that gets sent to Firestore to be updated with the latest email_verified without the user to sign out and and sign back in?

Answer 1

It turns out that a series of steps need to happen to refresh the token. After email verification, you need to reload the user AND explicitly get a new id token with getIdToken(user, true) after you reload the user. Only after those 2 steps will an updated token be sent to Firestore for queries. You also need to unsubscribe and re-subscribe to onAuthStateChanged manually, as that doesn't get triggered on token change. The modified version of my example is:

window.setInterval(() => {
  reload(auth.currentUser).then(() => {
    if (!auth.currentUser?.emailVerified)
      return;

    getIdToken(auth.currentUser, true).then(() => {

      // now the new token will be sent to Firestore, yay!

      // unsubscribe the previous onAuthStateChanged() listener
      unsubscribe();

      // resubscribe to auth changes
      unsubscribe = auth.onAuthStateChanged(user => {

        // Yay! user.emailVerified is now true
        console.log(user.emailVerified);

      });

    })
  });
}, 2000);

Please post your answer if there's an easier way. I especially don't like the polling part.