chore: address feedback

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

Hide file tree

Showing 22 changed files with 122 additions and 154 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/cypress/integration/common/shared.ts b/packages/e2e/cypress/integration/common/shared.ts
@@ -345,7 +345,10 @@ When('I click the {string} checkbox', (label: string) => {
 });
 
 When('I click the {string} radio button', (label: string) => {
-  cy.get(`.amplify-radio__label`).contains(label).click();
+  cy.findByLabelText(new RegExp(`^${escapeRegExp(label)}`, 'i')).click({
+    // see above comment
+    force: true,
+  });
 });
 
 When('I reload the page', () => {

diff --git a/packages/e2e/cypress/integration/common/sign-in.ts b/packages/e2e/cypress/integration/common/sign-in.ts
@@ -37,7 +37,3 @@ When(
 When('I type my password', () => {
   cy.findInputField('Password').type(Cypress.env('VALID_PASSWORD'));
 });
-
-When('I select the MFA type {string}', (mfaType: string) => {
-  cy.get(`.amplify-radio__label`).contains(mfaType).click();
-});
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-core/src/Authenticator/hooks/constants.ts b/packages/react-core/src/Authenticator/hooks/constants.ts
@@ -10,12 +10,12 @@ export const COMPONENT_ROUTE_KEYS: AuthenticatorRouteComponentKey[] = [
   'confirmVerifyUser',
   'forceNewPassword',
   'forgotPassword',
+  'selectMfaType',
+  'setupEmail',
   'setupTotp',
   'signIn',
   'signUp',
   'verifyUser',
-  'setupEmail',
-  'selectMfaType',
 ];
 
 export const COMPONENT_ROUTE_NAMES: AuthenticatorRouteComponentName[] = [
@@ -25,10 +25,10 @@ export const COMPONENT_ROUTE_NAMES: AuthenticatorRouteComponentName[] = [
   'ConfirmVerifyUser',
   'ForceNewPassword',
   'ForgotPassword',
+  'SelectMfaType',
+  'SetupEmail',
   'SetupTotp',
   'SignIn',
   'SignUp',
   'VerifyUser',
-  'SetupEmail',
-  'SelectMfaType',
 ];
diff --git a/packages/react-core/src/Authenticator/hooks/types.ts b/packages/react-core/src/Authenticator/hooks/types.ts
@@ -15,12 +15,12 @@ export type AuthenticatorRouteComponentKey =
   | 'confirmVerifyUser'
   | 'forceNewPassword'
   | 'forgotPassword'
+  | 'selectMfaType'
+  | 'setupEmail'
   | 'setupTotp'
   | 'signIn'
   | 'signUp'
-  | 'verifyUser'
-  | 'setupEmail'
-  | 'selectMfaType';
+  | 'verifyUser';
 
 export type AuthenticatorLegacyField = LegacyFormFieldOptions;
 export type AuthenticatorLegacyFields = AuthenticatorLegacyField[];
@@ -178,12 +178,12 @@ export interface DefaultProps<FieldType = {}> {
   ConfirmVerifyUser: ConfirmVerifyUserProps<FieldType>;
   ForceNewPassword: ForceResetPasswordBaseProps<FieldType>;
   ForgotPassword: ResetPasswordBaseProps<FieldType>;
+  SelectMfaType: SelectMfaTypeBaseProps<FieldType>;
+  SetupEmail: SetupEmailBaseProps<FieldType>;
   SetupTotp: SetupTotpBaseProps<FieldType>;
   SignIn: SignInBaseProps<FieldType>;
   SignUp: SignUpBaseProps<FieldType>;
   VerifyUser: VerifyUserProps<FieldType>;
-  SetupEmail: SetupEmailBaseProps<FieldType>;
-  SelectMfaType: SelectMfaTypeBaseProps<FieldType>;
 }
 
 /**

diff --git a/packages/react-core/src/Authenticator/hooks/useAuthenticator/types.ts b/packages/react-core/src/Authenticator/hooks/useAuthenticator/types.ts
@@ -19,10 +19,10 @@ export type AuthenticatorRouteComponentKey =
   | 'confirmSignUp'
   | 'confirmVerifyUser'
   | 'forgotPassword'
-  | 'setupTotp'
-  | 'verifyUser'
+  | 'selectMfa'
   | 'setupEmail'
-  | 'selectMfa';
+  | 'setupTotp'
+  | 'verifyUser';
 
 export type AuthenticatorLegacyFields = LegacyFormFieldOptions[];
 

diff --git a/packages/react-core/src/Authenticator/hooks/useAuthenticatorRoute/__tests__/utils.spec.ts b/packages/react-core/src/Authenticator/hooks/useAuthenticatorRoute/__tests__/utils.spec.ts
@@ -23,12 +23,12 @@ import {
   resolveConfirmVerifyUserRoute,
   resolveForceNewPasswordRoute,
   resolveForgotPasswordRoute,
+  resolveSelectMfaTypeRoute,
+  resolveSetupEmailRoute,
   resolveSetupTotpRoute,
   resolveSignInRoute,
   resolveSignUpRoute,
   resolveVerifyUserRoute,
-  resolveSetupEmailRoute,
-  resolveSelectMfaTypeRoute,
 } from '../utils';
 
 type PropsResolver = (
@@ -165,6 +165,12 @@ describe('props resolver functions', () => {
       resolveForgotPasswordRoute,
       { error, isPending, toSignIn },
     ],
+    [
+      'SelectMfaType',
+      resolveSelectMfaTypeRoute,
+      { error, isPending, challengeName, toSignIn },
+    ],
+    ['SetupEmail', resolveSetupEmailRoute, { error, isPending, toSignIn }],
     [
       'SetupTotp',
       resolveSetupTotpRoute,
@@ -201,12 +207,6 @@ describe('props resolver functions', () => {
       resolveVerifyUserRoute,
       { error, isPending, skipVerification },
     ],
-    ['SetupEmail', resolveSetupEmailRoute, { error, isPending, toSignIn }],
-    [
-      'SelectMfaType',
-      resolveSelectMfaTypeRoute,
-      { error, isPending, challengeName, toSignIn },
-    ],
   ])(
     'resolve%s returns the expected values',
     (key, resolver, routeSpecificProps) => {

diff --git a/packages/react-core/src/Authenticator/hooks/useAuthenticatorRoute/constants.ts b/packages/react-core/src/Authenticator/hooks/useAuthenticatorRoute/constants.ts
@@ -14,10 +14,10 @@ import {
   ResetPasswordMachineKey,
   SignInMachineKey,
   SignUpMachineKey,
+  SelectMfaMachineKey,
+  SetupEmailMachineKey,
   SetupTotpMachineKey,
   VerifyUserMachineKey,
-  SetupEmailMachineKey,
-  SelectMfaMachineKey,
 } from './types';
 
 export const EVENT_HANDLER_KEY_MAP: Record<
@@ -117,8 +117,8 @@ export const MACHINE_PROP_KEYS: Record<
   signIn: SIGN_IN_MACHINE_KEYS,
   signUp: SIGN_UP_MACHINE_KEYS,
   forgotPassword: RESET_PASSWORD_MACHINE_KEYS,
-  setupTotp: SETUP_TOTP_MACHINE_KEYS,
-  setupEmail: SETUP_EMAIL_MACHINE_KEY,
   selectMfaType: SELECT_MFA_MACHINE_KEYS,
+  setupEmail: SETUP_EMAIL_MACHINE_KEY,
+  setupTotp: SETUP_TOTP_MACHINE_KEYS,
   verifyUser: VERIFY_USER_MACHINE_KEYS,
 };