Improve Authenticator app 2FA login UX with input autofocus

Is your feature request related to a problem? Please describe. The 2FA verification code input field does not automatically receive focus when the page loads for Authenticator app 2FA. Because it is the only input on the page, users naturally begin typing their time-based OTP immediately after checking their authenticator app. This results in the code not being entered into the input and by the time the user manually clicks the input and re-enters the code, the PIN has often expired, causing unnecessary friction in the login flow. Since this is the only input on the page, I don't think it would be problematic to have it selected when the page loads and many other applications do this.

Describe the solution you'd like The input field should be automatically focused when the page loads so that the user can type in the OTP without having to use the mouse.

Describe alternatives you've considered You can press Tab on the keyboard to navigate to the input but you have to press it twice, since the first press takes you to the "back arrow" next to "Verify Your Identity". I have not considered other 2FA methods and their respective input fields.

Screenshot show "back arrow" highlighted after pressing Tab once.

Additional context Tested on ThingsBoard Cloud 4.3.1.4.3PAASmailnonfree and https://github.com/thingsboard/thingsboard/ master branch as of 687d808 in both Brave and Firefox browsers which yield exact same results.

I have managed to implement the feature locally by adding a template reference to the HTML and using @ViewChild to call .focus() inside a setTimeout block within the ngAfterViewInit lifecycle hook. This programmatic approach was necessary after testing confirmed that neither the standard HTML autofocus attribute nor the Angular Material cdkFocusInitial directive successfully triggered focus during the route transition.

---

Disclaimer

We appreciate your contribution whether it is a bug report, feature request, or pull request with improvement (hopefully). Please comply with the Community ethics policy), and do not expect us to answer your requests immediately. Also, do not treat GitHub issues as a support channel.