Add buttons for no appVerifier

Author: NhienLam

packages/auth/demo/public/index.html

@@ -388,6 +388,9 @@
                 <button class="btn btn-block btn-primary" id="signin-verify-phone-number">
                   Verify Phone Number
                 </button>
+                <button class="btn btn-block btn-primary" id="signin-verify-phone-number-no-appverifier">
+                  Verify Phone Number (Without reCAPTCHA v2 AppVerifier)
+                </button>
                 <input type="text" id="signin-phone-verification-id"
                        class="form-control" placeholder="Phone Verification ID" />
                 <input type="text" id="signin-phone-verification-code"
@@ -630,6 +633,9 @@
                     <button class="btn btn-block btn-primary" id="enroll-mfa-verify-phone-number">
                       Verify Phone Number
                     </button>
+                    <button class="btn btn-block btn-primary" id="enroll-mfa-verify-phone-number-no-appverifier">
+                      Verify Phone Number (Without reCAPTCHA v2 AppVerifier)
+                    </button>
                     <input type="text" id="enroll-mfa-phone-verification-id"
                            class="form-control" placeholder="Phone Verification ID" />
                     <input type="text" id="enroll-mfa-phone-verification-code"
@@ -875,6 +881,9 @@ <h4 class="modal-title">Select a second factor to sign in with</h4>
               <button class="btn btn-block btn-primary" id="send-2fa-phone-code">
                 Send code
               </button>
+              <button class="btn btn-block btn-primary" id="send-2fa-phone-code-no-appverifier">
+                Send code (Without reCAPTCHA v2 AppVerifier)
+              </button>
               </div>
               <div class="form">
               <input type="text" id="multi-factor-sign-in-verification-id"

packages/auth/demo/src/index.js

@@ -718,6 +718,7 @@ function clearApplicationVerifier() {
  * Sends a phone number verification code for sign-in.
  */
 function onSignInVerifyPhoneNumber() {
+  console.log('onSignInVerifyPhoneNumber with ApplicationVerifier');
   const phoneNumber = $('#signin-phone-number').val();
   const provider = new PhoneAuthProvider(auth);
   // Clear existing reCAPTCHA as an existing reCAPTCHA could be targeted for a
@@ -738,6 +739,31 @@ function onSignInVerifyPhoneNumber() {
   );
 }
 
+/**
+ * Sends a phone number verification code for sign-in.
+ */
+function onSignInVerifyPhoneNumberNoAppVerifier() {
+  console.log('onSignInVerifyPhoneNumber without ApplicationVerifier');
+  const phoneNumber = $('#signin-phone-number').val();
+  const provider = new PhoneAuthProvider(auth);
+  // Clear existing reCAPTCHA as an existing reCAPTCHA could be targeted for a
+  // link/re-auth operation.
+  clearApplicationVerifier();
+  // Initialize a reCAPTCHA application verifier.
+  makeApplicationVerifier('signin-verify-phone-number');
+  provider.verifyPhoneNumber(phoneNumber).then(
+    verificationId => {
+      clearApplicationVerifier();
+      $('#signin-phone-verification-id').val(verificationId);
+      alertSuccess('Phone verification sent!');
+    },
+    error => {
+      clearApplicationVerifier();
+      onAuthError(error);
+    }
+  );
+}
+
 /**
  * Confirms a phone number verification for sign-in.
  */
@@ -831,6 +857,7 @@ function onReauthConfirmPhoneVerification() {
  * Sends a phone number verification code for enrolling second factor.
  */
 function onStartEnrollWithPhoneMultiFactor() {
+  console.log('onStartEnrollWithPhoneMultiFactor with ApplicationVerifier');
   const phoneNumber = $('#enroll-mfa-phone-number').val();
   if (!phoneNumber || !activeUser()) {
     return;
@@ -863,6 +890,40 @@ function onStartEnrollWithPhoneMultiFactor() {
     );
 }
 
+function onStartEnrollWithPhoneMultiFactorNoAppVerifier() {
+  console.log('onStartEnrollWithPhoneMultiFactor without ApplicationVerifier');
+  const phoneNumber = $('#enroll-mfa-phone-number').val();
+  if (!phoneNumber || !activeUser()) {
+    return;
+  }
+  const provider = new PhoneAuthProvider(auth);
+  // Clear existing reCAPTCHA as an existing reCAPTCHA could be targeted for a
+  // sign-in operation.
+  clearApplicationVerifier();
+  // Initialize a reCAPTCHA application verifier.
+  makeApplicationVerifier('enroll-mfa-verify-phone-number');
+  multiFactor(activeUser())
+    .getSession()
+    .then(multiFactorSession => {
+      const phoneInfoOptions = {
+        phoneNumber,
+        'session': multiFactorSession
+      };
+      return provider.verifyPhoneNumber(phoneInfoOptions);
+    })
+    .then(
+      verificationId => {
+        clearApplicationVerifier();
+        $('#enroll-mfa-phone-verification-id').val(verificationId);
+        alertSuccess('Phone verification sent!');
+      },
+      error => {
+        clearApplicationVerifier();
+        onAuthError(error);
+      }
+    );
+}
+
 /**
  * Confirms a phone number verification for MFA enrollment.
  */
@@ -1436,6 +1497,7 @@ function onSelectMultiFactorHint(index) {
  * @param {!jQuery.Event} event The jQuery event object.
  */
 function onStartSignInWithPhoneMultiFactor(event) {
+  console.log('onStartSignInWithPhoneMultiFactor with ApplicationVerifier');
   event.preventDefault();
   // Make sure a second factor is selected.
   if (!selectedMultiFactorHint || !multiFactorErrorResolver) {
@@ -1460,6 +1522,32 @@ function onStartSignInWithPhoneMultiFactor(event) {
   );
 }
 
+function onStartSignInWithPhoneMultiFactorNoAppVerifier(event) {
+  console.log('onStartSignInWithPhoneMultiFactor without ApplicationVerifier');
+  event.preventDefault();
+  // Make sure a second factor is selected.
+  if (!selectedMultiFactorHint || !multiFactorErrorResolver) {
+    return;
+  }
+  // Initialize a reCAPTCHA application verifier.
+  const provider = new PhoneAuthProvider(auth);
+  const signInRequest = {
+    multiFactorHint: selectedMultiFactorHint,
+    session: multiFactorErrorResolver.session
+  };
+  provider.verifyPhoneNumber(signInRequest).then(
+    verificationId => {
+      clearApplicationVerifier();
+      $('#multi-factor-sign-in-verification-id').val(verificationId);
+      alertSuccess('Phone verification sent!');
+    },
+    error => {
+      clearApplicationVerifier();
+      onAuthError(error);
+    }
+  );
+}
+
 /**
  * Completes sign-in with the 2nd factor phone assertion.
  * @param {!jQuery.Event} event The jQuery event object.
@@ -2275,6 +2363,7 @@ function initApp() {
     onSignInWithGenericIdPCredential
   );
   $('#signin-verify-phone-number').click(onSignInVerifyPhoneNumber);
+  $('#signin-verify-phone-number-no-appverifier').click(onSignInVerifyPhoneNumberNoAppVerifier);
   $('#signin-confirm-phone-verification').click(
     onSignInConfirmPhoneVerification
   );
@@ -2364,6 +2453,7 @@ function initApp() {
   // Multi-factor operations.
   // Starts multi-factor sign-in with selected phone number.
   $('#send-2fa-phone-code').click(onStartSignInWithPhoneMultiFactor);
+  $('#send-2fa-phone-code-no-appverifier').click(onStartSignInWithPhoneMultiFactorNoAppVerifier);
   // Completes multi-factor sign-in with supplied SMS code.
   $('#sign-in-with-phone-multi-factor').click(
     onFinalizeSignInWithPhoneMultiFactor
@@ -2376,6 +2466,7 @@ function initApp() {
 
   // Starts multi-factor enrollment with phone number.
   $('#enroll-mfa-verify-phone-number').click(onStartEnrollWithPhoneMultiFactor);
+  $('#enroll-mfa-verify-phone-number-no-appverifier').click(onStartEnrollWithPhoneMultiFactorNoAppVerifier);
   // Completes multi-factor enrollment with supplied SMS code.
   $('#enroll-mfa-confirm-phone-verification').click(
     onFinalizeEnrollWithPhoneMultiFactor