2FA: Scanning the QR-Code doesn't work

[tohn]

Describe the bug
I can't seem to scan the (SVG-)QR-Code when enabling 2FA.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://linkace.example/settings
2. Click on 'Enable Two Factor Authentication'
3. Scan the QR-Code with an app (I tried with Aegis and Binary Eye)
4. Nothing happens

Expected behavior
When scanning the QR-Code, the (Android) App should react.

Screenshots
Sorry, I can't publish my QR-Code here 😉

LinkAce setup (please complete the following information):

• Version: v1.10.2
• Installed via: Docker
• OS: ArchLinux

Desktop (please complete the following information if applicable):

• OS: macOS 12.4
• Browser: Vivaldi
• Version: 5.3.2679.61

Smartphone (please complete the following information if applicable):

• Device: Xiaomi Redmi Note 7 Pro
• OS: Android

Additional context
When taking the provided alternative link and generating a QR-Code with this, the output looks different, but it works in Aegis and BinaryEye (even this "picture" below should work):

echo -n "otpauth://totp/LinkAce:mail%40linkace.example?secret=DJQ86QAQ1RLLINKA&issuer=LinkAce&algorithm=SHA1&digits=6&period=30" | qrencode -tutf8
█████████████████████████████████████████████████
█████████████████████████████████████████████████
████ ▄▄▄▄▄ █▀ ██▄ ▀██▄ ▄ ██▄▀█▄▀▀▀ ▄▄█ ▄▄▄▄▄ ████
████ █   █ █▀▀█ █▄▀  █ █  ▄ █▄█ ▄ ▀  █ █   █ ████
████ █▄▄▄█ █▀ █▀███ ▀▀ ▀▀  ▀ █ ▀█ ▀▄██ █▄▄▄█ ████
████▄▄▄▄▄▄▄█▄▀▄▀ ▀▄▀▄█▄█▄▀ ▀▄█▄▀ █▄▀ █▄▄▄▄▄▄▄████
████▄   ▄█▄  ▄▄█▀▄▄ ▀▄█ ▀▀    ▀▄██▀▀▀▄▀ ▀▄█▄▀████
████▀█▀█▄ ▄█▀ █▀▀█▀▄▄█ ▀▄▀▀██▀█ ▀ ██▄█▀ █▀█▄▄████
████▀▀▀█▄▄▄▀██ ▄▄▀▀ ▀█ █▄█▀█▀█▀██▄▄ ▄▄▀▄██ ▄ ████
█████ ▀▄▄▄▄██▀  ▄▄▄█▀▄  ▀ █▄▀██▀▄█▄▄█▀█▀ ▄▀▀█████
████▀ ▄  ▀▄ █▀▄▄▀▀█▀▄ ▀  █▄ ▄▄▄█▀ ▀▀▀▀▀█▀▄▄█▀████
██████▀▄  ▄▄█▄▀▀  ▄▀▀ ▀▀  █▀▀▄▀ ▄█▄█▀██ █ █ ▄████
█████▄█  ▀▄▄▄▄▄█▀█▄▀▄█▀▄▄▀▀▀▀ ▀██▄▄ ▄  ▄▀▄ █▀████
█████▄█ ▄ ▄▀  ██▀▀▄ ▄██▀█ ▀▀ █▄█▀▄▄▀▄█ ▀▀█ █▀████
████▄█▄▀▄█▄ ▄▀▄▀███  ▄█▀▄▀▄ ▄▄▄█▀▄▀█▀█▀█▀ ▄█ ████
████▀▄▀▄▄▀▄▀▄█▄█▄█▀▄██▄█ ███▀▄█ ▄▀▀▀  ███ █▄▀████
████ █▀▀█▄▄   ▀▄▄█▀ ▀█▄▀▄█▀▀▀ ▀ ▄▄▄▄▄▄ ██▄▄ ▀████
████ █ ▄▄█▄▄ ▀▀ ▄  █▀█▀    ▄▄█▀█▀██ █▀█▀██ ██████
████▄██▄▄▄▄▄▀ ▀▄█▀█▀█ ▄▀▀█ ▀▄▄▄▄▀ ▄█ ▄▄▄  ▄██████
████ ▄▄▄▄▄ █▄▀▀█  ▄▀█ ▀█▀ ▀▀▀▀▄  ▄ ▄ █▄█ ▀█ ▄████
████ █   █ █ ▄ █▀▀▄ ▄▀▀ ▄▀▀ ▀ ▀█▄ ▄█▄▄▄ ▄█ ▄ ████
████ █▄▄▄█ █  ▄█▀▀▄ ▄██▄▀ █ ▀▄▄ ▀▄ ▀▀▀▄█ ▄█ █████
████▄▄▄▄▄▄▄█▄▄████▄▄█▄▄███▄█▄▄▄▄█▄██▄████▄███████
█████████████████████████████████████████████████
█████████████████████████████████████████████████

[Kovah]

Thanks for the detailed report, will have a look as soon as possible.

[Kovah]

I am not sure about the apps you used, but the QR code seems to be generated as expected in version 1.10.4.

1. I enabled 2FA in the user settings, the QR code represented otpauth://totp/LinkAce:linkace%40example.com?secret=QMXVOB4SG2HLUTMI&issuer=LinkAce&algorithm=SHA1&digits=6&period=30 which is exactly what was displayed below.
2. I scanned the code with Duo, it successfully added the account and generates codes.
3. After logging out, I logged back in, using the code generated by Duo.

[tohn]

I think I figured it out: it's the dark mode I was using. Apparently the QR Code needs a small white border around the code to work. If I'm using light mode, it works instantaneously.

This works:

This doesn't work:

[Kovah]

Interesting, that's a good point. Will try that out and add a border for the code.

[Kovah]

Border was added, should be working now in dark mode.