Expose enrollmentCompletionDeadline field in TotpSecret. (#6870)

Also changed the demo app to display this field as a countdown.

Author: prameshj

common/api-review/auth.api.md

@@ -767,6 +767,7 @@ export interface TotpMultiFactorInfo extends MultiFactorInfo {
 export class TotpSecret {
     readonly codeIntervalSeconds: number;
     readonly codeLength: number;
+    readonly enrollmentCompletionDeadline: string;
     // Warning: (ae-forgotten-export) The symbol "StartTotpMfaEnrollmentResponse" needs to be exported by the entry point index.d.ts
     //
     // @internal (undocumented)

packages/auth/demo/public/index.html

@@ -534,7 +534,7 @@
                     </button>
                     <br>
                     <p hidden class="totp-text" id="totp-text"> Please scan the QR code below in a TOTP app </p>
-                    <br>
+                    <p hidden class="totp-deadline" id="totp-deadline"></p>
                     <img hidden class="totp-qr-image" id="totp-qr-image"/>
                     <br> 
                     <input type="text" id="enroll-mfa-totp-verification-code"

packages/auth/demo/public/style.css

@@ -180,6 +180,12 @@ input + .form,
 .totp-text {
   font-family: 'Courier New', Courier;
 }
+
+.totp-deadline {
+  font-family: 'Courier New', Courier;
+  color: #d9534f;
+}
+
 .totp-qr-image {
   height: 120px;
   margin-right: 10px;

packages/auth/demo/src/index.js

@@ -710,6 +710,27 @@ async function onStartEnrollWithTotpMultiFactor() {
     );
     const url = totpSecret.generateQrCodeUrl('test', 'testissuer');
     console.log('TOTP URL is ' + url);
+    console.log(
+      'Finalize sign in by ' + totpSecret.enrollmentCompletionDeadline
+    );
+    // display the numbr of seconds left to enroll.
+    $('p.totp-deadline').show();
+    var id = setInterval(function () {
+      var deadline = new Date(totpSecret.enrollmentCompletionDeadline);
+      var t = deadline - new Date().getTime();
+      if (t < 0) {
+        clearInterval(id);
+        document.getElementById('totp-deadline').innerText =
+          'TOTP enrollment expired!';
+      } else {
+        var minutes = Math.floor(t / (1000 * 60));
+        var seconds = Math.floor((t % (60 * 1000)) / 1000);
+        // accessing the field using $ does not work here.
+        document.getElementById(
+          'totp-deadline'
+        ).innerText = `Time left - ${minutes} minutes, ${seconds} seconds.`;
+      }
+    }, 1000);
     // Use the QRServer API documented at https://goqr.me/api/doc/
     const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${url}&amp;size=30x30`;
     $('img.totp-qr-image').attr('src', qrCodeUrl).show();

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

@@ -199,25 +199,27 @@ export class TotpSecret {
    * The interval (in seconds) when the OTP codes should change.
    */
   readonly codeIntervalSeconds: number;
-  // TODO(prameshj) - make this public after API review.
+  /**
+   * The timestamp(UTC string) by which TOTP enrollment should be completed.
+   */
   // This can be used by callers to show a countdown of when to enter OTP code by.
-  private readonly finalizeEnrollmentBy: string;
+  readonly enrollmentCompletionDeadline: string;
 
   // The public members are declared outside the constructor so the docs can be generated.
   private constructor(
     secretKey: string,
     hashingAlgorithm: string,
     codeLength: number,
     codeIntervalSeconds: number,
-    finalizeEnrollmentBy: string,
+    enrollmentCompletionDeadline: string,
     private readonly sessionInfo: string,
     private readonly auth: AuthInternal
   ) {
     this.secretKey = secretKey;
     this.hashingAlgorithm = hashingAlgorithm;
     this.codeLength = codeLength;
     this.codeIntervalSeconds = codeIntervalSeconds;
-    this.finalizeEnrollmentBy = finalizeEnrollmentBy;
+    this.enrollmentCompletionDeadline = enrollmentCompletionDeadline;
   }
 
   /** @internal */