Mfa totp demoapp (#6629)

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

* 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

common/api-review/auth.api.md

@@ -750,10 +750,36 @@ export function signOut(auth: Auth): Promise<void>;
 export interface TotpMultiFactorAssertion extends MultiFactorAssertion {
 }
 
+// @public
+export class TotpMultiFactorGenerator {
+    static assertionForEnrollment(secret: TotpSecret, oneTimePassword: string): TotpMultiFactorAssertion;
+    static assertionForSignIn(enrollmentId: string, oneTimePassword: string): TotpMultiFactorAssertion;
+    // Warning: (ae-forgotten-export) The symbol "FactorId" needs to be exported by the entry point index.d.ts
+    static FACTOR_ID: FactorId_2;
+    static generateSecret(session: MultiFactorSession): Promise<TotpSecret>;
+}
+
 // @public
 export interface TotpMultiFactorInfo extends MultiFactorInfo {
 }
 
+// @public
+export class TotpSecret {
+    readonly codeIntervalSeconds: number;
+    readonly codeLength: number;
+    // Warning: (ae-forgotten-export) The symbol "StartTotpMfaEnrollmentResponse" needs to be exported by the entry point index.d.ts
+    //
+    // @internal (undocumented)
+    static _fromStartTotpMfaEnrollmentResponse(response: StartTotpMfaEnrollmentResponse, auth: AuthInternal): TotpSecret;
+    generateQrCodeUrl(accountName?: string, issuer?: string): string;
+    readonly hashingAlgorithm: string;
+    // Warning: (ae-forgotten-export) The symbol "TotpVerificationInfo" needs to be exported by the entry point index.d.ts
+    //
+    // @internal (undocumented)
+    _makeTotpVerificationInfo(otp: string): TotpVerificationInfo;
+    readonly secretKey: string;
+    }
+
 // @public
 export class TwitterAuthProvider extends BaseOAuthProvider {
     constructor();

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);

packages/auth/index.ts

@@ -73,6 +73,10 @@ import { browserPopupRedirectResolver } from './src/platform_browser/popup_redir
 
 // MFA
 import { PhoneMultiFactorGenerator } from './src/platform_browser/mfa/assertions/phone';
+import {
+  TotpMultiFactorGenerator,
+  TotpSecret
+} from './src/mfa/assertions/totp';
 
 // Initialization and registration of Auth
 import { getAuth } from './src/platform_browser';
@@ -96,5 +100,7 @@ export {
   RecaptchaVerifier,
   browserPopupRedirectResolver,
   PhoneMultiFactorGenerator,
+  TotpMultiFactorGenerator,
+  TotpSecret,
   getAuth
 };

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

@@ -171,23 +171,41 @@ export class TotpMultiFactorAssertionImpl
  */
 export class TotpSecret {
   /**
-   * Constructor for TotpSecret.
-   * @param secretKey - Shared secret key/seed used for enrolling in TOTP MFA and generating otps.
-   * @param hashingAlgorithm - Hashing algorithm used.
-   * @param codeLength - Length of the one-time passwords to be generated.
-   * @param codeIntervalSeconds - The interval (in seconds) when the OTP codes should change.
+   * Shared secret key/seed used for enrolling in TOTP MFA and generating otps.
    */
+  readonly secretKey: string;
+  /**
+   * Hashing algorithm used.
+   */
+  readonly hashingAlgorithm: string;
+  /**
+   * Length of the one-time passwords to be generated.
+   */
+  readonly codeLength: number;
+  /**
+   * The interval (in seconds) when the OTP codes should change.
+   */
+  readonly codeIntervalSeconds: number;
+  // TODO(prameshj) - make this public after API review.
+  // This can be used by callers to show a countdown of when to enter OTP code by.
+  private readonly finalizeEnrollmentBy: string;
+
+  // The public members are declared outside the constructor so the docs can be generated.
   private constructor(
-    readonly secretKey: string,
-    readonly hashingAlgorithm: string,
-    readonly codeLength: number,
-    readonly codeIntervalSeconds: number,
-    // TODO(prameshj) - make this public after API review.
-    // This can be used by callers to show a countdown of when to enter OTP code by.
-    private readonly finalizeEnrollmentBy: string,
+    secretKey: string,
+    hashingAlgorithm: string,
+    codeLength: number,
+    codeIntervalSeconds: number,
+    finalizeEnrollmentBy: string,
     private readonly sessionInfo: string,
     private readonly auth: AuthInternal
-  ) {}
+  ) {
+    this.secretKey = secretKey;
+    this.hashingAlgorithm = hashingAlgorithm;
+    this.codeLength = codeLength;
+    this.codeIntervalSeconds = codeIntervalSeconds;
+    this.finalizeEnrollmentBy = finalizeEnrollmentBy;
+  }
 
   /** @internal */
   static _fromStartTotpMfaEnrollmentResponse(