fix(authenticator): propagate username from signUp actor to top level…

… machine (#4923)
aws-amplify · Jan 22, 2024 · d61690d · d61690d
1 parent 0ac1fab
commit d61690d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 24 deletions.
diff --git a/.changeset/new-badgers-attend.md b/.changeset/new-badgers-attend.md
@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui": patch
+"@aws-amplify/ui-vue": patch
+---
+
+fix(authenticator): propagate username from signUp actor to top level machine
diff --git a/packages/ui/src/machines/authenticator/actors/signUp.ts b/packages/ui/src/machines/authenticator/actors/signUp.ts
@@ -266,6 +266,7 @@ export function signUpActor({ services }: SignUpMachineOptions) {
             remoteError: context.remoteError,
             step: context.step,
             totpSecretCode: context.totpSecretCode,
+            username: context.username,
             unverifiedUserAttributes: context.unverifiedUserAttributes,
           }),
         },

diff --git a/packages/vue/src/components/__tests__/setup-totp.spec.ts b/packages/vue/src/components/__tests__/setup-totp.spec.ts
@@ -188,18 +188,6 @@ describe('SetupTotp', () => {
     );
   });
 
-  it('does not call getTotpCodeURL if totpCodeURL is not present', () => {
-    useAuthenticatorSpy.mockReturnValue(
-      reactive({
-        ...mockServiceFacade,
-        totpSecretCode: undefined,
-      })
-    );
-
-    render(SetupTotp, { global: { components } });
-    expect(getTotpCodeURLSpy).not.toHaveBeenCalled();
-  });
-
   it('renders error if present', async () => {
     useAuthenticatorSpy.mockReturnValueOnce(
       reactive({

diff --git a/packages/vue/src/components/setup-totp.vue b/packages/vue/src/components/setup-totp.vue
@@ -18,15 +18,14 @@ const logger = new Logger('SetupTotp-logger');
 
 // `facade` is manually typed to `UseAuthenticator` for temporary type safety.
 const facade: UseAuthenticator = useAuthenticator();
-const { updateForm, submitForm, toSignIn } = facade;
-const { error, isPending, QRFields, totpSecretCode, username } = toRefs(facade);
+const { updateForm, submitForm, toSignIn, totpSecretCode, username, QRFields } =
+  facade;
+const { error, isPending } = toRefs(facade);
 
-const { totpIssuer = 'AWSCognito', totpUsername = username.value } =
-  QRFields.value ?? {};
+const { totpIssuer = 'AWSCognito', totpUsername = username } = QRFields ?? {};
 
-const totpCodeURL = totpSecretCode.value
-  ? getTotpCodeURL(totpIssuer, totpUsername!, totpSecretCode.value)
-  : null;
+// `totpSecretCode` is typed as `string | null` but will always be populated by the machine here
+const totpCodeURL = getTotpCodeURL(totpIssuer, totpUsername, totpSecretCode!);
 
 const qrCode = reactive({
   qrCodeImageSource: '',
@@ -40,17 +39,14 @@ const { getCopyText, getCopiedText, getBackToSignInText, getConfirmText } =
 const copyTextLabel = ref(getCopyText());
 
 function copyText() {
-  if (totpSecretCode.value) {
-    navigator.clipboard.writeText(totpSecretCode.value);
+  if (totpSecretCode) {
+    navigator.clipboard.writeText(totpSecretCode);
   }
   copyTextLabel.value = getCopiedText();
 }
 
 // lifecycle hooks
 onMounted(async () => {
-  if (!username.value || !totpCodeURL) {
-    return;
-  }
   try {
     qrCode.qrCodeImageSource = await QRCode.toDataURL(totpCodeURL);
   } catch (error) {