First pass at adding MFA support to auth-next (#3292)

* First pass at adding MFA support to auth-next

* Refactor IDP & reauth interfaces a bit to play nicer with MFA

* PR feedback

* More tests & interface cleanup

* One last test

* More PR Feedbakc

Author: avolkovi

packages-exp/auth-exp/demo/src/index.js

@@ -45,7 +45,10 @@ import {
   confirmPasswordReset,
   linkWithCredential,
   reauthenticateWithCredential,
-  unlink
+  unlink,
+  getMultiFactorResolver,
+  multiFactor,
+  PhoneMultiFactorGenerator
 } from '@firebase/auth-exp';
 
 import { config } from './config';
@@ -189,8 +192,8 @@ function addProviderIcon(providerId) {
  * @param {!firebase.User} activeUser The corresponding user.
  */
 function showMultiFactorStatus(activeUser) {
-  var enrolledFactors =
-    (activeUser.multiFactor && activeUser.multiFactor.enrolledFactors) || [];
+  mfaUser = multiFactor(activeUser);
+  var enrolledFactors = (mfaUser && mfaUser.enrolledFactors) || [];
   var $listGroup = $('#user-info .dropdown-menu.enrolled-second-factors');
   // Hide the drop down menu initially.
   $listGroup
@@ -221,7 +224,7 @@ function showMultiFactorStatus(activeUser) {
         var label = info && (info.displayName || info.uid);
         if (label) {
           $('#enrolled-factors-drop-down').removeClass('open');
-          activeUser.multiFactor.unenroll(info).then(function() {
+          mfaUser.unenroll(info).then(function() {
             refreshUserData();
             alertSuccess('Multi-factor successfully unenrolled.');
           }, onAuthError);
@@ -249,7 +252,7 @@ function onAuthError(error) {
   logAtLevel_(error, 'error');
   if (error.code == 'auth/multi-factor-auth-required') {
     // Handle second factor sign-in.
-    handleMultiFactorSignIn(error.resolver);
+    handleMultiFactorSignIn(getMultiFactorResolver(auth, error));
   } else {
     alertError('Error: ' + error.code);
   }
@@ -361,10 +364,7 @@ function onSignInWithEmailLink() {
 function onLinkWithEmailLink() {
   var email = $('#link-with-email-link-email').val();
   var link = $('#link-with-email-link-link').val() || undefined;
-  var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
-    email,
-    link
-  );
+  var credential = EmailAuthProvider.credentialWithLink(email, link);
   linkWithCredential(activeUser(), credential).then(
     onAuthUserCredentialSuccess,
     onAuthError
@@ -578,8 +578,8 @@ function onStartEnrollWithPhoneMultiFactor() {
   clearApplicationVerifier();
   // Initialize a reCAPTCHA application verifier.
   makeApplicationVerifier('enroll-mfa-verify-phone-number');
-  activeUser()
-    .multiFactor.getSession()
+  multiFactor(activeUser())
+    .getSession()
     .then(function(multiFactorSession) {
       var phoneInfoOptions = {
         'phoneNumber': phoneNumber,
@@ -604,23 +604,24 @@ function onStartEnrollWithPhoneMultiFactor() {
  * Confirms a phone number verification for MFA enrollment.
  */
 function onFinalizeEnrollWithPhoneMultiFactor() {
-  alertNotImplemented();
-  // var verificationId = $('#enroll-mfa-phone-verification-id').val();
-  // var verificationCode = $('#enroll-mfa-phone-verification-code').val();
-  // if (!verificationId || !verificationCode || !activeUser()) {
-  //   return;
-  // }
-  // var credential = PhoneAuthProvider.credential(
-  //     verificationId, verificationCode);
-  // var multiFactorAssertion =
-  //     firebase.auth.PhoneMultiFactorGenerator.assertion(credential);
-  // var displayName = $('#enroll-mfa-phone-display-name').val() || undefined;
+  var verificationId = $('#enroll-mfa-phone-verification-id').val();
+  var verificationCode = $('#enroll-mfa-phone-verification-code').val();
+  if (!verificationId || !verificationCode || !activeUser()) {
+    return;
+  }
+  var credential = PhoneAuthProvider.credential(
+    verificationId,
+    verificationCode
+  );
+  var multiFactorAssertion = PhoneMultiFactorGenerator.assertion(credential);
+  var displayName = $('#enroll-mfa-phone-display-name').val() || undefined;
 
-  // activeUser().multiFactor.enroll(multiFactorAssertion, displayName)
-  //     .then(function() {
-  //       refreshUserData();
-  //       alertSuccess('Phone number enrolled!');
-  //     }, onAuthError);
+  multiFactor(activeUser())
+    .enroll(multiFactorAssertion, displayName)
+    .then(function() {
+      refreshUserData();
+      alertSuccess('Phone number enrolled!');
+    }, onAuthError);
 }
 
 /**
@@ -830,7 +831,7 @@ function onLinkWithEmailAndPassword() {
   var password = $('#link-password').val();
   linkWithCredential(
     activeUser(),
-    firebase.auth.EmailAuthProvider.credential(email, password)
+    EmailAuthProvider.credential(email, password)
   ).then(onAuthUserCredentialSuccess, onAuthError);
 }
 
@@ -966,7 +967,7 @@ function onSignOut() {
 
 /**
  * Handles multi-factor sign-in completion.
- * @param {!firebase.auth.MultiFactorResolver} resolver The multi-factor error
+ * @param {!MultiFactorResolver} resolver The multi-factor error
  *     resolver.
  */
 function handleMultiFactorSignIn(resolver) {
@@ -1002,7 +1003,7 @@ function handleMultiFactorSignIn(resolver) {
  * Displays the list of multi-factors in the provided list group.
  * @param {!jQuery<!HTMLElement>} $listGroup The list group where the enrolled
  *     factors will be displayed.
- * @param {!Array<!firebase.auth.MultiFactorInfo>} multiFactorInfo The list of
+ * @param {!Array<!MultiFactorInfo>} multiFactorInfo The list of
  *     multi-factors to display.
  * @param {?function(!jQuery.Event)} onClick The click handler when a second
  *     factor is clicked.
@@ -1119,20 +1120,20 @@ function onStartSignInWithPhoneMultiFactor(event) {
  * @param {!jQuery.Event} event The jQuery event object.
  */
 function onFinalizeSignInWithPhoneMultiFactor(event) {
-  alertNotImplemented();
-  // event.preventDefault();
-  // var verificationId = $('#multi-factor-sign-in-verification-id').val();
-  // var code = $('#multi-factor-sign-in-verification-code').val();
-  // if (!code || !verificationId || !multiFactorErrorResolver) {
-  //   return;
-  // }
-  // var cred = PhoneAuthProvider.credential(verificationId, code);
-  // var assertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
-  // multiFactorErrorResolver.resolveSignIn(assertion)
-  //     .then(function(userCredential) {
-  //       onAuthUserCredentialSuccess(userCredential);
-  //       $('#multiFactorModal').modal('hide');
-  //     }, onAuthError);
+  event.preventDefault();
+  var verificationId = $('#multi-factor-sign-in-verification-id').val();
+  var code = $('#multi-factor-sign-in-verification-code').val();
+  if (!code || !verificationId || !multiFactorErrorResolver) {
+    return;
+  }
+  var cred = PhoneAuthProvider.credential(verificationId, code);
+  var assertion = PhoneMultiFactorGenerator.assertion(cred);
+  multiFactorErrorResolver
+    .resolveSignIn(assertion)
+    .then(function(userCredential) {
+      onAuthUserCredentialSuccess(userCredential);
+      $('#multiFactorModal').modal('hide');
+    }, onAuthError);
 }
 
 /**

packages-exp/auth-exp/src/api/account_management/account.ts

@@ -17,7 +17,7 @@
 
 import { Endpoint, HttpMethod, _performApiRequest } from '../';
 import { Auth } from '../../model/auth';
-import { APIMFAInfo } from '../../model/id_token';
+import { MfaEnrollment } from './mfa';
 
 export interface DeleteAccountRequest {
   idToken: string;
@@ -75,7 +75,7 @@ export interface APIUserInfo {
   tenantId?: string;
   passwordHash?: string;
   providerUserInfo?: ProviderUserInfo[];
-  mfaInfo?: APIMFAInfo[];
+  mfaInfo?: MfaEnrollment[];
 }
 
 export interface GetAccountInfoRequest {

packages-exp/auth-exp/src/api/account_management/mfa.test.ts

@@ -26,7 +26,11 @@ import { testAuth } from '../../../test/mock_auth';
 import * as mockFetch from '../../../test/mock_fetch';
 import { Auth } from '../../model/auth';
 import { ServerError } from '../errors';
-import { enrollPhoneMfa, startEnrollPhoneMfa, withdrawMfa } from './mfa';
+import {
+  finalizeEnrollPhoneMfa,
+  startEnrollPhoneMfa,
+  withdrawMfa
+} from './mfa';
 
 use(chaiAsPromised);
 
@@ -57,7 +61,10 @@ describe('api/account_management/startEnrollPhoneMfa', () => {
 
     const response = await startEnrollPhoneMfa(auth, request);
     expect(response.phoneSessionInfo.sessionInfo).to.eq('session-info');
-    expect(mock.calls[0].request).to.eql(request);
+    expect(mock.calls[0].request).to.eql({
+      tenantId: null,
+      ...request
+    });
     expect(mock.calls[0].method).to.eq('POST');
     expect(mock.calls[0].headers!.get(HttpHeader.CONTENT_TYPE)).to.eq(
       'application/json'
@@ -88,12 +95,16 @@ describe('api/account_management/startEnrollPhoneMfa', () => {
       FirebaseError,
       "Firebase: This user's credential isn't valid for this project. This can happen if the user's token has been tampered with, or if the user isn't for the project associated with this API key. (auth/invalid-user-token)."
     );
-    expect(mock.calls[0].request).to.eql(request);
+    expect(mock.calls[0].request).to.eql({
+      tenantId: null,
+      ...request
+    });
   });
 });
 
-describe('api/account_management/enrollPhoneMfa', () => {
+describe('api/account_management/finalizeEnrollPhoneMfa', () => {
   const request = {
+    idToken: 'id-token',
     phoneVerificationInfo: {
       temporaryProof: 'temporary-proof',
       phoneNumber: 'phone-number',
@@ -113,14 +124,17 @@ describe('api/account_management/enrollPhoneMfa', () => {
 
   it('should POST to the correct endpoint', async () => {
     const mock = mockEndpoint(Endpoint.FINALIZE_PHONE_MFA_ENROLLMENT, {
-      displayName: 'my-name',
-      idToken: 'id-token'
+      idToken: 'id-token',
+      refreshToken: 'refresh-token'
     });
 
-    const response = await enrollPhoneMfa(auth, request);
-    expect(response.displayName).to.eq('my-name');
+    const response = await finalizeEnrollPhoneMfa(auth, request);
     expect(response.idToken).to.eq('id-token');
-    expect(mock.calls[0].request).to.eql(request);
+    expect(response.refreshToken).to.eq('refresh-token');
+    expect(mock.calls[0].request).to.eql({
+      tenantId: null,
+      ...request
+    });
     expect(mock.calls[0].method).to.eq('POST');
     expect(mock.calls[0].headers!.get(HttpHeader.CONTENT_TYPE)).to.eq(
       'application/json'
@@ -147,11 +161,14 @@ describe('api/account_management/enrollPhoneMfa', () => {
       400
     );
 
-    await expect(enrollPhoneMfa(auth, request)).to.be.rejectedWith(
+    await expect(finalizeEnrollPhoneMfa(auth, request)).to.be.rejectedWith(
       FirebaseError,
       'Firebase: The verification ID used to create the phone auth credential is invalid. (auth/invalid-verification-id).'
     );
-    expect(mock.calls[0].request).to.eql(request);
+    expect(mock.calls[0].request).to.eql({
+      tenantId: null,
+      ...request
+    });
   });
 });
 
@@ -172,14 +189,17 @@ describe('api/account_management/withdrawMfa', () => {
 
   it('should POST to the correct endpoint', async () => {
     const mock = mockEndpoint(Endpoint.WITHDRAW_MFA, {
-      displayName: 'my-name',
-      idToken: 'id-token'
+      idToken: 'id-token',
+      refreshToken: 'refresh-token'
     });
 
     const response = await withdrawMfa(auth, request);
-    expect(response.displayName).to.eq('my-name');
     expect(response.idToken).to.eq('id-token');
-    expect(mock.calls[0].request).to.eql(request);
+    expect(response.refreshToken).to.eq('refresh-token');
+    expect(mock.calls[0].request).to.eql({
+      tenantId: null,
+      ...request
+    });
     expect(mock.calls[0].method).to.eq('POST');
     expect(mock.calls[0].headers!.get(HttpHeader.CONTENT_TYPE)).to.eq(
       'application/json'
@@ -210,6 +230,9 @@ describe('api/account_management/withdrawMfa', () => {
       FirebaseError,
       "Firebase: This user's credential isn't valid for this project. This can happen if the user's token has been tampered with, or if the user isn't for the project associated with this API key. (auth/invalid-user-token)."
     );
-    expect(mock.calls[0].request).to.eql(request);
+    expect(mock.calls[0].request).to.eql({
+      tenantId: null,
+      ...request
+    });
   });
 });