fix: MFA TOTP sign up - user is not set correctly (#2287)

* Fix error with signup

* Remove comment

* Changed from email to username

* Fixed username

* Fixed for existing users

* Fixed test, and removed additional setuser that was causing an issue

* Removed additional useAuthenticator call

* Updated user in next example

Co-authored-by: Erik Hanchett <[email protected]>

Author: ErikCH

.changeset/rare-bananas-destroy.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': patch
+---
+
+When first setting up TOTP with MFA the Authenticator is not returning the correct user object. This object did not contain the correct methods, and causes an error if you try to access those methods. This fix will now retrieve the correct user object when a user first sets up MFA TOTP.

examples/next/pages/ui/components/authenticator/sign-in-totp-mfa/index.page.tsx

@@ -8,10 +8,16 @@ Amplify.configure(awsExports);
 
 export default function SignInTotpMfa() {
   const formFields = { setupTOTP: { QR: { totpIssuer: 'My Web App' } } };
+
   return (
     <>
       <Authenticator formFields={formFields}>
-        {({ signOut }) => <button onClick={signOut}>Sign out</button>}
+        {({ signOut, user }) => (
+          <>
+            <span>{user.username}</span>
+            <button onClick={signOut}>Sign out</button>
+          </>
+        )}
       </Authenticator>
     </>
   );

packages/e2e/cypress/fixtures/Auth.signIn-mfa-setup.json

@@ -0,0 +1,8 @@
+{
+  "challengeName": "MFA_SETUP",
+  "username": "AmplifyUsername",
+  "challengeParameters": {
+    "MFAS_CAN_SETUP": "[\"SMS_MFA\",\"SOFTWARE_TOKEN_MFA\"]"
+  },
+  "session": "••••••"
+}

packages/e2e/cypress/fixtures/Auth.verifyTOTP.json

@@ -0,0 +1,10 @@
+{
+  "AuthenticationResult": {
+    "AccessToken": "***************",
+    "ExpiresIn": 3600,
+    "IdToken": "*****************",
+    "RefreshToken": "****************",
+    "TokenType": "Bearer"
+  },
+  "ChallengeParameters": {}
+}

packages/e2e/features/ui/components/authenticator/sign-in-totp-mfa.feature

@@ -57,4 +57,21 @@ Feature: Sign In with TOTP MFA
     And I click the "Change Password" button
     Then I see "Setup TOTP"
 
-
+@angular @react @vue
+  Scenario: Successful sign up shows correct username from authenticated user
+    When I click the "Create Account" tab
+    And I type a new "email"
+    And I type my password
+    And I confirm my password
+    And I click the "Create Account" button
+    Then I see "Confirmation Code"
+    And I type a valid confirmation code
+    And I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.ConfirmSignUp" } }' with fixture "confirm-sign-up-with-email"
+    And I mock 'Amplify.Auth.signIn' with fixture "Auth.signIn-mfa-setup"
+    And I click the "Confirm" button
+    Then I see "Setup TOTP"
+    Then I see "Code"
+    And I type a valid confirmation code
+    And I mock 'Amplify.Auth.verifyTotpToken' with fixture "Auth.verifyTOTP"
+    And I click the "Confirm" button
+    Then I see "AmplifyUsername"

packages/ui/src/machines/authenticator/actors/signIn.ts

@@ -343,11 +343,7 @@ export function signInActor({ services }: SignInMachineOptions) {
               invoke: {
                 src: 'verifyTotpToken',
                 onDone: {
-                  actions: [
-                    'setUser',
-                    'clearChallengeName',
-                    'clearRequiredAttributes',
-                  ],
+                  actions: ['clearChallengeName', 'clearRequiredAttributes'],
                   target: '#signInActor.resolved',
                 },
                 onError: {