Expose TOKEN_EXPIRED error upon mfa unenroll.

This can be thrown if the MFA option that was most recently enrolled into, was unenrolled.
The user will be logged out to prove the posession of the other second factor.
This error can be handled by reauthenticating the user.

This change also updates the demo app to store the lastUser in case mfa unenroll logs out the user.
From here, the lastUser can be reauthenticated.

Author: prameshj

packages/auth/demo/public/index.html

@@ -252,6 +252,10 @@
                         id="sign-in-with-email-and-password">
                   Sign In with Email and Password
                 </button>
+                <button class="btn btn-block btn-primary"
+                        id="reauth-with-email-and-password">
+                  Reauthenticate with Email and Password
+                </button>
               </form>
               <form class="form form-bordered no-submit">
                 <input type="text" id="user-custom-token" class="form-control"

packages/auth/demo/src/index.js

@@ -247,6 +247,7 @@ function showMultiFactorStatus(activeUser) {
         const label = info && (info.displayName || info.uid);
         if (label) {
           $('#enrolled-factors-drop-down').removeClass('open');
+          setLastUser(activeUser);
           mfaUser.unenroll(info).then(() => {
             refreshUserData();
             alertSuccess('Multi-factor successfully unenrolled.');
@@ -278,6 +279,10 @@ function onAuthError(error) {
     handleMultiFactorSignIn(getMultiFactorResolver(auth, error));
   } else {
     alertError('Error: ' + error.code);
+    if (error.code === 'auth/user-token-expired') {
+      console.log(lastUser);
+      alertError("Token expired, please reauthenticate.");
+    }
   }
 }
 
@@ -403,13 +408,37 @@ function onLinkWithEmailLink() {
  * Re-authenticate a user with email link credential.
  */
 function onReauthenticateWithEmailLink() {
+  if (!activeUser()) {
+    alertError('No user logged in. Select the "Last User" tab to reauth the previous user.');
+    return;
+  }
   const email = $('#link-with-email-link-email').val();
   const link = $('#link-with-email-link-link').val() || undefined;
   const credential = EmailAuthProvider.credentialWithLink(email, link);
+  // This will not set auth.currentUser to lastUser if the lastUser is reauthenticated.
   reauthenticateWithCredential(activeUser(), credential).then(result => {
     logAdditionalUserInfo(result);
     refreshUserData();
-    alertSuccess('User reauthenticated!');
+    alertSuccess('User reauthenticated with email link!');
+  }, onAuthError);
+}
+
+/**
+ * Re-authenticate a user with email and password.
+ */
+function onReauthenticateWithEmailAndPassword() {
+  if (!activeUser()) {
+    alertError('No user logged in. Select the "Last User" tab to reauth the previous user.');
+    return;
+  }
+  const email = $('#signin-email').val();
+  const password = $('#signin-password').val();
+  const credential = EmailAuthProvider.credential(email, password);
+  // This will not set auth.currentUser to lastUser if the lastUser is reauthenticated.
+  reauthenticateWithCredential(activeUser(), credential).then(result => {
+    logAdditionalUserInfo(result);
+    refreshUserData();
+    alertSuccess('User reauthenticated with email/password!');
   }, onAuthError);
 }
 
@@ -1264,7 +1293,7 @@ function signInWithPopupRedirect(provider) {
       break;
     case 'reauthenticate':
       if (!activeUser()) {
-        alertError('No user logged in.');
+        alertError('No user logged in. Select the "Last User" tab to reauth the previous user.');
         return;
       }
       inst = activeUser();
@@ -1860,6 +1889,7 @@ function initApp() {
   // Actions listeners.
   $('#sign-up-with-email-and-password').click(onSignUp);
   $('#sign-in-with-email-and-password').click(onSignInWithEmailAndPassword);
+  $('#reauth-with-email-and-password').click(onReauthenticateWithEmailAndPassword);
   $('.sign-in-with-custom-token').click(onSignInWithCustomToken);
   $('#sign-in-anonymously').click(onSignInAnonymously);
   $('#sign-in-with-generic-idp-credential').click(

packages/auth/src/core/strategies/credential.ts

@@ -96,7 +96,8 @@ export async function linkWithCredential(
  *
  * @remarks
  * Use before operations such as {@link updatePassword} that require tokens from recent sign-in
- * attempts. This method can be used to recover from a `CREDENTIAL_TOO_OLD_LOGIN_AGAIN` error.
+ * attempts. This method can be used to recover from a `CREDENTIAL_TOO_OLD_LOGIN_AGAIN` error
+ * or a `TOKEN_EXPIRED` error.
  *
  * @param user - The user.
  * @param credential - The auth credential.

packages/auth/src/mfa/mfa_user.ts

@@ -78,6 +78,7 @@ export class MultiFactorUserImpl implements MultiFactorUser {
     const mfaEnrollmentId =
       typeof infoOrUid === 'string' ? infoOrUid : infoOrUid.uid;
     const idToken = await this.user.getIdToken();
+    try {
     const idTokenResponse = await _logoutIfInvalidated(
       this.user,
       withdrawMfa(this.user.auth, {
@@ -94,14 +95,9 @@ export class MultiFactorUserImpl implements MultiFactorUser {
     // are now invalid), reloading the user will discover this and invalidate
     // the user's state accordingly.
     await this.user._updateTokensIfNecessary(idTokenResponse);
-    try {
-      await this.user.reload();
+    await this.user.reload();
     } catch (e) {
-      if (
-        (e as FirebaseError)?.code !== `auth/${AuthErrorCode.TOKEN_EXPIRED}`
-      ) {
         throw e;
-      }
     }
   }
 }