I'll add some new info to see if it helps someone else.

I created a new OTP token using the CLI and the QR was perfectly recognized by Android apps (tested on FreeOTP and Aegis Authenticator).

[{user}@{replica_host} ~]$ ipa otptoken-add --desc="2022-08-17"
------------------
Added OTP token ""
------------------
  Unique ID: {hyphens-separated-strings}
  Type: TOTP
  Description: 2022-08-17
  Owner: {freeipa_user}
  Manager: {freeipa_user}
  Key: {string}
  Algorithm: sha1
  Digits: 6
  Clock offset: 0
  Clock interval: 30
  URI: otpauth://totp/{freeipa_user}@{domain}:{hyphens-separated-strings}?issuer={freeipa_user}%40{domain}&secret={string}&digits=6&algorithm=SHA1&period=30

I compared the generated URI with one generated by the UI: they have the same format:

CLI: otpauth://totp/{freeipa_user}@{domain}:{hyphens-separated-strings}?issuer={freeipa_user}%40{domain}&secret={string}&digits=6&algorithm=SHA1&period=30
UI: otpauth://totp/{freeipa_user}@{domain}:{hyphens-separated-strings}?issuer={freeipa_user}%40{domain}&secret={string}&digits=6&algorithm=SHA1&period=30

Then I noticed a white border around the image as the main difference between this one and those generated by the UI. This was key on solving the issue.

So, the problem was that I was using a dark mode on Brave: I migrated from the native experimental setting to the plugin/extension named 'Dark Reader'. These dark themes addons are very common these days as they force dark backgrounds on almost all sites (not to confuse with browsers' dark themes which only affects their UIs). I added an exception on the extension (Dark Reader) and the QR scanning worked as expected. I also confirmed this by trying scanning the generated QR on another browser (Firefox) without any dark mode extension. This issue seems to be only affecting MFA apps on Android, as iOS apps seems to be able to handle the QRs no matter the background.

Summarizing, the QR scanning functionality on Android devices strongly depends on the browser having a white/light color as background for the UI, while on the CLI the QR is surrounded by a white border by default and it works as expected on all cases, even on a terminal with a light background.

I would prefer if some of the main developers check on this and decide if this issue should be addressed before closing, by adding a white border to the QR on the UI (as CLI does) or maybe a related warning.

An excellent find, thanks!

I don't believe the qrcode javascript library we use provides a method to include a border by itself so we'd have to roll it ourselves I think. My js is really rusty though.

This is the library used, apparently unmaintained.

There's a PR from 2015 adding the support to a border, there are some forks with that fix (and others). We can do the same, apply that patch, credit, minify and use it.

Another option is to add a simple css:

border: 20px solid rgb(255, 255, 255) !important;

!important is required, the "Dark Reader" extension overrides every possible white border/background/etc.