Able to send otp to backend and get authState changed in demo app

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();
 }
@@ -1086,6 +1087,7 @@ function handleMultiFactorSignIn(resolver) {
 function showMultiFactors($listGroup, multiFactorInfo, onClick, onDelete) {
   // Append entry to list.
   $listGroup.empty();
+  console.log("showMultiFactors");
   $.each(multiFactorInfo, i => {
     // Append entry to list.
     const info = multiFactorInfo[i];
@@ -1133,7 +1135,9 @@ function showMultiFactors($listGroup, multiFactorInfo, onClick, onDelete) {
 function onSelectMultiFactorHint(index) {
   // Hide all forms for handling each type of second factors.
   // Currently only phone is supported.
+  console.log("onSelectMultiFactorHint called", multiFactorErrorResolver.hints[index].factorId);
   $('#multi-factor-phone').addClass('hidden');
+  $('#multi-factor-totp').addClass('hidden');
   if (
     !multiFactorErrorResolver ||
     typeof multiFactorErrorResolver.hints[index] === 'undefined'
@@ -1154,7 +1158,14 @@ function onSelectMultiFactorHint(index) {
     $('#multi-factor-sign-in-verification-id').val('');
     $('#multi-factor-sign-in-verification-code').val('');
   } else if(multiFactorErrorResolver.hints[index].factorId === 'totp'){
-    alertError('Working on 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('');
+    console.log("code",$('#multi-factor-totp-sign-in-verification-code').val());
   } 
   else {
     // 2nd factor not found or not supported by app.
@@ -1210,6 +1221,28 @@ 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.
+  console.log(selectedMultiFactorHint, multiFactorErrorResolver);
+  const otp =  $('#multi-factor-totp-sign-in-verification-code').val();
+  console.log("otp ",otp);
+  console.log($('#multiFactorModal :input'));
+  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.
@@ -1988,6 +2021,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
 }
@@ -140,6 +140,11 @@ export function finalizeSignInTotpMfa(
   auth: Auth,
   request: FinalizeTotpMfaSignInRequest
 ): Promise<FinalizeTotpMfaSignInResponse> {
+
+  console.log("finalizeSignInTotpMfa");
+  console.log(auth);
+  console.log(request);
+
   return _performApiRequest<
     FinalizeTotpMfaSignInRequest,
     FinalizeTotpMfaSignInResponse

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

@@ -158,15 +158,20 @@ export class TotpMultiFactorAssertionImpl
     auth: AuthInternal,
     mfaPendingCredential: string,
   ): Promise<FinalizeMfaResponse> {
+   
+    console.log("Secret: ", this.secret);
+    console.log("_finalizeSingnIn called with ", this.enrollmentId, " ", this.otp);
     _assert(
       typeof this.enrollmentId !== 'undefined'
       && typeof this.otp !== 'undefined',
       auth,
       AuthErrorCode.ARGUMENT_ERROR
     );
+    let totpVerificationInfo = {'verificationCode': this.otp};
+    
     return finalizeSignInTotpMfa(auth, {
       mfaPendingCredential,
-      verificationCode: this.otp,
+      totpVerificationInfo: totpVerificationInfo,
       mfaEnrollmentId: this.enrollmentId
     });
   }