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: