@aws-amplify/ui-react-core 3.3.5 → 3.4.0

package/dist/esm/Authenticator/hooks/constants.mjs

@@ -5,6 +5,8 @@ const COMPONENT_ROUTE_KEYS = [
     'confirmVerifyUser',
     'forceNewPassword',
     'forgotPassword',
+    'selectMfaType',
+    'setupEmail',
     'setupTotp',
     'signIn',
     'signUp',
@@ -17,6 +19,8 @@ const COMPONENT_ROUTE_NAMES = [
     'ConfirmVerifyUser',
     'ForceNewPassword',
     'ForgotPassword',
+    'SelectMfaType',
+    'SetupEmail',
     'SetupTotp',
     'SignIn',
     'SignUp',

package/dist/esm/Authenticator/hooks/useAuthenticator/useAuthenticator.mjs

@@ -22,20 +22,19 @@ function useAuthenticator(selector) {
     // not update on external sign in events (for example when a user is not using the `Authenticator`).
     const { authStatus } = context;
     const facade = useSelector(service, xstateSelector, comparator);
-    const { route, totpSecretCode, unverifiedUserAttributes, user, ...rest } = facade;
+    const { route, totpSecretCode, user, ...rest } = facade;
     // do not memoize output. `service.getSnapshot` reference remains stable preventing
     // `fields` from updating with current form state on value changes
     const serviceSnapshot = service.getSnapshot();
     // legacy `QRFields` values only used for SetupTotp page to retrieve issuer information, will be removed in future
     const QRFields = route === 'setupTotp' ? getQRFields(serviceSnapshot) : null;
     // legacy `formFields` values required until form state is removed from state machine
-    const fields = getMachineFields(route, serviceSnapshot, unverifiedUserAttributes);
+    const fields = getMachineFields(route, serviceSnapshot);
     return {
         ...rest,
         authStatus,
         route,
         totpSecretCode,
-        unverifiedUserAttributes,
         user,
         /** @deprecated For internal use only */
         fields,

package/dist/esm/Authenticator/hooks/useAuthenticator/utils.mjs

@@ -1,4 +1,4 @@
-import { getActorContext, getSortedFormFields, isString, areEmptyArrays, areEmptyObjects } from '@aws-amplify/ui';
+import { getActorContext, getSortedFormFields, isString, authenticatorTextUtil, areEmptyArrays, areEmptyObjects } from '@aws-amplify/ui';
 import { isComponentRouteKey } from '../utils.mjs';
 
 const defaultComparator = () => false;
@@ -29,7 +29,7 @@ const getQRFields = (state) => ({
     ...getActorContext(state)?.formFields?.setupTotp?.QR,
 });
 const flattenFormFields = (fields) => fields.flatMap(([name, options]) => ({ name, ...options }));
-const convertContactMethodsToFields = (unverifiedUserAttributes) => {
+const convertContactMethodsToFields = (unverifiedUserAttributes = {}) => {
     return (unverifiedUserAttributes &&
         Object.entries(unverifiedUserAttributes).map(([name, value]) => {
             const valueIsString = isString(value);
@@ -39,15 +39,27 @@ const convertContactMethodsToFields = (unverifiedUserAttributes) => {
             return { name, label: value, type: 'radio', value };
         }));
 };
+const convertAllowedMfaTypesToFields = (allowedMfaTypes = []) => {
+    return allowedMfaTypes.map((mfaType) => ({
+        name: 'mfa_type',
+        label: authenticatorTextUtil.getMfaTypeLabelByValue(mfaType),
+        type: 'radio',
+        value: mfaType,
+    }));
+};
 /**
  * Retrieves default and custom (RWA only, to be updated) form field values from state machine
  * for subcomponent routes that render fields
  */
-const getMachineFields = (route, state, unverifiedUserAttributes) => {
+const getMachineFields = (route, state) => {
     if (isComponentRouteKey(route)) {
-        return route === 'verifyUser'
-            ? convertContactMethodsToFields(unverifiedUserAttributes)
-            : flattenFormFields(getSortedFormFields(route, state));
+        if (route === 'verifyUser') {
+            return convertContactMethodsToFields(getActorContext(state).unverifiedUserAttributes);
+        }
+        if (route === 'selectMfaType') {
+            return convertAllowedMfaTypesToFields(getActorContext(state).allowedMfaTypes);
+        }
+        return flattenFormFields(getSortedFormFields(route, state));
     }
     return [];
 };

package/dist/esm/Authenticator/hooks/useAuthenticatorRoute/constants.mjs

@@ -61,6 +61,15 @@ const SETUP_TOTP_MACHINE_KEYS = [
     'totpSecretCode',
     'username',
 ];
+const SETUP_EMAIL_MACHINE_KEY = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toSignIn',
+];
+const SELECT_MFA_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'challengeName',
+    'toSignIn',
+];
 const VERIFY_USER_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
     'skipVerification',
@@ -74,6 +83,8 @@ const MACHINE_PROP_KEYS = {
     signIn: SIGN_IN_MACHINE_KEYS,
     signUp: SIGN_UP_MACHINE_KEYS,
     forgotPassword: RESET_PASSWORD_MACHINE_KEYS,
+    selectMfaType: SELECT_MFA_MACHINE_KEYS,
+    setupEmail: SETUP_EMAIL_MACHINE_KEY,
     setupTotp: SETUP_TOTP_MACHINE_KEYS,
     verifyUser: VERIFY_USER_MACHINE_KEYS,
 };

package/dist/esm/Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.mjs

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import useAuthenticator from '../useAuthenticator/useAuthenticator.mjs';
-import { getRouteMachineSelector, resolveDefault, resolveVerifyUserRoute, resolveSignUpRoute, resolveSignInRoute, resolveSetupTotpRoute, resolveForgotPasswordRoute, resolveForceNewPasswordRoute, resolveConfirmVerifyUserRoute, resolveConfirmSignUpRoute, resolveConfirmSignInRoute, resolveConfirmResetPasswordRoute, routeSelector } from './utils.mjs';
+import { getRouteMachineSelector, resolveDefault, resolveVerifyUserRoute, resolveSignUpRoute, resolveSignInRoute, resolveSetupTotpRoute, resolveSetupEmailRoute, resolveSelectMfaTypeRoute, resolveForgotPasswordRoute, resolveForceNewPasswordRoute, resolveConfirmVerifyUserRoute, resolveConfirmSignUpRoute, resolveConfirmSignInRoute, resolveConfirmResetPasswordRoute, routeSelector } from './utils.mjs';
 
 function useAuthenticatorRoute({ components, }) {
     const { route } = useAuthenticator(routeSelector);
@@ -11,7 +11,7 @@ function useAuthenticatorRoute({ components, }) {
     // Only state machine props specified by the current `routeSelector` will have their current value
     // returned by `useAuthenticator`, non-machine props returned will always be the current value
     const routeSelectorProps = useAuthenticator(routeMachineSelector);
-    const { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ForgotPassword, SetupTotp, SignIn, SignUp, VerifyUser, } = components;
+    const { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ForgotPassword, SelectMfaType, SetupEmail, SetupTotp, SignIn, SignUp, VerifyUser, } = components;
     switch (route) {
         case 'confirmResetPassword': {
             return resolveConfirmResetPasswordRoute(ConfirmResetPassword, routeSelectorProps);
@@ -31,6 +31,12 @@ function useAuthenticatorRoute({ components, }) {
         case 'forgotPassword': {
             return resolveForgotPasswordRoute(ForgotPassword, routeSelectorProps);
         }
+        case 'selectMfaType': {
+            return resolveSelectMfaTypeRoute(SelectMfaType, routeSelectorProps);
+        }
+        case 'setupEmail': {
+            return resolveSetupEmailRoute(SetupEmail, routeSelectorProps);
+        }
         case 'setupTotp': {
             return resolveSetupTotpRoute(SetupTotp, routeSelectorProps);
         }

package/dist/esm/Authenticator/hooks/useAuthenticatorRoute/utils.mjs

@@ -80,6 +80,24 @@ function resolveSetupTotpRoute(Component, props) {
         },
     };
 }
+function resolveSetupEmailRoute(Component, props) {
+    return {
+        Component,
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('setupEmail', props),
+        },
+    };
+}
+function resolveSelectMfaTypeRoute(Component, props) {
+    return {
+        Component,
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('selectMfaType', props),
+        },
+    };
+}
 function resolveSignInRoute(Component, props) {
     // default `hideSignUp` to false
     const hideSignUp = false;
@@ -114,4 +132,4 @@ function resolveDefault() {
     };
 }
 
-export { getRouteMachineSelector, resolveConfirmResetPasswordRoute, resolveConfirmSignInRoute, resolveConfirmSignUpRoute, resolveConfirmVerifyUserRoute, resolveDefault, resolveForceNewPasswordRoute, resolveForgotPasswordRoute, resolveSetupTotpRoute, resolveSignInRoute, resolveSignUpRoute, resolveVerifyUserRoute, routeSelector };
+export { getRouteMachineSelector, resolveConfirmResetPasswordRoute, resolveConfirmSignInRoute, resolveConfirmSignUpRoute, resolveConfirmVerifyUserRoute, resolveDefault, resolveForceNewPasswordRoute, resolveForgotPasswordRoute, resolveSelectMfaTypeRoute, resolveSetupEmailRoute, resolveSetupTotpRoute, resolveSignInRoute, resolveSignUpRoute, resolveVerifyUserRoute, routeSelector };

package/dist/index.js

@@ -88,6 +88,8 @@ const COMPONENT_ROUTE_KEYS = [
     'confirmVerifyUser',
     'forceNewPassword',
     'forgotPassword',
+    'selectMfaType',
+    'setupEmail',
     'setupTotp',
     'signIn',
     'signUp',
@@ -100,6 +102,8 @@ const COMPONENT_ROUTE_NAMES = [
     'ConfirmVerifyUser',
     'ForceNewPassword',
     'ForgotPassword',
+    'SelectMfaType',
+    'SetupEmail',
     'SetupTotp',
     'SignIn',
     'SignUp',
@@ -155,7 +159,7 @@ const getQRFields = (state) => ({
     ...ui.getActorContext(state)?.formFields?.setupTotp?.QR,
 });
 const flattenFormFields = (fields) => fields.flatMap(([name, options]) => ({ name, ...options }));
-const convertContactMethodsToFields = (unverifiedUserAttributes) => {
+const convertContactMethodsToFields = (unverifiedUserAttributes = {}) => {
     return (unverifiedUserAttributes &&
         Object.entries(unverifiedUserAttributes).map(([name, value]) => {
             const valueIsString = ui.isString(value);
@@ -165,15 +169,27 @@ const convertContactMethodsToFields = (unverifiedUserAttributes) => {
             return { name, label: value, type: 'radio', value };
         }));
 };
+const convertAllowedMfaTypesToFields = (allowedMfaTypes = []) => {
+    return allowedMfaTypes.map((mfaType) => ({
+        name: 'mfa_type',
+        label: ui.authenticatorTextUtil.getMfaTypeLabelByValue(mfaType),
+        type: 'radio',
+        value: mfaType,
+    }));
+};
 /**
  * Retrieves default and custom (RWA only, to be updated) form field values from state machine
  * for subcomponent routes that render fields
  */
-const getMachineFields = (route, state, unverifiedUserAttributes) => {
+const getMachineFields = (route, state) => {
     if (isComponentRouteKey(route)) {
-        return route === 'verifyUser'
-            ? convertContactMethodsToFields(unverifiedUserAttributes)
-            : flattenFormFields(ui.getSortedFormFields(route, state));
+        if (route === 'verifyUser') {
+            return convertContactMethodsToFields(ui.getActorContext(state).unverifiedUserAttributes);
+        }
+        if (route === 'selectMfaType') {
+            return convertAllowedMfaTypesToFields(ui.getActorContext(state).allowedMfaTypes);
+        }
+        return flattenFormFields(ui.getSortedFormFields(route, state));
     }
     return [];
 };
@@ -194,20 +210,19 @@ function useAuthenticator(selector) {
     // not update on external sign in events (for example when a user is not using the `Authenticator`).
     const { authStatus } = context;
     const facade = react.useSelector(service, xstateSelector, comparator);
-    const { route, totpSecretCode, unverifiedUserAttributes, user, ...rest } = facade;
+    const { route, totpSecretCode, user, ...rest } = facade;
     // do not memoize output. `service.getSnapshot` reference remains stable preventing
     // `fields` from updating with current form state on value changes
     const serviceSnapshot = service.getSnapshot();
     // legacy `QRFields` values only used for SetupTotp page to retrieve issuer information, will be removed in future
     const QRFields = route === 'setupTotp' ? getQRFields(serviceSnapshot) : null;
     // legacy `formFields` values required until form state is removed from state machine
-    const fields = getMachineFields(route, serviceSnapshot, unverifiedUserAttributes);
+    const fields = getMachineFields(route, serviceSnapshot);
     return {
         ...rest,
         authStatus,
         route,
         totpSecretCode,
-        unverifiedUserAttributes,
         user,
         /** @deprecated For internal use only */
         fields,
@@ -370,6 +385,15 @@ const SETUP_TOTP_MACHINE_KEYS = [
     'totpSecretCode',
     'username',
 ];
+const SETUP_EMAIL_MACHINE_KEY = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'toSignIn',
+];
+const SELECT_MFA_MACHINE_KEYS = [
+    ...COMMON_ROUTE_MACHINE_KEYS,
+    'challengeName',
+    'toSignIn',
+];
 const VERIFY_USER_MACHINE_KEYS = [
     ...COMMON_ROUTE_MACHINE_KEYS,
     'skipVerification',
@@ -383,6 +407,8 @@ const MACHINE_PROP_KEYS = {
     signIn: SIGN_IN_MACHINE_KEYS,
     signUp: SIGN_UP_MACHINE_KEYS,
     forgotPassword: RESET_PASSWORD_MACHINE_KEYS,
+    selectMfaType: SELECT_MFA_MACHINE_KEYS,
+    setupEmail: SETUP_EMAIL_MACHINE_KEY,
     setupTotp: SETUP_TOTP_MACHINE_KEYS,
     verifyUser: VERIFY_USER_MACHINE_KEYS,
 };
@@ -461,6 +487,24 @@ function resolveSetupTotpRoute(Component, props) {
         },
     };
 }
+function resolveSetupEmailRoute(Component, props) {
+    return {
+        Component,
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('setupEmail', props),
+        },
+    };
+}
+function resolveSelectMfaTypeRoute(Component, props) {
+    return {
+        Component,
+        props: {
+            ...Component,
+            ...getConvertedMachineProps('selectMfaType', props),
+        },
+    };
+}
 function resolveSignInRoute(Component, props) {
     // default `hideSignUp` to false
     const hideSignUp = false;
@@ -504,7 +548,7 @@ function useAuthenticatorRoute({ components, }) {
     // Only state machine props specified by the current `routeSelector` will have their current value
     // returned by `useAuthenticator`, non-machine props returned will always be the current value
     const routeSelectorProps = useAuthenticator(routeMachineSelector);
-    const { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ForgotPassword, SetupTotp, SignIn, SignUp, VerifyUser, } = components;
+    const { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ForgotPassword, SelectMfaType, SetupEmail, SetupTotp, SignIn, SignUp, VerifyUser, } = components;
     switch (route) {
         case 'confirmResetPassword': {
             return resolveConfirmResetPasswordRoute(ConfirmResetPassword, routeSelectorProps);
@@ -524,6 +568,12 @@ function useAuthenticatorRoute({ components, }) {
         case 'forgotPassword': {
             return resolveForgotPasswordRoute(ForgotPassword, routeSelectorProps);
         }
+        case 'selectMfaType': {
+            return resolveSelectMfaTypeRoute(SelectMfaType, routeSelectorProps);
+        }
+        case 'setupEmail': {
+            return resolveSetupEmailRoute(SetupEmail, routeSelectorProps);
+        }
         case 'setupTotp': {
             return resolveSetupTotpRoute(SetupTotp, routeSelectorProps);
         }

package/dist/types/Authenticator/hooks/types.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ChallengeName, AuthenticatorServiceFacade, LegacyFormFieldOptions } from '@aws-amplify/ui';
 import { UseAuthenticator } from './useAuthenticator';
-export type AuthenticatorRouteComponentKey = 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'forgotPassword' | 'setupTotp' | 'signIn' | 'signUp' | 'verifyUser';
+export type AuthenticatorRouteComponentKey = 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forceNewPassword' | 'forgotPassword' | 'selectMfaType' | 'setupEmail' | 'setupTotp' | 'signIn' | 'signUp' | 'verifyUser';
 export type AuthenticatorLegacyField = LegacyFormFieldOptions;
 export type AuthenticatorLegacyFields = AuthenticatorLegacyField[];
 /**
@@ -73,6 +73,13 @@ export type SetupTotpBaseProps<FieldType = {}> = {
     totpSecretCode: UseAuthenticator['totpSecretCode'];
     username: UseAuthenticator['username'];
 } & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
+export type SetupEmailBaseProps<FieldType = {}> = {
+    toSignIn: UseAuthenticator['toSignIn'];
+} & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
+export type SelectMfaTypeBaseProps<FieldType = {}> = {
+    challengeName: UseAuthenticator['challengeName'];
+    toSignIn: UseAuthenticator['toSignIn'];
+} & CommonRouteProps & ComponentSlots<FieldType> & ValidationProps;
 export type SignInBaseProps<FieldType = {}> = {
     hideSignUp?: boolean;
     socialProviders?: UseAuthenticator['socialProviders'];
@@ -96,6 +103,8 @@ 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>;

package/dist/types/Authenticator/hooks/useAuthenticator/types.d.ts

@@ -5,7 +5,7 @@ import { AuthenticatorServiceFacade, LegacyFormFieldOptions } from '@aws-amplify
  */
 type AuthenticatorMachineContext = AuthenticatorServiceFacade;
 type AuthenticatorMachineContextKey = keyof AuthenticatorMachineContext;
-export type AuthenticatorRouteComponentKey = 'signIn' | 'signUp' | 'forceNewPassword' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forgotPassword' | 'setupTotp' | 'verifyUser';
+export type AuthenticatorRouteComponentKey = 'signIn' | 'signUp' | 'forceNewPassword' | 'confirmResetPassword' | 'confirmSignIn' | 'confirmSignUp' | 'confirmVerifyUser' | 'forgotPassword' | 'selectMfaType' | 'setupEmail' | 'setupTotp' | 'verifyUser';
 export type AuthenticatorLegacyFields = LegacyFormFieldOptions[];
 /**
  * Inspired from https://xstate.js.org/docs/packages/xstate-react/#useselector-actor-selector-compare-getsnapshot.

package/dist/types/Authenticator/hooks/useAuthenticator/utils.d.ts

@@ -1,4 +1,4 @@
-import { AuthenticatorRoute, AuthMachineState, UnverifiedUserAttributes } from '@aws-amplify/ui';
+import { AuthenticatorRoute, AuthMachineState } from '@aws-amplify/ui';
 import { AuthenticatorLegacyFields } from '../types';
 import { Comparator, UseAuthenticatorSelector } from './types';
 export declare const defaultComparator: () => false;
@@ -16,4 +16,4 @@ export declare const getQRFields: (state: AuthMachineState) => {
  * Retrieves default and custom (RWA only, to be updated) form field values from state machine
  * for subcomponent routes that render fields
  */
-export declare const getMachineFields: (route: AuthenticatorRoute, state: AuthMachineState, unverifiedUserAttributes: UnverifiedUserAttributes) => AuthenticatorLegacyFields;
+export declare const getMachineFields: (route: AuthenticatorRoute, state: AuthMachineState) => AuthenticatorLegacyFields;

package/dist/types/Authenticator/hooks/useAuthenticatorRoute/types.d.ts

@@ -1,4 +1,4 @@
-import { AuthenticatorMachineContext, AuthenticatorMachineContextKey, AuthenticatorRouteComponentName, CommonRouteProps, ConfirmResetPasswordBaseProps, ConfirmSignInBaseProps, ConfirmSignUpBaseProps, Defaults, DefaultProps, ForceResetPasswordBaseProps, ResetPasswordBaseProps, SetupTotpBaseProps, SignInBaseProps, SignUpBaseProps, VerifyUserProps, ConfirmVerifyUserProps } from '../types';
+import { AuthenticatorMachineContext, AuthenticatorMachineContextKey, AuthenticatorRouteComponentName, CommonRouteProps, ConfirmResetPasswordBaseProps, ConfirmSignInBaseProps, ConfirmSignUpBaseProps, Defaults, DefaultProps, ForceResetPasswordBaseProps, ResetPasswordBaseProps, SelectMfaTypeBaseProps, SetupEmailBaseProps, SetupTotpBaseProps, SignInBaseProps, SignUpBaseProps, VerifyUserProps, ConfirmVerifyUserProps } from '../types';
 export type UseAuthenticatorRouteParams<FieldType> = {
     components: Defaults<FieldType>;
 };
@@ -24,6 +24,8 @@ export type ConfirmVerifyUserMachineKey = ExtractMachineKey<ConfirmVerifyUserPro
 export type ForceNewPasswordMachineKey = ExtractMachineKey<ForceResetPasswordBaseProps> | CommonRouteMachineKey;
 export type ResetPasswordMachineKey = ExtractMachineKey<ResetPasswordBaseProps> | CommonRouteMachineKey;
 export type SetupTotpMachineKey = ExtractMachineKey<SetupTotpBaseProps> | CommonRouteMachineKey;
+export type SetupEmailMachineKey = ExtractMachineKey<SetupEmailBaseProps> | CommonRouteMachineKey;
+export type SelectMfaMachineKey = ExtractMachineKey<SelectMfaTypeBaseProps> | CommonRouteMachineKey;
 export type SignInMachineKey = ExtractMachineKey<SignInBaseProps> | CommonRouteMachineKey;
 export type SignUpMachineKey = ExtractMachineKey<SignUpBaseProps> | CommonRouteMachineKey;
 export type VerifyUserMachineKey = ExtractMachineKey<VerifyUserProps> | CommonRouteMachineKey;

package/dist/types/Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.d.ts

@@ -6,6 +6,8 @@ export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticato
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'ForceNewPassword'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'ForgotPassword'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SetupTotp'>;
+export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SetupEmail'>;
+export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SelectMfaType'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SignIn'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'SignUp'>;
 export default function useAuthenticatorRoute<FieldType>(params: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRoute<'VerifyUser'>;

package/dist/types/Authenticator/hooks/useAuthenticatorRoute/utils.d.ts

@@ -11,6 +11,8 @@ export declare function resolveConfirmVerifyUserRoute<FieldType = {}>(Component:
 export declare function resolveForceNewPasswordRoute<FieldType = {}>(Component: Defaults<FieldType>['ForceNewPassword'], props: UseAuthenticator): UseAuthenticatorRoute<'ForceNewPassword', FieldType>;
 export declare function resolveForgotPasswordRoute<FieldType = {}>(Component: Defaults<FieldType>['ForgotPassword'], props: UseAuthenticator): UseAuthenticatorRoute<'ForgotPassword', FieldType>;
 export declare function resolveSetupTotpRoute<FieldType = {}>(Component: Defaults<FieldType>['SetupTotp'], props: UseAuthenticator): UseAuthenticatorRoute<'SetupTotp', FieldType>;
+export declare function resolveSetupEmailRoute<FieldType = {}>(Component: Defaults<FieldType>['SetupEmail'], props: UseAuthenticator): UseAuthenticatorRoute<'SetupEmail', FieldType>;
+export declare function resolveSelectMfaTypeRoute<FieldType = {}>(Component: Defaults<FieldType>['SelectMfaType'], props: UseAuthenticator): UseAuthenticatorRoute<'SelectMfaType', FieldType>;
 export declare function resolveSignInRoute<FieldType = {}>(Component: Defaults<FieldType>['SignIn'], props: UseAuthenticator): UseAuthenticatorRoute<'SignIn', FieldType>;
 export declare function resolveSignUpRoute<FieldType = {}>(Component: Defaults<FieldType>['SignUp'], props: UseAuthenticator): UseAuthenticatorRoute<'SignUp', FieldType>;
 export declare function resolveVerifyUserRoute<FieldType = {}>(Component: Defaults<FieldType>['VerifyUser'], props: UseAuthenticator): UseAuthenticatorRoute<'VerifyUser', FieldType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "3.3.5",
+  "version": "3.4.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "src/index.ts",
@@ -40,7 +40,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.9.1",
+    "@aws-amplify/ui": "6.10.0",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "react-hook-form": "^7.53.2",
@@ -51,4 +51,4 @@
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "sideEffects": false
-}
+}

package/src/Authenticator/hooks/constants.ts

@@ -10,6 +10,8 @@ export const COMPONENT_ROUTE_KEYS: AuthenticatorRouteComponentKey[] = [
   'confirmVerifyUser',
   'forceNewPassword',
   'forgotPassword',
+  'selectMfaType',
+  'setupEmail',
   'setupTotp',
   'signIn',
   'signUp',
@@ -23,6 +25,8 @@ export const COMPONENT_ROUTE_NAMES: AuthenticatorRouteComponentName[] = [
   'ConfirmVerifyUser',
   'ForceNewPassword',
   'ForgotPassword',
+  'SelectMfaType',
+  'SetupEmail',
   'SetupTotp',
   'SignIn',
   'SignUp',

package/src/Authenticator/hooks/types.ts

@@ -15,6 +15,8 @@ export type AuthenticatorRouteComponentKey =
   | 'confirmVerifyUser'
   | 'forceNewPassword'
   | 'forgotPassword'
+  | 'selectMfaType'
+  | 'setupEmail'
   | 'setupTotp'
   | 'signIn'
   | 'signUp'
@@ -131,6 +133,19 @@ export type SetupTotpBaseProps<FieldType = {}> = {
   ComponentSlots<FieldType> &
   ValidationProps;
 
+export type SetupEmailBaseProps<FieldType = {}> = {
+  toSignIn: UseAuthenticator['toSignIn'];
+} & CommonRouteProps &
+  ComponentSlots<FieldType> &
+  ValidationProps;
+
+export type SelectMfaTypeBaseProps<FieldType = {}> = {
+  challengeName: UseAuthenticator['challengeName'];
+  toSignIn: UseAuthenticator['toSignIn'];
+} & CommonRouteProps &
+  ComponentSlots<FieldType> &
+  ValidationProps;
+
 export type SignInBaseProps<FieldType = {}> = {
   hideSignUp?: boolean;
   socialProviders?: UseAuthenticator['socialProviders'];
@@ -163,6 +178,8 @@ 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>;

package/src/Authenticator/hooks/useAuthenticator/__mock__/useAuthenticator.ts

@@ -4,6 +4,10 @@ import {
 } from '../../types';
 import { UseAuthenticator } from '../types';
 
+const allowedMfaTypes = [
+  'EMAIL',
+  'TOTP',
+] as AuthenticatorMachineContext['allowedMfaTypes'];
 const authStatus = 'unauthenticated';
 const challengeName = 'CUSTOM_CHALLENGE';
 const codeDeliveryDetails =
@@ -32,6 +36,7 @@ const user = { username: 'username', userId: 'userId' };
 const validationErrors = {};
 
 export const mockMachineContext: AuthenticatorMachineContext = {
+  allowedMfaTypes,
   authStatus,
   challengeName,
   codeDeliveryDetails,
@@ -53,7 +58,6 @@ export const mockMachineContext: AuthenticatorMachineContext = {
   toFederatedSignIn,
   toForgotPassword,
   totpSecretCode,
-
   unverifiedUserAttributes,
   username: 'george',
   validationErrors,

package/src/Authenticator/hooks/useAuthenticator/types.ts

@@ -19,6 +19,8 @@ export type AuthenticatorRouteComponentKey =
   | 'confirmSignUp'
   | 'confirmVerifyUser'
   | 'forgotPassword'
+  | 'selectMfaType'
+  | 'setupEmail'
   | 'setupTotp'
   | 'verifyUser';
 

package/src/Authenticator/hooks/useAuthenticator/useAuthenticator.ts

@@ -41,8 +41,7 @@ export default function useAuthenticator(
   const { authStatus } = context;
   const facade = useSelector(service, xstateSelector, comparator);
 
-  const { route, totpSecretCode, unverifiedUserAttributes, user, ...rest } =
-    facade;
+  const { route, totpSecretCode, user, ...rest } = facade;
 
   // do not memoize output. `service.getSnapshot` reference remains stable preventing
   // `fields` from updating with current form state on value changes
@@ -52,18 +51,13 @@ export default function useAuthenticator(
   const QRFields = route === 'setupTotp' ? getQRFields(serviceSnapshot) : null;
 
   // legacy `formFields` values required until form state is removed from state machine
-  const fields = getMachineFields(
-    route,
-    serviceSnapshot,
-    unverifiedUserAttributes
-  );
+  const fields = getMachineFields(route, serviceSnapshot);
 
   return {
     ...rest,
     authStatus,
     route,
     totpSecretCode,
-    unverifiedUserAttributes,
     user,
     /** @deprecated For internal use only */
     fields,

package/src/Authenticator/hooks/useAuthenticator/utils.ts

@@ -8,6 +8,8 @@ import {
   UnverifiedUserAttributes,
   getActorContext,
   isString,
+  AuthMFAType,
+  authenticatorTextUtil,
 } from '@aws-amplify/ui';
 
 import { AuthenticatorLegacyField, AuthenticatorLegacyFields } from '../types';
@@ -64,7 +66,7 @@ const flattenFormFields = (
   fields.flatMap(([name, options]) => ({ name, ...options }));
 
 const convertContactMethodsToFields = (
-  unverifiedUserAttributes: UnverifiedUserAttributes
+  unverifiedUserAttributes: UnverifiedUserAttributes = {}
 ): AuthenticatorLegacyFields => {
   return (
     unverifiedUserAttributes &&
@@ -78,19 +80,37 @@ const convertContactMethodsToFields = (
   );
 };
 
+const convertAllowedMfaTypesToFields = (
+  allowedMfaTypes: AuthMFAType[] = []
+): AuthenticatorLegacyFields => {
+  return allowedMfaTypes.map((mfaType) => ({
+    name: 'mfa_type',
+    label: authenticatorTextUtil.getMfaTypeLabelByValue(mfaType),
+    type: 'radio',
+    value: mfaType,
+  }));
+};
+
 /**
  * Retrieves default and custom (RWA only, to be updated) form field values from state machine
  * for subcomponent routes that render fields
  */
 export const getMachineFields = (
   route: AuthenticatorRoute,
-  state: AuthMachineState,
-  unverifiedUserAttributes: UnverifiedUserAttributes
+  state: AuthMachineState
 ): AuthenticatorLegacyFields => {
   if (isComponentRouteKey(route)) {
-    return route === 'verifyUser'
-      ? convertContactMethodsToFields(unverifiedUserAttributes)
-      : flattenFormFields(getSortedFormFields(route, state));
+    if (route === 'verifyUser') {
+      return convertContactMethodsToFields(
+        getActorContext(state).unverifiedUserAttributes
+      );
+    }
+    if (route === 'selectMfaType') {
+      return convertAllowedMfaTypesToFields(
+        getActorContext(state).allowedMfaTypes
+      );
+    }
+    return flattenFormFields(getSortedFormFields(route, state));
   }
 
   return [];

package/src/Authenticator/hooks/useAuthenticatorRoute/constants.ts

@@ -14,6 +14,8 @@ import {
   ResetPasswordMachineKey,
   SignInMachineKey,
   SignUpMachineKey,
+  SelectMfaMachineKey,
+  SetupEmailMachineKey,
   SetupTotpMachineKey,
   VerifyUserMachineKey,
 } from './types';
@@ -86,6 +88,18 @@ const SETUP_TOTP_MACHINE_KEYS: SetupTotpMachineKey[] = [
   'totpSecretCode',
   'username',
 ];
+
+const SETUP_EMAIL_MACHINE_KEY: SetupEmailMachineKey[] = [
+  ...COMMON_ROUTE_MACHINE_KEYS,
+  'toSignIn',
+];
+
+const SELECT_MFA_MACHINE_KEYS: SelectMfaMachineKey[] = [
+  ...COMMON_ROUTE_MACHINE_KEYS,
+  'challengeName',
+  'toSignIn',
+];
+
 const VERIFY_USER_MACHINE_KEYS: VerifyUserMachineKey[] = [
   ...COMMON_ROUTE_MACHINE_KEYS,
   'skipVerification',
@@ -103,6 +117,8 @@ export const MACHINE_PROP_KEYS: Record<
   signIn: SIGN_IN_MACHINE_KEYS,
   signUp: SIGN_UP_MACHINE_KEYS,
   forgotPassword: RESET_PASSWORD_MACHINE_KEYS,
+  selectMfaType: SELECT_MFA_MACHINE_KEYS,
+  setupEmail: SETUP_EMAIL_MACHINE_KEY,
   setupTotp: SETUP_TOTP_MACHINE_KEYS,
   verifyUser: VERIFY_USER_MACHINE_KEYS,
 };

package/src/Authenticator/hooks/useAuthenticatorRoute/types.ts

@@ -10,6 +10,8 @@ import {
   DefaultProps,
   ForceResetPasswordBaseProps,
   ResetPasswordBaseProps,
+  SelectMfaTypeBaseProps,
+  SetupEmailBaseProps,
   SetupTotpBaseProps,
   SignInBaseProps,
   SignUpBaseProps,
@@ -86,6 +88,14 @@ export type SetupTotpMachineKey =
   | ExtractMachineKey<SetupTotpBaseProps>
   | CommonRouteMachineKey;
 
+export type SetupEmailMachineKey =
+  | ExtractMachineKey<SetupEmailBaseProps>
+  | CommonRouteMachineKey;
+
+export type SelectMfaMachineKey =
+  | ExtractMachineKey<SelectMfaTypeBaseProps>
+  | CommonRouteMachineKey;
+
 export type SignInMachineKey =
   | ExtractMachineKey<SignInBaseProps>
   | CommonRouteMachineKey;

package/src/Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.ts

@@ -16,6 +16,8 @@ import {
   resolveDefault,
   resolveForceNewPasswordRoute,
   resolveForgotPasswordRoute,
+  resolveSelectMfaTypeRoute,
+  resolveSetupEmailRoute,
   resolveSetupTotpRoute,
   resolveSignInRoute,
   resolveSignUpRoute,
@@ -43,6 +45,12 @@ export default function useAuthenticatorRoute<FieldType>(
 export default function useAuthenticatorRoute<FieldType>(
   params: UseAuthenticatorRouteParams<FieldType>
 ): UseAuthenticatorRoute<'SetupTotp'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'SetupEmail'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'SelectMfaType'>;
 export default function useAuthenticatorRoute<FieldType>(
   params: UseAuthenticatorRouteParams<FieldType>
 ): UseAuthenticatorRoute<'SignIn'>;
@@ -76,6 +84,8 @@ export default function useAuthenticatorRoute<FieldType>({
     ConfirmVerifyUser,
     ForceNewPassword,
     ForgotPassword,
+    SelectMfaType,
+    SetupEmail,
     SetupTotp,
     SignIn,
     SignUp,
@@ -107,6 +117,12 @@ export default function useAuthenticatorRoute<FieldType>({
     case 'forgotPassword': {
       return resolveForgotPasswordRoute(ForgotPassword, routeSelectorProps);
     }
+    case 'selectMfaType': {
+      return resolveSelectMfaTypeRoute(SelectMfaType, routeSelectorProps);
+    }
+    case 'setupEmail': {
+      return resolveSetupEmailRoute(SetupEmail, routeSelectorProps);
+    }
     case 'setupTotp': {
       return resolveSetupTotpRoute(SetupTotp, routeSelectorProps);
     }

package/src/Authenticator/hooks/useAuthenticatorRoute/utils.ts

@@ -154,6 +154,32 @@ export function resolveSetupTotpRoute<FieldType = {}>(
   };
 }
 
+export function resolveSetupEmailRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['SetupEmail'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'SetupEmail', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('setupEmail', props),
+    },
+  };
+}
+
+export function resolveSelectMfaTypeRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['SelectMfaType'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'SelectMfaType', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('selectMfaType', props),
+    },
+  };
+}
+
 export function resolveSignInRoute<FieldType = {}>(
   Component: Defaults<FieldType>['SignIn'],
   props: UseAuthenticator