[Filament 4.0.0-beta9] QR code not displayed when enabling multiFactorAuthentication

[alexchugun]

Package

filament/filament

Package Version

4.0.0-beta9

Laravel Version

11.34.2

Livewire Version

3.5.16

PHP Version

8.3

Problem description

Go to the user profile settings in the admin panel
Enable two-factor authentication
A QR code should be displayed for scanning with an authenticator app.
The QR code is not rendered. There is either an empty space or no visible component.

Expected behavior

A QR code should be displayed for scanning with an authenticator app.

Steps to reproduce

Go to the user profile settings in the admin panel
Enable two-factor authentication
A QR code should be displayed for scanning with an authenticator app.
The QR code is not rendered. There is either an empty space or no visible component.

Reproduction repository (issue will be closed if this is not valid)

https://github.com/alexchugun/filament-no-qr

Relevant log output

[danharrin]

Can you please upload the full reproduction repository, I am not able to install half a Laravel app

[alexchugun]

Can you please upload the full reproduction repository, I am not able to install half a Laravel app

updated the repository

[alexchugun]

if I delete bacon/bacon-qr-code, then everything works.

[danharrin]

I downloaded your repo and couldn't reproduce the problem, sorry.

[phit]

still seeing this issue on beta 25, seems to be an issue with how the svg is embedded

[phit]

specifically the qr code returned by the BaconQrCode SvgImageBackEnd is missing the data prefix, this will only reproduce if imagick isnt available

opened a PR upstream antonioribeiro/google2fa-qrcode#27

[fero8]

If you have laravel/jetstream installed, bacon/bacon-qr-code is required. Then Google's 2FA package uses BaconQrCode by default as the first option. See: https://github.com/antonioribeiro/google2fa-qrcode/blob/master/src/Google2FA.php#L100

The output of Bacon QR is probably pure SVG, not base64 encoded and thus I can see the same issue as in @phit 's screenshot.

I think there may need to be some extra step necessary in how filament two-factor handles the output of the image in src of the image based on which QR library Google2FA uses. Or just wait until the PR is merged in the upstream package.