[Bug]: when adding 2fa auth, the QR code is not scanable.

daviddodda1 commented 4 months ago

Description

The qr code background makes it impossible to scan.

Minimal Reproduction (if possible, example repository)

Login to your coolify instance
go to profile
click configure on 2fa auth

browser: Firefox

Exception or Error

No response

Version

v4.0.0-beta.297

exoer commented 4 months ago

I had the same experience. But it worked when I switched to light theme.

andrasbacsai commented 4 months ago

I'm trying to reproduce the issue, but cannot. Can you maybe show me the div layout of that QR code? I'm interested in what is causing that darker path.

bb-david commented 4 months ago

this is the actual HTML code

<div>
                <div><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="192" height="192" viewBox="0 0 192 192"><rect x="0" y="0" width="192" height="192" fill="#ffffff"></rect><g transform="scale(4.683)"><g transform="translate(0.000,0.000)"><path fill-rule="evenodd" d="M9 0L9 1L8 1L8 2L9 2L9 3L8 3L8 4L9 4L9 3L10 3L10 5L8 5L8 7L9 7L9 6L10 6L10 8L6 8L6 9L5 9L5 8L0 8L0 10L1 10L1 11L0 11L0 12L1 12L1 11L2 11L2 12L4 12L4 13L3 13L3 14L6 14L6 15L7 15L7 16L6 16L6 17L7 17L7 16L9 16L9 19L8 19L8 20L6 20L6 19L7 19L7 18L6 18L6 19L5 19L5 18L3 18L3 19L5 19L5 21L4 21L4 20L1 20L1 19L2 19L2 18L0 18L0 20L1 20L1 21L0 21L0 26L2 26L2 27L3 27L3 26L4 26L4 28L3 28L3 30L2 30L2 28L1 28L1 29L0 29L0 33L1 33L1 30L2 30L2 31L3 31L3 33L4 33L4 32L5 32L5 33L8 33L8 35L9 35L9 33L8 33L8 31L9 31L9 29L7 29L7 28L8 28L8 27L7 27L7 26L6 26L6 27L5 27L5 24L6 24L6 25L8 25L8 26L10 26L10 25L8 25L8 24L6 24L6 23L7 23L7 22L6 22L6 21L8 21L8 20L9 20L9 21L10 21L10 22L11 22L11 26L12 26L12 27L9 27L9 28L11 28L11 29L10 29L10 31L11 31L11 29L12 29L12 30L13 30L13 31L12 31L12 32L13 32L13 31L14 31L14 33L18 33L18 38L21 38L21 39L19 39L19 40L22 40L22 39L23 39L23 38L25 38L25 37L26 37L26 38L27 38L27 39L28 39L28 40L29 40L29 41L30 41L30 40L31 40L31 41L32 41L32 40L33 40L33 39L32 39L32 40L31 40L31 37L30 37L30 36L29 36L29 35L30 35L30 34L29 34L29 33L32 33L32 34L31 34L31 35L32 35L32 37L35 37L35 38L34 38L34 41L35 41L35 38L36 38L36 40L37 40L37 41L39 41L39 40L40 40L40 39L39 39L39 38L36 38L36 37L37 37L37 36L38 36L38 37L39 37L39 36L41 36L41 35L39 35L39 36L38 36L38 35L37 35L37 34L38 34L38 33L39 33L39 34L40 34L40 33L41 33L41 32L40 32L40 31L39 31L39 32L38 32L38 30L41 30L41 27L39 27L39 28L38 28L38 25L39 25L39 26L40 26L40 25L41 25L41 23L40 23L40 25L39 25L39 24L38 24L38 23L39 23L39 22L38 22L38 21L39 21L39 20L40 20L40 19L39 19L39 20L38 20L38 18L37 18L37 17L36 17L36 18L35 18L35 17L32 17L32 16L31 16L31 17L30 17L30 16L29 16L29 15L28 15L28 14L30 14L30 15L31 15L31 14L32 14L32 15L33 15L33 16L34 16L34 15L33 15L33 13L34 13L34 14L35 14L35 16L37 16L37 13L36 13L36 10L37 10L37 9L38 9L38 8L37 8L37 9L36 9L36 8L35 8L35 9L34 9L34 8L33 8L33 6L32 6L32 7L31 7L31 6L30 6L30 8L29 8L29 9L28 9L28 10L27 10L27 8L28 8L28 7L29 7L29 6L28 6L28 5L33 5L33 0L29 0L29 1L26 1L26 0L25 0L25 1L24 1L24 0L23 0L23 1L24 1L24 4L23 4L23 2L22 2L22 1L21 1L21 0L19 0L19 1L20 1L20 2L19 2L19 4L18 4L18 3L17 3L17 2L18 2L18 0L15 0L15 2L14 2L14 3L15 3L15 2L16 2L16 3L17 3L17 4L14 4L14 5L13 5L13 4L12 4L12 5L13 5L13 6L12 6L12 7L11 7L11 3L12 3L12 2L13 2L13 0L12 0L12 1L11 1L11 0ZM9 1L9 2L10 2L10 3L11 3L11 2L10 2L10 1ZM16 1L16 2L17 2L17 1ZM25 1L25 3L26 3L26 4L27 4L27 5L28 5L28 4L29 4L29 3L31 3L31 2L32 2L32 1L31 1L31 2L30 2L30 1L29 1L29 2L28 2L28 4L27 4L27 3L26 3L26 1ZM20 3L20 4L22 4L22 3ZM17 4L17 5L14 5L14 6L13 6L13 7L12 7L12 9L11 9L11 8L10 8L10 9L11 9L11 10L9 10L9 9L6 9L6 10L4 10L4 12L5 12L5 13L6 13L6 14L7 14L7 15L9 15L9 16L10 16L10 17L11 17L11 19L10 19L10 20L11 20L11 22L13 22L13 23L12 23L12 25L13 25L13 24L14 24L14 25L17 25L17 26L19 26L19 27L17 27L17 28L19 28L19 29L16 29L16 28L15 28L15 27L14 27L14 28L12 28L12 29L13 29L13 30L14 30L14 31L15 31L15 29L16 29L16 30L19 30L19 32L18 32L18 31L16 31L16 32L18 32L18 33L22 33L22 34L19 34L19 35L22 35L22 36L21 36L21 38L23 38L23 36L26 36L26 37L27 37L27 38L28 38L28 37L27 37L27 36L26 36L26 35L27 35L27 34L28 34L28 35L29 35L29 34L28 34L28 33L29 33L29 32L31 32L31 31L32 31L32 30L31 30L31 31L30 31L30 30L28 30L28 29L29 29L29 28L30 28L30 29L31 29L31 28L30 28L30 27L32 27L32 25L33 25L33 26L34 26L34 27L33 27L33 28L32 28L32 29L35 29L35 28L36 28L36 29L37 29L37 30L36 30L36 31L35 31L35 30L33 30L33 31L34 31L34 32L36 32L36 31L37 31L37 30L38 30L38 29L37 29L37 26L36 26L36 25L38 25L38 24L34 24L34 22L35 22L35 21L37 21L37 18L36 18L36 20L35 20L35 19L34 19L34 18L33 18L33 19L32 19L32 18L31 18L31 19L30 19L30 17L29 17L29 16L28 16L28 17L25 17L25 16L26 16L26 15L27 15L27 14L28 14L28 13L29 13L29 12L30 12L30 13L31 13L31 12L30 12L30 11L32 11L32 10L30 10L30 9L33 9L33 10L34 10L34 11L35 11L35 10L34 10L34 9L33 9L33 8L30 8L30 9L29 9L29 10L28 10L28 11L29 11L29 12L28 12L28 13L27 13L27 14L26 14L26 10L25 10L25 11L24 11L24 10L23 10L23 9L25 9L25 8L27 8L27 7L28 7L28 6L27 6L27 7L26 7L26 6L25 6L25 4L24 4L24 5L23 5L23 7L24 7L24 8L23 8L23 9L22 9L22 8L21 8L21 7L22 7L22 5L21 5L21 7L20 7L20 5L19 5L19 7L18 7L18 6L17 6L17 5L18 5L18 4ZM14 6L14 9L12 9L12 12L10 12L10 11L9 11L9 10L8 10L8 12L10 12L10 13L7 13L7 12L6 12L6 13L7 13L7 14L9 14L9 15L10 15L10 14L11 14L11 13L12 13L12 14L13 14L13 13L12 13L12 12L14 12L14 13L15 13L15 16L14 16L14 17L15 17L15 19L14 19L14 20L15 20L15 19L16 19L16 18L20 18L20 19L19 19L19 20L17 20L17 21L13 21L13 20L12 20L12 21L13 21L13 22L17 22L17 23L16 23L16 24L17 24L17 25L18 25L18 24L17 24L17 23L19 23L19 22L20 22L20 24L22 24L22 25L23 25L23 26L21 26L21 25L19 25L19 26L20 26L20 27L19 27L19 28L20 28L20 27L21 27L21 28L23 28L23 26L26 26L26 25L27 25L27 24L28 24L28 23L30 23L30 24L29 24L29 25L28 25L28 26L27 26L27 27L28 27L28 28L29 28L29 26L30 26L30 24L31 24L31 25L32 25L32 24L33 24L33 23L32 23L32 24L31 24L31 23L30 23L30 22L34 22L34 21L30 21L30 20L29 20L29 19L28 19L28 18L29 18L29 17L28 17L28 18L27 18L27 19L26 19L26 18L25 18L25 17L24 17L24 16L25 16L25 15L26 15L26 14L25 14L25 15L24 15L24 16L23 16L23 14L24 14L24 13L25 13L25 12L24 12L24 13L23 13L23 12L22 12L22 11L23 11L23 10L22 10L22 9L21 9L21 8L19 8L19 9L18 9L18 8L17 8L17 6L16 6L16 8L17 8L17 9L15 9L15 6ZM24 6L24 7L25 7L25 6ZM39 8L39 9L40 9L40 8ZM1 9L1 10L2 10L2 9ZM17 9L17 10L16 10L16 11L14 11L14 12L16 12L16 11L17 11L17 12L18 12L18 11L19 11L19 12L20 12L20 13L21 13L21 14L19 14L19 13L16 13L16 14L17 14L17 15L16 15L16 16L18 16L18 17L22 17L22 18L21 18L21 19L23 19L23 20L21 20L21 21L24 21L24 22L22 22L22 23L23 23L23 25L24 25L24 24L26 24L26 23L27 23L27 22L28 22L28 21L26 21L26 19L25 19L25 18L23 18L23 17L22 17L22 16L21 16L21 14L22 14L22 12L20 12L20 10L21 10L21 9L20 9L20 10L18 10L18 9ZM6 10L6 11L7 11L7 10ZM29 10L29 11L30 11L30 10ZM37 11L37 12L38 12L38 15L39 15L39 16L38 16L38 17L39 17L39 18L40 18L40 17L39 17L39 16L40 16L40 15L39 15L39 12L40 12L40 14L41 14L41 11L39 11L39 12L38 12L38 11ZM32 12L32 13L33 13L33 12ZM34 12L34 13L35 13L35 12ZM0 13L0 16L1 16L1 17L2 17L2 16L1 16L1 15L2 15L2 14L1 14L1 13ZM3 15L3 17L4 17L4 15ZM12 15L12 16L13 16L13 15ZM19 15L19 16L20 16L20 15ZM31 19L31 20L32 20L32 19ZM24 20L24 21L25 21L25 22L24 22L24 23L25 23L25 22L26 22L26 21L25 21L25 20ZM2 21L2 22L3 22L3 21ZM17 21L17 22L19 22L19 21ZM29 21L29 22L30 22L30 21ZM40 21L40 22L41 22L41 21ZM4 22L4 24L3 24L3 25L2 25L2 26L3 26L3 25L4 25L4 24L5 24L5 23L6 23L6 22ZM8 22L8 23L9 23L9 22ZM37 22L37 23L38 23L38 22ZM1 23L1 24L2 24L2 23ZM34 25L34 26L35 26L35 25ZM6 27L6 28L7 28L7 27ZM34 27L34 28L35 28L35 27ZM14 28L14 29L15 29L15 28ZM24 28L24 29L22 29L22 30L21 30L21 29L19 29L19 30L21 30L21 32L22 32L22 33L23 33L23 34L22 34L22 35L23 35L23 34L24 34L24 35L25 35L25 34L24 34L24 33L26 33L26 34L27 34L27 33L28 33L28 32L27 32L27 31L28 31L28 30L26 30L26 29L27 29L27 28L26 28L26 29L25 29L25 28ZM39 28L39 29L40 29L40 28ZM4 29L4 30L5 30L5 32L7 32L7 31L8 31L8 30L7 30L7 29L6 29L6 30L5 30L5 29ZM24 29L24 30L22 30L22 31L24 31L24 32L23 32L23 33L24 33L24 32L26 32L26 30L25 30L25 29ZM6 30L6 31L7 31L7 30ZM24 30L24 31L25 31L25 30ZM10 33L10 35L11 35L11 33ZM33 33L33 36L36 36L36 33ZM15 34L15 35L14 35L14 36L15 36L15 37L14 37L14 38L11 38L11 37L13 37L13 36L10 36L10 37L9 37L9 36L8 36L8 41L13 41L13 40L12 40L12 39L14 39L14 38L17 38L17 37L16 37L16 36L17 36L17 35L16 35L16 34ZM34 34L34 35L35 35L35 34ZM40 37L40 38L41 38L41 37ZM9 38L9 39L10 39L10 40L11 40L11 39L10 39L10 38ZM16 39L16 41L18 41L18 40L17 40L17 39ZM24 39L24 41L27 41L27 40L25 40L25 39ZM29 39L29 40L30 40L30 39ZM38 39L38 40L39 40L39 39ZM14 40L14 41L15 41L15 40ZM0 0L0 7L7 7L7 0ZM1 1L1 6L6 6L6 1ZM2 2L2 5L5 5L5 2ZM41 0L34 0L34 7L41 7ZM40 1L35 1L35 6L40 6ZM39 2L36 2L36 5L39 5ZM0 41L7 41L7 34L0 34ZM1 40L6 40L6 35L1 35ZM2 39L5 39L5 36L2 36Z" fill="#2d3748"></path></g></g></svg></div>
                <div x-data="{ showCode: false }" class="py-2">
                    <template x-if="showCode">
                        <div class="py-2 ">JVNCPH3BMZ5VNDNZ</div>
                    </template>
                    <button class="button" x-on:click="showCode = !showCode" type="button">

    Show secret key to manually
                        enter
    </button>
                </div>
            </div>

bb-david commented 4 months ago

the issue is cause because the rect is 192x192 if I make it 250x250 it works fine.

andrasbacsai commented 4 months ago

Thanks! I have made a few modifications, I hope it will work, if not, reopen this issue.

sneko commented 1 month ago

@andrasbacsai I installed my Coolify (v4.0.0-beta.332) but it's still happening.

As mentioned by @exoer I had to switch to light theme to make it scannable.

Note that giving the secret key for manual setup is not enough, it should provide the full URL like otpauth://totp/Coolify:aaaa@aaaa.com?secret=XXXXXXXXX otherwise it's a bit of a mystery to save it into password managers (maybe mine is not helpful tough).

mediafinger commented 1 month ago

My colleague just installed Coolify v4.0.0-beta.343 and we both could not scan the QR Code, but had to enter the key manually.

Our installation is using the black background. I was using the Authy app (which never had this issue before).

peaklabs-dev commented 3 weeks ago

@mediafinger This will be fixed in a upcoming version. @sneko I have added the OTP Url with an easy copy button. Will be released in one of the next versions.

coollabsio / coolify