[FR] Make the MFA token box the focus on the MFA login page

[audiomak23]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

Right now after logging in you have to click on the MFA box to put the cursor in the box in order to type in your MFA code in Amplify UI. Since the redirect to the “Confirmation Code” dialog is handled internally to the Amplify UI library, can we make the MFA box the focus when this page comes up so the cursor is automatically in that box and we can just type the code?

Please describe a solution you'd like.

Make the MFA box the focus when this page comes up so the cursor is automatically in that box and we can just type the code

We love contributors! Is this something you'd be interested in working on?

• [X] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[calebpollman]

Hi @audiomak23! Thanks for opening the request, will discuss internally with the team. Is this behavior you would expect to see for all of the Authenticator routes or just for MFA confirmation code input?

[audiomak23]

I would love to see them for all authenticator routes. Thanks

[EXTERNAL]

Hi @audiomak23https://github.com/audiomak23! Thanks for opening the request, will discuss internally with the team. Is this behavior you would expect to see for all of the Authenticator routes or just for MFA confirmation code input?

— Reply to this email directly, view it on GitHubhttps://github.com/aws-amplify/amplify-ui/issues/4254#issuecomment-1638857053, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A5NRT5TLNBCYP4TJ3BPEA4LXQWQEDANCNFSM6AAAAAA2NN7Z3U. You are receiving this because you were mentioned.Message ID: @.**@.>>

[audiomak23]

@calebpollman Any update on this?

[calebpollman]

@audiomak23 Since this may not be desired by default on all supported platforms it will require some thought around how we would approach supporting the requested behavior (if at all). Will add additional updates here, thanks for opening the request!

[Matthew-Grayson]

@audiomak23 or anyone who happens upon this issue, formFields can be modified to enable autoFocus for specific fields like so:

  const formFields = {
    signIn: {
      username: {
        label: 'Email',
        placeholder: 'Email',
        required: true,
        autoFocus: true
      },
      password: {
        label: 'Password',
        placeholder: 'Password',
        required: true
      }
    },
    confirmSignIn: {
      confirmation_code: {
        label: 'Enter 2FA Code from your authenticator app',
        autoFocus: true
      }
    }
  }

@calebpollman Adding more explicit instructions to your docs on how to auto-focus fields might be a suitable alternative to changing the default functionality.

[exptom]

@Matthew-Grayson this doesn't seem to work for the Vue components sadly, doesn't look like the autofocus property is passed through like it is for the react ones.