adding singin for totp in demoapp

Author: bhparijat

packages/auth/demo/public/index.html

@@ -755,6 +755,17 @@ <h4 class="modal-title">Select a second factor to sign in with</h4>
               </button>
               </div>
             </form>
+            <!-- For handling sign-in with TOTP 2nd factor. -->
+            <form class="form form-bordered no-submit hidden" id="multi-factor-totp">
+              <div class="form">
+                  <input type="text" id="multi-factor-totp-sign-in-verification-code"
+                         class="form-control" placeholder="Totp Verification code" />
+                  <button class="btn btn-block btn-primary"
+                          id="sign-in-with-totp-multi-factor">
+                    Complete sign In
+                  </button>
+              </div>
+            </form>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

packages/auth/demo/src/index.js

@@ -1068,6 +1068,7 @@ function handleMultiFactorSignIn(resolver) {
   );
   // Hide phone form (other second factor types could be supported).
   $('#multi-factor-phone').addClass('hidden');
+  $('#multi-factor-totp').addClass('hidden');
   // Show second factor recovery dialog.
   $('#multiFactorModal').modal();
 }
@@ -1134,6 +1135,7 @@ function onSelectMultiFactorHint(index) {
   // Hide all forms for handling each type of second factors.
   // Currently only phone is supported.
   $('#multi-factor-phone').addClass('hidden');
+  $('#multi-factor-totp').addClass('hidden');
   if (
     !multiFactorErrorResolver ||
     typeof multiFactorErrorResolver.hints[index] === 'undefined'
@@ -1153,7 +1155,16 @@ function onSelectMultiFactorHint(index) {
     // Clear all input.
     $('#multi-factor-sign-in-verification-id').val('');
     $('#multi-factor-sign-in-verification-code').val('');
-  } else {
+  } else if(multiFactorErrorResolver.hints[index].factorId === 'totp'){
+    // Save selected second factor.
+    selectedMultiFactorHint = multiFactorErrorResolver.hints[index];
+  
+    // Show sign-in with totp second factor menu.
+    $('#multi-factor-totp').removeClass('hidden');
+    // Clear all input.
+    $('#multi-factor-totp-sign-in-verification-code').val('');
+  } 
+  else {
     // 2nd factor not found or not supported by app.
     alertError('Selected 2nd factor is not supported!');
   }
@@ -1207,6 +1218,25 @@ function onFinalizeSignInWithPhoneMultiFactor(event) {
   }, onAuthError);
 }
 
+/**
+ * Completes sign-in with the 2nd factor totp assertion.
+ * @param {!jQuery.Event} event The jQuery event object.
+ */
+function onFinalizeSignInWithTotpMultiFactor(event){
+  event.preventDefault();
+  // Make sure a second factor is selected.
+  const otp =  $('#multi-factor-totp-sign-in-verification-code').val();
+  if (!otp || !selectedMultiFactorHint || !multiFactorErrorResolver) {
+    return;
+  }
+  
+  const assertion = TotpMultiFactorGenerator.assertionForSignIn(selectedMultiFactorHint.uid, otp)
+  multiFactorErrorResolver.resolveSignIn(assertion).then(userCredential => {
+    onAuthUserCredentialSuccess(userCredential);
+    $('#multiFactorModal').modal('hide');
+  }, onAuthError)
+}
+
 /**
  * Adds a new row to insert an OAuth custom parameter key/value pair.
  * @param {!jQuery.Event} _event The jQuery event object.
@@ -1336,7 +1366,6 @@ function signInWithPopupRedirect(provider) {
       customParameters[key] = value;
     }
   });
-  console.log('customParameters: ', customParameters);
   // For older jscore versions that do not support this.
   if (provider.setCustomParameters) {
     // Set custom parameters on current provider.
@@ -1985,6 +2014,14 @@ function initApp() {
   $('#sign-in-with-phone-multi-factor').click(
     onFinalizeSignInWithPhoneMultiFactor
   );
+
+
+  // Completes multi-factor sign-in with supplied SMS code.
+  $('#sign-in-with-totp-multi-factor').click(
+    onFinalizeSignInWithTotpMultiFactor
+  );
+
+
   // Starts multi-factor enrollment with phone number.
   $('#enroll-mfa-verify-phone-number').click(onStartEnrollWithPhoneMultiFactor);
   // Completes multi-factor enrollment with supplied SMS code.

packages/auth/src/api/authentication/mfa.ts

@@ -111,7 +111,7 @@ export interface FinalizePhoneMfaSignInRequest {
 
 export interface FinalizeTotpMfaSignInRequest {
   mfaPendingCredential: string;
-  verificationCode: string
+  totpVerificationInfo: {verificationCode: string}
   tenantId?: string;
   mfaEnrollmentId?: string
 }

packages/auth/src/mfa/assertions/totp.ts

@@ -164,9 +164,10 @@ export class TotpMultiFactorAssertionImpl
       auth,
       AuthErrorCode.ARGUMENT_ERROR
     );
+    const totpVerificationInfo = {'verificationCode': this.otp};
     return finalizeSignInTotpMfa(auth, {
       mfaPendingCredential,
-      verificationCode: this.otp,
+      totpVerificationInfo: totpVerificationInfo,
       mfaEnrollmentId: this.enrollmentId
     });
   }