Unable to customize the totp username (SetupTOTP)

[mroest]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Next.js

Please describe your bug.

In Previous versions you could define which attribute to use for the TOTP username. This was together with the TOTP Issuer customisable.

It was addressed on https://github.com/aws-amplify/amplify-ui/issues/988 but the solution is (i think) not sufficient. With the fields props you are unable to set a value from the current user which is obviously the whole purpose of customising the field.

I believe the main use case for this is when have email for login and the username contains the uuid which is not very friendly to the user.

What's the expected behaviour?

A way to specify which of the user prop values to use for the username part in the setup totp URL. And with that improve the usability of the software MFA setup

Help us reproduce the bug!

Setup a userpool with email as login and software MFA required. That will give you an an UUID in the setuptotp url.

Code Snippet

// Put your code below this line.

Additional information and screenshots

No response

[ErikCH]

Hi @mroest !

So the idea being is that you can set some flag that would automatically set it to user.email instead of user.username?

[mroest]

Hi @mroest !

So the idea being is that you can set some flag that would automatically set it to user.email instead of user.username?

Yes, absolutely! And i believe this was available in older releases

[ErikCH]

@mroest ! I'm just looking at the code of our previous version to see how it was done before, and It looks like the user information was always hard coded as user.username. As seen here

The issuer was always customizable, which should now be available in the new version.

What is the purpose of this change? Would you also want to add another attribute instead? Or just user.email?

[mroest]

If the cognito user pool is configured to use email as username, the username becomes a UUID string. That UUID string is then displayed when you setup TOTP and add the account to your authenticator app. The user will have to change the uuid in the authenticator app since that has no meaning for the user. If you could display ie. the name or email from the cognito user props that would improve the setup totp experience.

[bwindsor]

I would also find this useful. It's also true that the username was never customizable in the old version, but being able to display email instead of UUID would be very helpful. So in the new version, you can already configure a hard coded username like this:

formFields={
  setupTOTP: {
      QR: {
        totpUsername: 'username',
      }
}

But a more flexible solution might be to allow totpUsername to also be a function which takes the user object as an argument, so then to set the TOTP username to be the email you would just do:

totpUsername: (user) => user.email

[nk9]

Just chipping in here to say that this would be very helpful. I'm testing/developing with multiple users in two environments on a Cognito User Pool which uses the email as the username. This means that I get many tokens in my Authenticator app, which can only be distinguished by the environment (by customizing the issuer). Which of the 6 TOTP codes in the current environment is the right one for the email and password I've just supplied? ~~I have to check in the Cognito User Pool to figure out which userId belongs to that email.~~ Update: I've just learned I can manually set the username by pressing the three dots in Google Authenticator, so that's a good workaround. Still, this should be the default for a User Pool set up this way. Pretty poor UX right now.

The solution proposed by @bwindsor would solve this perfectly, assuming that the email was available in the user object at the time this component is displayed.

[shkomg]

i see that qr code generates every time user object updates, and after email confirmation username gets changed to id. Also in that user object no email is present. Best solution to somehow provide also email address in that object in case it is intended to be used inside Authenticator component. This way we just use user.email instead of user.username and all will work.

[matborowiak]

At setupTOTP auth route there is no email available. I have checked the entire authenticator context.

If email attribute was available on user object we could simply do:

const { user } = useAuthenticator((context) => [context.user]);

const formFields = {
  setupTOTP: {
    QR: {
      totpUsername: user.attributes.email,
  }
}

return (<Authenticator formFields={formFields} />)

@ErikCH am I missing out on something? Or could someone please fix access to email for us here?

[calebpollman]

@matborowiak As the current user has not been authenticated at this point in the sign in flow, user will not have private attiributes exposed to the client. To achieve the desired functionality, have you tried storing the current user's email in local state when they initially enter the email and then passing it to the formFields prop?

[calebpollman]

Closing due to inactivity. Passing a custom TOTP username is supported by usage of the FormFields property