Update the demo app to support TOTP enrollment, use local firebase auth version.

The QR code image is generated using the qrserver api at https://goqr.me/api/doc/

Author: prameshj

packages/auth/demo/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@firebase/app": "0.7.24",
-    "@firebase/auth": "0.20.1",
+    "@firebase/auth": "file:..",
     "@firebase/logger": "0.3.2",
     "@firebase/util": "1.6.0",
     "tslib": "^2.1.0"

packages/auth/demo/public/index.html

@@ -483,6 +483,12 @@
                     Phone
                   </a>
                 </li>
+                <li role="presentation">
+                  <a href="#mfa-totp-section" aria-controls="mfa-totp-section"
+                     data-toggle="tab" role="tab">
+                    TOTP
+                  </a>
+                </li>
               </ul>
               <div class="tab-content">
                 <div class="tab-pane active" id="mfa-phone-section">
@@ -500,7 +506,27 @@
                            class="form-control" placeholder="Display Name" />
                     <button class="btn btn-block btn-primary"
                             id="enroll-mfa-confirm-phone-verification">
-                      Complete Enrollment
+                      Complete Phone Enrollment
+                    </button>
+
+                  </form>
+                </div>
+                <div class="tab-pane" id="mfa-totp-section">
+                  <form class="form form-bordered no-submit">
+                    <button class="btn btn-block btn-primary" id="enroll-mfa-totp-start">
+                      Start TOTP Enrollment
+                    </button>
+                    <br>
+                    <p hidden class="totp-text" id="totp-text"> Please scan the QR code below in a TOTP app </p>
+                    <br>
+                    <img hidden class="totp-qr-image" id="totp-qr-image"/>
+                    <br> 
+                    <input type="text" id="enroll-mfa-totp-verification-code"
+                           class="form-control" placeholder="TOTP Verification Code(from App)" />
+                    <input type="text" id="enroll-mfa-totp-display-name"
+                           class="form-control" placeholder="Display Name" />
+                    <button class="btn btn-block btn-primary" id="enroll-mfa-totp-finalize">
+                      Complete TOTP Enrollment
                     </button>
                   </form>
                 </div>

packages/auth/demo/public/style.css

@@ -177,6 +177,17 @@ input + .form,
   margin-right: 10px;
 }
 
+.totp-text {
+  font-family: 'Courier New', Courier;
+}
+.totp-qr-image {
+  height: 120px;
+  margin-right: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 120px;
+}
+
 .profile-email-not-verified {
   color: #d9534f;
 }

packages/auth/demo/src/index.js

@@ -49,6 +49,8 @@ import {
   signInWithCredential,
   signInWithCustomToken,
   signInWithEmailAndPassword,
+  TotpMultiFactorGenerator,
+  TotpSecret,
   unlink,
   updateEmail,
   updatePassword,
@@ -97,6 +99,7 @@ let multiFactorErrorResolver = null;
 let selectedMultiFactorHint = null;
 let recaptchaSize = 'normal';
 let webWorker = null;
+let totpSecret = null;
 
 // The corresponding Font Awesome icons for each provider.
 const providersIcons = {
@@ -652,6 +655,50 @@ function onFinalizeEnrollWithPhoneMultiFactor() {
     }, onAuthError);
 }
 
+async function onStartEnrollWithTotpMultiFactor() {
+  console.log('Starting TOTP enrollment!');
+  if (!activeUser()) {
+    alertError('No active user found.');
+    return;
+  }
+  try {
+    multiFactorSession = await multiFactor(activeUser()).getSession();
+    totpSecret = await TotpMultiFactorGenerator.generateSecret(
+      multiFactorSession
+    );
+    const url = totpSecret.generateQrCodeUrl('test', 'testissuer');
+    console.log('TOTP URL is ' + url);
+    // Use the QRServer API documented at https://goqr.me/api/doc/
+    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${url}&size=30x30`;
+    $('img.totp-qr-image').attr('src', qrCodeUrl).show();
+    $('p.totp-text').show();
+  } catch (e) {
+    onAuthError(e);
+  }
+}
+
+async function onFinalizeEnrollWithTotpMultiFactor() {
+  const verificationCode = $('#enroll-mfa-totp-verification-code').val();
+  if (!activeUser() || !totpSecret || !verificationCode) {
+    alertError(' Missing active user OR TOTP secret OR verification code.');
+    return;
+  }
+
+  const multiFactorAssertion = TotpMultiFactorGenerator.assertionForEnrollment(
+    totpSecret,
+    verificationCode
+  );
+  const displayName = $('#enroll-mfa-totp-display-name').val() || undefined;
+
+  try {
+    await multiFactor(activeUser()).enroll(multiFactorAssertion, displayName);
+    refreshUserData();
+    alertSuccess('TOTP MFA enrolled!');
+  } catch (e) {
+    onAuthError(e);
+  }
+}
+
 /**
  * Signs in or links a provider's credential, based on current tab opened.
  * @param {!AuthCredential} credential The provider's credential.
@@ -1944,6 +1991,10 @@ function initApp() {
   $('#enroll-mfa-confirm-phone-verification').click(
     onFinalizeEnrollWithPhoneMultiFactor
   );
+  // Starts multi-factor enrollment with TOTP.
+  $('#enroll-mfa-totp-start').click(onStartEnrollWithTotpMultiFactor);
+  // Completes multi-factor enrollment with supplied OTP(One-Time Password).
+  $('#enroll-mfa-totp-finalize').click(onFinalizeEnrollWithTotpMultiFactor);
 }
 
 $(initApp);