Firebase TOTP multi-factor authentication enrollment TypeError

[tjg37]

Operating System

macOS 12.6

Browser Version

Chrome 121.0.6167.160

Firebase SDK Version

10.8.0

Firebase SDK Product:

Auth, Firestore

Describe your project's tooling

I have a web app using react 18.2.0 and currently running it locally.

Describe the problem

I am adding TOTP multi-factor authentication to my web app as per the Firebase Documentation.

More specifically, I am following the enrollment steps from the above documentation.

I am able to generate a TOTP secret, and using a QR code, display the secret to the user so that they can enter it into their authenticator app (Steps 1-4 in the docs).

Using the totpSecret obtained from the previous step, I then prompt the user to enter the confirmation code verificationCode displayed on their authenticator app, and use it to finalize MFA enrollment with the following code (Step 5 in the docs):

  const auth = getAuth().currentUser;
    const multiFactorAssertion =
      TotpMultiFactorGenerator.assertionForEnrollment(
        totpSecret,
        verificationCode
      );

    multiFactor(user)
      .enroll(multiFactorAssertion, "mfa_totp")
      .then((res) => {
         // Success
         console.log(res);
      })
      .catch((error) => {
         // Error
        console.log(error);
      });

Upon enrollment, the user receives the following error, which looks like it could be a bug within the package:

TypeError: this.secret._makeTotpVerificationInfo is not a function
    at TotpMultiFactorAssertionImpl._callee97$ (index-bea2a320.js:18548:1)
    at tryCatch (regeneratorRuntime.js:45:1)
    at Generator.<anonymous> (regeneratorRuntime.js:133:1)
    at Generator.next (regeneratorRuntime.js:74:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at asyncToGenerator.js:27:1
    at new Promise (<anonymous>)
    at TotpMultiFactorAssertionImpl.<anonymous> (asyncToGenerator.js:19:1)
    at TotpMultiFactorAssertionImpl._finalizeEnroll (index-bea2a320.js:18560:1)
    at TotpMultiFactorAssertionImpl._process (index-bea2a320.js:18296:1)
    at MultiFactorUserImpl._callee54$ (index-bea2a320.js:12161:1)
    at tryCatch (regeneratorRuntime.js:45:1)
    at Generator.<anonymous> (regeneratorRuntime.js:133:1)
    at Generator.next (regeneratorRuntime.js:74:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)

As you can see from the docs, the implementation steps are rather trivial so I suspect that the above error may be due to a bug within the package.

Steps and code to reproduce issue

Follow the enrollment steps in the Firebase Documentation and when implementing step 5, you can expect to receive the above error.

[tjg37]

The issue was that when generating the multiFactorAssertion, I was using the totpSecret.secretKey instead of the totpSecret itself.