sign-in flow for totp (#6626)

* Export TOTP symbols to be picked up by demo app.

* adding sign-in flow for totp

* using only verification code for sign-in

* added startSignInTotp method

* modified verification code usage in object signin

* added mfa enrollment id to finalize signin method:

* adding singin for totp in demoapp

* made enrollmentId to not be optional

* reverting changes in authapi.md

* removed unnecessary check and fixed spelling

* added back otp check

* made _finalizeEnroll && and _finalizeSignin to be async

Co-authored-by: Pavithra Ramesh <[email protected]>

Author: bhparijat

packages/auth/demo/public/index.html

@@ -759,6 +759,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

@@ -1103,6 +1103,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();
 }
@@ -1169,6 +1170,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'
@@ -1188,6 +1190,14 @@ function onSelectMultiFactorHint(index) {
     // Clear all input.
     $('#multi-factor-sign-in-verification-id').val('');
     $('#multi-factor-sign-in-verification-code').val('');
+  } 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!');
@@ -1242,6 +1252,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.
+  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.
@@ -1373,7 +1405,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.
@@ -2046,6 +2077,12 @@ function initApp() {
   $('#sign-in-with-phone-multi-factor').click(
     onFinalizeSignInWithPhoneMultiFactor
   );
+
+  // Completes multi-factor sign-in with supplied OTP(One-Time Password).
+  $('#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

@@ -51,13 +51,27 @@ export interface StartPhoneMfaSignInRequest {
   };
   tenantId?: string;
 }
+export interface StartTotpMfaSignInRequest {
+  mfaPendingCredential: string;
+  mfaEnrollmentId: string;
+  totpSignInInfo: {
+    verificationCode: string;
+  };
+  tenantId?: string;
+}
 
 export interface StartPhoneMfaSignInResponse {
   phoneResponseInfo: {
     sessionInfo: string;
   };
 }
 
+export interface StartTotpMfaSignInResponse {
+  totpSignInInfo: {
+    verificationCode: string;
+  };
+}
+
 export function startSignInPhoneMfa(
   auth: Auth,
   request: StartPhoneMfaSignInRequest
@@ -73,14 +87,38 @@ export function startSignInPhoneMfa(
   );
 }
 
+export function startSignInTotpMfa(
+  auth: Auth,
+  request: StartTotpMfaSignInRequest
+): Promise<StartTotpMfaSignInResponse> {
+  return _performApiRequest<
+    StartTotpMfaSignInRequest,
+    StartTotpMfaSignInResponse
+  >(
+    auth,
+    HttpMethod.POST,
+    Endpoint.START_MFA_SIGN_IN,
+    _addTidIfNecessary(auth, request)
+  );
+}
+
 export interface FinalizePhoneMfaSignInRequest {
   mfaPendingCredential: string;
   phoneVerificationInfo: SignInWithPhoneNumberRequest;
   tenantId?: string;
 }
 
+export interface FinalizeTotpMfaSignInRequest {
+  mfaPendingCredential: string;
+  totpVerificationInfo: { verificationCode: string };
+  tenantId?: string;
+  mfaEnrollmentId: string;
+}
+
 export interface FinalizePhoneMfaSignInResponse extends FinalizeMfaResponse {}
 
+export interface FinalizeTotpMfaSignInResponse extends FinalizeMfaResponse {}
+
 export function finalizeSignInPhoneMfa(
   auth: Auth,
   request: FinalizePhoneMfaSignInRequest
@@ -96,6 +134,21 @@ export function finalizeSignInPhoneMfa(
   );
 }
 
+export function finalizeSignInTotpMfa(
+  auth: Auth,
+  request: FinalizeTotpMfaSignInRequest
+): Promise<FinalizeTotpMfaSignInResponse> {
+  return _performApiRequest<
+    FinalizeTotpMfaSignInRequest,
+    FinalizeTotpMfaSignInResponse
+  >(
+    auth,
+    HttpMethod.POST,
+    Endpoint.FINALIZE_MFA_SIGN_IN,
+    _addTidIfNecessary(auth, request)
+  );
+}
+
 /**
  * @internal
  */

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

@@ -26,7 +26,10 @@ import {
   StartTotpMfaEnrollmentResponse,
   TotpVerificationInfo
 } from '../../api/account_management/mfa';
-import { FinalizeMfaResponse } from '../../api/authentication/mfa';
+import {
+  FinalizeMfaResponse,
+  finalizeSignInTotpMfa
+} from '../../api/authentication/mfa';
 import { MultiFactorAssertionImpl } from '../../mfa/mfa_assertion';
 import { MultiFactorSessionImpl } from '../mfa_session';
 import { AuthErrorCode } from '../../core/errors';
@@ -136,7 +139,7 @@ export class TotpMultiFactorAssertionImpl
   }
 
   /** @internal */
-  _finalizeEnroll(
+  async _finalizeEnroll(
     auth: AuthInternal,
     idToken: string,
     displayName?: string | null
@@ -154,11 +157,21 @@ export class TotpMultiFactorAssertionImpl
   }
 
   /** @internal */
-  _finalizeSignIn(
-    _auth: AuthInternal,
-    _mfaPendingCredential: string
+  async _finalizeSignIn(
+    auth: AuthInternal,
+    mfaPendingCredential: string
   ): Promise<FinalizeMfaResponse> {
-    throw new Error('method not implemented');
+    _assert(
+      this.enrollmentId !== undefined && this.otp !== undefined,
+      auth,
+      AuthErrorCode.ARGUMENT_ERROR
+    );
+    const totpVerificationInfo = { verificationCode: this.otp };
+    return finalizeSignInTotpMfa(auth, {
+      mfaPendingCredential,
+      mfaEnrollmentId: this.enrollmentId,
+      totpVerificationInfo
+    });
   }
 }