TOTP in Authelia Login Mask is missing a digit with Autofill but works with Ctrl+T & pasting

[snowborn]

Overview

Steps to Reproduce

1. Set up an authelia instance & account
2. Set up TOTP 2FA for that account
3. Login with the Password for that account (works with KeePass Autofill)
4. Get to the TOTP Screen for that account and use the autofill feature

Expected Behavior

the TOTP fill out the complete TOTP Token

Actual Behavior

• the TOTP Code is filled out but is missing the last digit
• When I go to KeePass and Use Ctrl+T to get the token and paste it into the webpage, it works

Context

I set up authelia on my own server, but this should hopefully not matter.

KeePassXC - Version 2.7.8
Revision: f6757d3

Qt 5.15.11
Diagnosemodus ist deaktiviert.

Betriebssystem: Windows 10 Version 2009
CPU-Architektur: x86_64
Kernel: winnt 10.0.19045

Aktivierte Erweiterungen:

• Auto-Type
• Browser-Integration
• Passkeys
• SSH-Agent
• KeeShare
• YubiKey
• Schnelle Entsperrung

Kryptographische Bibliotheken:

• Botan 3.1.1

[droidmonkey]

This is certainly a bug in the website design and you should report this to them.

[snowborn]

What is it that KeePassXC is looking for that it behaves that way? Certainly I would need that information to give the other developers a hint besides just "you have a bug somewhere".

[droidmonkey]

It's probably because we don't detect that last field as a totp input. Can you paste the HTML that describes the totp fields?

Is the TOTP longer than 6 digits?

[snowborn]

<span class="jss30" id="otp-input"><div style="display: flex;"><div style="display: flex; align-items: center;"><input aria-label="Please enter verification code. Digit 1" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value="4"></div><div style="display: flex; align-items: center;"><input aria-label="Digit 2" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value="8"></div><div style="display: flex; align-items: center;"><input aria-label="Digit 3" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value="0"></div><div style="display: flex; align-items: center;"><input aria-label="Digit 4" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value="3"></div><div style="display: flex; align-items: center;"><input aria-label="Digit 5" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value="8"></div><div style="display: flex; align-items: center;"><input aria-label="Digit 6" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value=""></div></div></span>

[snowborn]

It is 6 digits. KeePass only fills 5 of those

[snowborn]

[iwismer]

I'm having the same issue (firefox on macos).

Interestingly, it fills boxes 1-5 on the page with the 2-6 digits of the TOTP (it's missing the first digit). For example, if my TOTP is 123456, it will fill the boxes with: 23456_

[varjolintu]

@snowborn Could you copy/paste some more code around the id="otp-input" before filling any values? Thanks.

[snowborn]

<div id="root"><div class="MuiBox-root authelia-0"><header class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorTransparent MuiAppBar-positionStatic authelia-3dnz7c"><div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular authelia-i6s8oy"><p class="MuiTypography-root MuiTypography-body1 authelia-9l3uo3" style="flex-grow: 1;"></p><div class="MuiBox-root authelia-5nwj3y"><button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall authelia-i29csa" tabindex="0" type="button" id="account-menu" aria-haspopup="true" aria-label="Account Settings"><div class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault authelia-n0s85">A</div><span class="MuiTouchRipple-root authelia-w0pj6f"></span></button></div></div></header><div class="MuiGrid-root MuiGrid-container jss15 authelia-1c87emg" id="second-factor-stage"><div class="MuiContainer-root MuiContainer-maxWidthXs jss16 authelia-hltdia"><div class="MuiGrid-root MuiGrid-container authelia-1d3bbye"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 authelia-15j76c0"><svg id="UserSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55 55" xml:space="preserve" class="jss19"><path d="M55,27.5C55,12.337,42.663,0,27.5,0S0,12.337,0,27.5c0,8.009,3.444,15.228,8.926,20.258l-0.026,0.023l0.892,0.752 c0.058,0.049,0.121,0.089,0.179,0.137c0.474,0.393,0.965,0.766,1.465,1.127c0.162,0.117,0.324,0.234,0.489,0.348 c0.534,0.368,1.082,0.717,1.642,1.048c0.122,0.072,0.245,0.142,0.368,0.212c0.613,0.349,1.239,0.678,1.88,0.98 c0.047,0.022,0.095,0.042,0.142,0.064c2.089,0.971,4.319,1.684,6.651,2.105c0.061,0.011,0.122,0.022,0.184,0.033 c0.724,0.125,1.456,0.225,2.197,0.292c0.09,0.008,0.18,0.013,0.271,0.021C25.998,54.961,26.744,55,27.5,55 c0.749,0,1.488-0.039,2.222-0.098c0.093-0.008,0.186-0.013,0.279-0.021c0.735-0.067,1.461-0.164,2.178-0.287 c0.062-0.011,0.125-0.022,0.187-0.034c2.297-0.412,4.495-1.109,6.557-2.055c0.076-0.035,0.153-0.068,0.229-0.104 c0.617-0.29,1.22-0.603,1.811-0.936c0.147-0.083,0.293-0.167,0.439-0.253c0.538-0.317,1.067-0.648,1.581-1 c0.185-0.126,0.366-0.259,0.549-0.391c0.439-0.316,0.87-0.642,1.289-0.983c0.093-0.075,0.193-0.14,0.284-0.217l0.915-0.764 l-0.027-0.023C51.523,42.802,55,35.55,55,27.5z M2,27.5C2,13.439,13.439,2,27.5,2S53,13.439,53,27.5 c0,7.577-3.325,14.389-8.589,19.063c-0.294-0.203-0.59-0.385-0.893-0.537l-8.467-4.233c-0.76-0.38-1.232-1.144-1.232-1.993v-2.957 c0.196-0.242,0.403-0.516,0.617-0.817c1.096-1.548,1.975-3.27,2.616-5.123c1.267-0.602,2.085-1.864,2.085-3.289v-3.545 c0-0.867-0.318-1.708-0.887-2.369v-4.667c0.052-0.52,0.236-3.448-1.883-5.864C34.524,9.065,31.541,8,27.5,8 s-7.024,1.065-8.867,3.168c-2.119,2.416-1.935,5.346-1.883,5.864v4.667c-0.568,0.661-0.887,1.502-0.887,2.369v3.545 c0,1.101,0.494,2.128,1.34,2.821c0.81,3.173,2.477,5.575,3.093,6.389v2.894c0,0.816-0.445,1.566-1.162,1.958l-7.907,4.313 c-0.252,0.137-0.502,0.297-0.752,0.476C5.276,41.792,2,35.022,2,27.5z"></path></svg></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 authelia-15j76c0"><h5 class="MuiTypography-root MuiTypography-h5 authelia-zq6grw">Hallo Authelia Snowborn Benutzer</h5></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 jss20 authelia-15j76c0"><div class="MuiGrid-root MuiGrid-container authelia-1d3bbye"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 authelia-15j76c0"><button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary authelia-fwfp1z" tabindex="0" type="button" id="logout-button">Abmelden<span class="MuiTouchRipple-root authelia-w0pj6f"></span></button> | <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary authelia-fwfp1z" tabindex="0" type="button" id="methods-button">Verfahren<span class="MuiTouchRipple-root authelia-w0pj6f"></span></button></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 jss14 authelia-15j76c0"><div id="one-time-password-method"><h6 class="MuiTypography-root MuiTypography-h6 authelia-1anx036">One-Time-Passwort</h6><div class="jss23 state-method" id="2fa-container"><div class="jss24"><div class="jss25 MuiBox-root authelia-0"><div><div class="jss33 MuiBox-root authelia-0"><div class="jss34 MuiBox-root authelia-0"><div class="jss35 MuiBox-root authelia-0"><svg height="64" width="64" viewBox="0 0 26 26"><circle r="12" cx="13" cy="13" fill="none" stroke="#000" stroke-width="2"></circle><circle r="9" cx="13" cy="13" fill="#000" stroke="transparent"></circle><circle r="5" cx="13" cy="13" fill="none" stroke="#FFFFFF" stroke-width="10" stroke-dasharray="2.8071332931518556 31.6" transform="rotate(-90) translate(-26)"></circle></svg></div></div><div class="jss36 MuiBox-root authelia-0"><span class="jss30" id="otp-input"><div style="display: flex;"><div style="display: flex; align-items: center;"><input aria-label="Please enter verification code. Digit 1" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value=""></div><div style="display: flex; align-items: center;"><input aria-label="Digit 2" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value=""></div><div style="display: flex; align-items: center;"><input aria-label="Digit 3" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value=""></div><div style="display: flex; align-items: center;"><input aria-label="Digit 4" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value=""></div><div style="display: flex; align-items: center;"><input aria-label="Digit 5" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value=""></div><div style="display: flex; align-items: center;"><input aria-label="Digit 6" style="width: 1em; text-align: center; padding: 0px;" class="jss31 " type="tel" autocomplete="one-time-code" value=""></div></div></span></div></div></div></div><p class="MuiTypography-root MuiTypography-body1 authelia-9l3uo3">Einmal-Passwort eingeben</p></div></div><button class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover MuiLink-button authelia-16r9oux" id="register-link">Manage devices</button></div></div></div></div><div class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 authelia-1hsc67n"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 authelia-1udb513"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover jss22 authelia-1vxruma" href="https://www.authelia.com" target="_blank">Betrieben mit Authelia</a></div></div></div></div></div></div></div>

[M1scer]

If you want to change your 2FA settings, you will receive an OTP by email. In this field, all 6 numbers are filled in via KeePass.
(I know, the e-mail OTP must be entered, but I wanted to see if the bug also occurs here)

Maybe a solution would be to use this kind of OPT field also when logging in via TOTP.