Generate QR code for OTP enrollment

Problem statement

I am implementing multifactor authentication, and building a custom enrollment page for users to manage their factors. I want to know how to generate the QR code in the front end.

Cause

Our product does not offer this functionality, so you need to use a third-party library.

Solution

When enrolling a new OTP factor, you will get the “barcode_uri” parameter in the response for the TOTP enrollment workflow.

You can use the qrcode npm module (or any other library of your choice) to display it in your application:

Here is an example using qrcode:

QRCode.toCanvas(document.getElementById("verify-mfa-otp-qr"), res.barcode_uri, function (err) {
        if (err) {
            console.log("failed to draw QR code");
            console.dir(err);
        }
    })

Also, the below post explains a few ways to generate QR code using JavaScript: