chore: address feedback

aws-amplify · Feb 22, 2025 · 7f27d61 · 7f27d61
1 parent de9956d
commit 7f27d61
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 104 deletions.
diff --git a/...es/next/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/index.page.tsx b/...es/next/pages/ui/components/authenticator/sign-in-with-email-mfa-selection/index.page.tsx
@@ -1,10 +1,10 @@
 import { Amplify } from 'aws-amplify';
-
+import { AuthContext } from '@aws-amplify/ui';
 import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
-import { AuthContext } from '@aws-amplify/ui';
+
 Amplify.configure(awsExports);
 
 const customServices: AuthContext['services'] = {
@@ -23,6 +23,11 @@ const customServices: AuthContext['services'] = {
         isSignedIn: false,
         nextStep: {
           signInStep: 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE',
+          codeDeliveryDetails: {
+            destination: 'a***@e***.com',
+            deliveryMedium: 'EMAIL',
+            attributeName: 'email',
+          },
         },
       };
     }

diff --git a/...t/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/index.page.tsx b/...t/pages/ui/components/authenticator/sign-in-with-email-mfa-setup-selection/index.page.tsx
@@ -1,10 +1,10 @@
 import { Amplify } from 'aws-amplify';
-
+import { AuthContext, emailRegex } from '@aws-amplify/ui';
 import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
-import { AuthContext, emailRegex } from '@aws-amplify/ui';
+
 Amplify.configure(awsExports);
 
 const customServices: AuthContext['services'] = {
@@ -17,15 +17,6 @@ const customServices: AuthContext['services'] = {
       },
     };
   },
-  handleAutoSignIn: async () => {
-    return {
-      isSignedIn: false,
-      nextStep: {
-        signInStep: 'CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION',
-        allowedMFATypes: ['EMAIL', 'TOTP'],
-      },
-    };
-  },
   handleSignIn: async () => {
     return {
       isSignedIn: false,
@@ -77,7 +68,7 @@ const customServices: AuthContext['services'] = {
 
 export default function App() {
   return (
-    <Authenticator initialState="signUp" services={customServices}>
+    <Authenticator services={customServices}>
       {({ signOut, user }) => (
         <main>
           <h1>Hello {user.username}</h1>

diff --git a/examples/next/pages/ui/components/authenticator/sign-in-with-email-mfa/index.page.tsx b/examples/next/pages/ui/components/authenticator/sign-in-with-email-mfa/index.page.tsx
@@ -1,10 +1,10 @@
 import { Amplify } from 'aws-amplify';
-
+import { AuthContext } from '@aws-amplify/ui';
 import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
-import { AuthContext } from '@aws-amplify/ui';
+
 Amplify.configure(awsExports);
 
 const customServices: AuthContext['services'] = {

diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-with-email-mfa-selection.feature b/packages/e2e/features/ui/components/authenticator/sign-in-with-email-mfa-selection.feature
@@ -8,7 +8,7 @@ Feature: Sign In with Email MFA Selection
         When I type my "username" with status "CONFIRMED"
         Then I type my password
         Then I click the "Sign in" button
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Confirm Email Code"
         Then I type a valid confirmation code
@@ -18,7 +18,7 @@ Feature: Sign In with Email MFA Selection
 
     @react
     Scenario: Sign In, Observe MFA Selection Screen, and Navigate Back to Sign In Page
-        When I type my "username" with status "CONFIRMED'"
+        When I type my "username" with status "CONFIRMED"
         Then I type my password
         Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication"
@@ -30,7 +30,7 @@ Feature: Sign In with Email MFA Selection
         When I type my "username" with status "CONFIRMED"
         Then I type my password
         Then I click the "Sign in" button
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Confirm Email Code"
         Then I click the "Back to Sign In" button
@@ -41,7 +41,7 @@ Feature: Sign In with Email MFA Selection
         When I type my "username" with status "CONFIRMED"
         Then I type my password
         Then I click the "Sign in" button
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Confirm Email Code"
         Then I type an invalid confirmation code

diff --git a/...s/e2e/features/ui/components/authenticator/sign-in-with-email-mfa-setup-selection.feature b/...s/e2e/features/ui/components/authenticator/sign-in-with-email-mfa-setup-selection.feature
@@ -4,13 +4,12 @@ Feature: Sign In with Email MFA Setup Selection
         Given I'm running the example "ui/components/authenticator/sign-in-with-email-mfa-setup-selection"
 
     @react
-    Scenario: Sign Up and Auto Sign In With Email MFA Setup Selection
-        When I type a new "username"
+    Scenario: Sign In With Email MFA Setup Selection
+        When I type my "username" with status "CONFIRMED"
         Then I type my password
-        Then I confirm my password
-        Then I click the "Create Account" button
+        Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication Setup"
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Setup Email"
         Then I type my "email" with status "UNCONFIRMED"
@@ -22,19 +21,18 @@ Feature: Sign In with Email MFA Setup Selection
         Then I see "Sign In"
 
     @react
-    Scenario: Sign Up, Auto Sign In, Observe MFA Setup Selection Screen, Navigate Back To Sign In Page, and Sign In
-        When I type a new "username"
+    Scenario: Sign In, Observe MFA Setup Selection Screen, Navigate Back To Sign In Page, and Sign In
+        When I type my "username" with status "CONFIRMED"
         Then I type my password
-        Then I confirm my password
-        Then I click the "Create Account" button
+        Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication Setup"
         Then I click the "Back to Sign In" button
         Then I see "Sign In"
         Then I type my "username" with status "CONFIRMED"
         Then I type my password
         Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication Setup"
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Setup Email"
         Then I type my "email" with status "UNCONFIRMED"
@@ -46,13 +44,12 @@ Feature: Sign In with Email MFA Setup Selection
         Then I see "Sign In"
 
     @react
-    Scenario: Sign Up, Auto Sign In, Select Email MFA Type For Setup, Observe Setup Email Screen, Navigate Back To Sign In Page, and Sign In
-        When I type a new "username"
+    Scenario: Sign In, Select Email MFA Type For Setup, Observe Setup Email Screen, Navigate Back To Sign In Page, and Sign In
+        When I type my "username" with status "CONFIRMED"
         Then I type my password
-        Then I confirm my password
-        Then I click the "Create Account" button
+        Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication Setup"
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Setup Email"
         Then I click the "Back to Sign In" button
@@ -61,7 +58,7 @@ Feature: Sign In with Email MFA Setup Selection
         Then I type my password
         Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication Setup"
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Setup Email"
         Then I type my "email" with status "UNCONFIRMED"
@@ -73,13 +70,12 @@ Feature: Sign In with Email MFA Setup Selection
         Then I see "Sign In"
 
     @react
-    Scenario: Sign Up, Auto Sign In, Select Email MFA Type For Setup, Setup Email, Observe Confirmation Code Screen, Navigate Back To Sign In Page, and Sign In
-        When I type a new "username"
+    Scenario: Sign In, Select Email MFA Type For Setup, Setup Email, Observe Confirmation Code Screen, Navigate Back To Sign In Page, and Sign In
+        When I type my "username" with status "CONFIRMED"
         Then I type my password
-        Then I confirm my password
-        Then I click the "Create Account" button
+        Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication Setup"
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Setup Email"
         Then I type my "email" with status "CONFIRMED"
@@ -91,7 +87,7 @@ Feature: Sign In with Email MFA Setup Selection
         Then I type my password
         Then I click the "Sign in" button
         Then I see "Multi-Factor Authentication Setup"
-        Then I click the "EMAIL" radio button
+        Then I click the "Email" radio button
         Then I click the "Confirm" button
         Then I see "Setup Email"
         Then I type my "email" with status "UNCONFIRMED"

diff --git a/packages/react/src/components/Authenticator/SelectMfaType/SelectMfaType.tsx b/packages/react/src/components/Authenticator/SelectMfaType/SelectMfaType.tsx
@@ -7,18 +7,22 @@ import { useCustomComponents } from '../hooks/useCustomComponents';
 import { useFormHandlers } from '../hooks/useFormHandlers';
 import { ConfirmSignInFooter } from '../shared/ConfirmSignInFooter';
 import { RemoteErrorMessage } from '../shared/RemoteErrorMessage';
-import { FormFields } from '../shared/FormFields';
 import { RouteContainer, RouteProps } from '../RouteContainer';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { RadioGroupField, Radio } from '../../../primitives';
 
-const { getSelectMfaTypeByChallengeName } = authenticatorTextUtil;
+const {
+  getMfaTypeLabelByValue,
+  getSelectMfaTypeByChallengeName,
+  getSelectMfaTypeText,
+} = authenticatorTextUtil;
 
 export const SelectMfaType = ({
   className,
   variation,
 }: RouteProps): JSX.Element => {
-  const { isPending } = useAuthenticator((context) => {
-    return [context.isPending];
+  const { isPending, allowedMfaTypes = [] } = useAuthenticator((context) => {
+    return [context.isPending, context.allowedMfaTypes];
   });
 
   const { handleChange, handleSubmit } = useFormHandlers();
@@ -46,7 +50,20 @@ export const SelectMfaType = ({
           <Header />
 
           <Flex direction="column">
-            <FormFields />
+            <RadioGroupField
+              name="mfa_type"
+              legend={getSelectMfaTypeText()}
+              legendHidden
+              isDisabled={isPending}
+              isRequired
+            >
+              {allowedMfaTypes.map((value) => (
+                <Radio name="mfa_type" key={value} value={value}>
+                  {getMfaTypeLabelByValue(value)}
+                </Radio>
+              ))}
+            </RadioGroupField>
+
             <RemoteErrorMessage />
           </Flex>
 

diff --git a/packages/react/src/components/Authenticator/SelectMfaType/__tests__/SelectMfaType.test.tsx b/packages/react/src/components/Authenticator/SelectMfaType/__tests__/SelectMfaType.test.tsx
@@ -17,7 +17,7 @@ jest.mock('../../hooks/useCustomComponents', () => ({
   }),
 }));
 
-const fieldLabel = 'Select MFA Type';
+const fieldLabel = 'Email Message';
 const fieldInput = { name: 'mfa_type', value: 'EMAIL' };
 
 const mockUpdateForm = jest.fn();
@@ -36,24 +36,6 @@ const mockUseAuthenticatorOutput: Partial<UseAuthenticator> = {
   updateForm: mockUpdateForm,
   allowedMfaTypes: ['EMAIL', 'TOTP'],
   validationErrors: {} as AuthenticatorServiceFacade['validationErrors'],
-  fields: [
-    {
-      name: 'mfa_type',
-      label: fieldLabel,
-      required: true,
-      type: 'radio',
-      radioOptions: [
-        {
-          label: 'EMAIL',
-          value: 'EMAIL',
-        },
-        {
-          label: 'TOTP',
-          value: 'TOTP',
-        },
-      ],
-    },
-  ],
 };
 
 mockUseAuthenticator.mockReturnValue(mockUseAuthenticatorOutput as any);
@@ -69,18 +51,14 @@ describe('SelectMfaType', () => {
   });
 
   it('renders as expected ', () => {
-    const mathRandomSpy = jest.spyOn(Math, 'random').mockReturnValue(0.1);
-
     const { container } = render(<SelectMfaType {...props} />);
     expect(container).toMatchSnapshot();
-
-    mathRandomSpy.mockRestore();
   });
 
   it('sends change event on form input', async () => {
     render(<SelectMfaType {...props} />);
 
-    const radioButton = await screen.findByText(fieldInput.value);
+    const radioButton = await screen.findByText(fieldLabel);
 
     fireEvent.click(radioButton);
 
@@ -90,7 +68,7 @@ describe('SelectMfaType', () => {
   it('sends submit event on form submit', async () => {
     render(<SelectMfaType {...props} />);
 
-    const radioButton = await screen.findByText(fieldInput.value);
+    const radioButton = await screen.findByText(fieldLabel);
 
     fireEvent.click(radioButton);
 

diff --git a/...omponents/Authenticator/SelectMfaType/__tests__/__snapshots__/SelectMfaType.test.tsx.snap b/...omponents/Authenticator/SelectMfaType/__tests__/__snapshots__/SelectMfaType.test.tsx.snap
@@ -28,8 +28,6 @@ exports[`SelectMfaType renders as expected  1`] = `
             >
               <fieldset
                 class="amplify-flex amplify-fieldset amplify-fieldset--plain amplify-field amplify-radiogroupfield"
-                label="Select MFA Type"
-                required=""
                 role="radiogroup"
               >
                 <legend
@@ -39,26 +37,27 @@ exports[`SelectMfaType renders as expected  1`] = `
                 </legend>
                 <div
                   aria-hidden="true"
-                  class="amplify-fieldset__legend"
+                  class="amplify-fieldset__legend amplify-visually-hidden"
                 >
                   Select MFA Type
                 </div>
                 <div
                   class="amplify-flex amplify-radiogroup"
-                  id="amplify-id-:r1:"
+                  id="amplify-id-:r0:"
                 >
                   <label
                     class="amplify-flex amplify-radio"
                   >
                     <span
                       class="amplify-text amplify-radio__label"
                     >
-                      EMAIL
+                      Email Message
                     </span>
                     <input
                       aria-invalid="false"
                       class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                       name="mfa_type"
+                      required=""
                       type="radio"
                       value="EMAIL"
                     />
@@ -73,12 +72,13 @@ exports[`SelectMfaType renders as expected  1`] = `
                     <span
                       class="amplify-text amplify-radio__label"
                     >
-                      TOTP
+                      Authenticator App (TOTP)
                     </span>
                     <input
                       aria-invalid="false"
                       class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                       name="mfa_type"
+                      required=""
                       type="radio"
                       value="TOTP"
                     />