How do I listen to changes in Firebase custom claims?

Issue

I am creating an app in Ionic Vue with Firebase as my backend. I am using Firebase custom claims to assign user roles ('paid user' or 'free user') and I have set up a cloud function that assign the roles without any problems.

Now I want my app to be able to listen to changes in the custom claims, so that if a free user becomes a paid user, the app will know in realtime. Current I only get the updated custom claim if I reload the app by using onAuthStateChanged like this:

onAuthStateChanged(auth, () => {
  if (auth.currentUser) {
    auth.currentUser.getIdTokenResult(true).then((idTokenResult) => {
      console.log(idTokenResult);
      auth.currentUser.subscriber = idTokenResult.claims.subscriber;
    });
  }
// Run app
});

What would be the best approach to listen for changes when the user gets assigned a new role?

Solution

I want my app to be able to listen to changes in the custom claims

This is not possible with the Fireabse Authentication service. You should implement your own mechanism: For example, having a Firestore document per user and save the user's role in this document. This way you can set a realtime listener to the user's Firestore document and be alerted in your front end that the user's role has changed.

Note that this will only implement an alerting system. You'll still have to refresh the token with firebase.auth().currentUser.getIdTokenResult() (as shown in the doc) in order to reflect the new role in your front-end.

Answered By - Renaud Tarnec