fix: Issue with QR Code not being seen with MS Authenticator (#1838)

* Fix encoding setup totp URI

* Added test

* Added changeset

* Updated QR test

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

Author: ErikCH

.changeset/nice-candles-change.md

@@ -0,0 +1,7 @@
+---
+'@aws-amplify/ui-angular': patch
+'@aws-amplify/ui-react': patch
+'@aws-amplify/ui-vue': patch
+---
+
+Fixed bug with MS Authenticator not working with Setup TOTP page

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/setup-totp/setup-totp.component.ts

@@ -50,7 +50,9 @@ export class SetupTotpComponent implements OnInit {
       const issuer = this.formOverrides?.['QR']?.totpIssuer ?? 'AWSCognito';
       const username =
         this.formOverrides?.['QR']?.totpUsername ?? user.username;
-      const totpCode = `otpauth://totp/${issuer}:${username}?secret=${this.secretKey}&issuer=${issuer}`;
+      const totpCode = encodeURI(
+        `otpauth://totp/${issuer}:${username}?secret=${this.secretKey}&issuer=${issuer}`
+      );
 
       logger.info('totp code was generated:', totpCode);
       this.qrCodeSource = await QRCode.toDataURL(totpCode);

packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx

@@ -22,7 +22,9 @@ import { RouteContainer, RouteProps } from '../RouteContainer';
 const logger = new Logger('SetupTOTP-logger');
 
 export const getTotpCode = (issuer: string, username: string, secret: string) =>
-  `otpauth://totp/${issuer}:${username}?secret=${secret}&issuer=${issuer}`;
+  encodeURI(
+    `otpauth://totp/${issuer}:${username}?secret=${secret}&issuer=${issuer}`
+  );
 
 export const SetupTOTP = ({
   className,

packages/react/src/components/Authenticator/SetupTOTP/__tests__/SetupTOTP.test.tsx

@@ -88,4 +88,21 @@ describe('SetupTOTP', () => {
     expect(toDataURLSpy).toHaveBeenCalledTimes(1);
     expect(toDataURLSpy).toHaveBeenCalledWith(customTotpCode);
   });
+
+  describe('QR Tests', () => {
+    it('handles customTotpIssuer with spaces', async () => {
+      const customTotpIssuer = 'customTOTPIssuer spaces';
+      const customTotpUsername = 'customTotpUsername';
+
+      const customTotpCode = getTotpCode(
+        customTotpIssuer,
+        customTotpUsername,
+        SECRET_KEY
+      );
+
+      expect(customTotpCode).toBe(
+        'otpauth://totp/customTOTPIssuer%20spaces:customTotpUsername?secret=secretKey&issuer=customTOTPIssuer%20spaces'
+      );
+    });
+  });
 });

packages/vue/src/components/setup-totp.vue

@@ -57,7 +57,9 @@ onMounted(async () => {
     secretKey.value = await Auth.setupTOTP(user);
     const issuer = QROR?.totpIssuer ?? 'AWSCognito';
     const username = QROR?.totpUsername ?? user.username;
-    const totpCode = `otpauth://totp/${issuer}:${username}?secret=${secretKey.value}&issuer=${issuer}`;
+    const totpCode = encodeURI(
+      `otpauth://totp/${issuer}:${username}?secret=${secretKey.value}&issuer=${issuer}`
+    );
     qrCode.qrCodeImageSource = await QRCode.toDataURL(totpCode);
   } catch (error) {
     logger.error(error);