@aws-amplify/ui-react-native 2.4.5 → 2.5.1

package/lib/Authenticator/Defaults/SetupEmail/SetupEmail.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_1 = require("@aws-amplify/ui");
+const common_1 = require("../../common");
+const hooks_1 = require("../../hooks");
+const COMPONENT_NAME = 'SetupEmail';
+const { getBackToSignInText, getConfirmText, getConfirmingText, getSetupEmailText, } = ui_1.authenticatorTextUtil;
+const SetupEmail = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }) => {
+    const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = (0, hooks_1.useFieldValues)({
+        componentName: COMPONENT_NAME,
+        fields,
+        handleBlur,
+        handleChange,
+        handleSubmit,
+        validationErrors,
+    });
+    const headerText = getSetupEmailText();
+    const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
+    const secondaryButtonText = getBackToSignInText();
+    const buttons = (0, react_1.useMemo)(() => ({
+        primary: {
+            children: primaryButtonText,
+            disabled,
+            onPress: handleFormSubmit,
+        },
+        links: [{ children: secondaryButtonText, onPress: toSignIn }],
+    }), [
+        disabled,
+        handleFormSubmit,
+        primaryButtonText,
+        secondaryButtonText,
+        toSignIn,
+    ]);
+    return (<common_1.DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
+};
+SetupEmail.Footer = common_1.DefaultFooter;
+SetupEmail.FormFields = common_1.DefaultTextFormFields;
+SetupEmail.Header = common_1.DefaultHeader;
+SetupEmail.displayName = COMPONENT_NAME;
+exports.default = SetupEmail;

package/lib/Authenticator/Defaults/SetupEmail/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetupEmail = void 0;
+var SetupEmail_1 = require("./SetupEmail");
+Object.defineProperty(exports, "SetupEmail", { enumerable: true, get: function () { return __importDefault(SetupEmail_1).default; } });

package/lib/Authenticator/Defaults/VerifyUser/VerifyUser.js

@@ -27,7 +27,7 @@ const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerifi
     return (<common_1.DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors}/>);
 };
 VerifyUser.Footer = common_1.DefaultFooter;
-VerifyUser.FormFields = common_1.DefaultRadioFormFields;
+VerifyUser.FormFields = common_1.DefaultVerifyUserFormFields;
 VerifyUser.Header = common_1.DefaultHeader;
 VerifyUser.displayName = COMPONENT_NAME;
 exports.default = VerifyUser;

package/lib/Authenticator/Defaults/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerifyUser = exports.SignUp = exports.SignIn = exports.SetupTotp = exports.ForgotPassword = exports.ForceNewPassword = exports.ConfirmVerifyUser = exports.ConfirmSignUp = exports.ConfirmSignIn = exports.ConfirmResetPassword = void 0;
+exports.SetupEmail = exports.SelectMfaType = exports.VerifyUser = exports.SignUp = exports.SignIn = exports.SetupTotp = exports.ForgotPassword = exports.ForceNewPassword = exports.ConfirmVerifyUser = exports.ConfirmSignUp = exports.ConfirmSignIn = exports.ConfirmResetPassword = void 0;
 var ConfirmResetPassword_1 = require("./ConfirmResetPassword");
 Object.defineProperty(exports, "ConfirmResetPassword", { enumerable: true, get: function () { return ConfirmResetPassword_1.ConfirmResetPassword; } });
 var ConfirmSignIn_1 = require("./ConfirmSignIn");
@@ -21,3 +21,7 @@ var SignUp_1 = require("./SignUp");
 Object.defineProperty(exports, "SignUp", { enumerable: true, get: function () { return SignUp_1.SignUp; } });
 var VerifyUser_1 = require("./VerifyUser");
 Object.defineProperty(exports, "VerifyUser", { enumerable: true, get: function () { return VerifyUser_1.VerifyUser; } });
+var SelectMfaType_1 = require("./SelectMfaType");
+Object.defineProperty(exports, "SelectMfaType", { enumerable: true, get: function () { return SelectMfaType_1.SelectMfaType; } });
+var SetupEmail_1 = require("./SetupEmail");
+Object.defineProperty(exports, "SetupEmail", { enumerable: true, get: function () { return SetupEmail_1.SetupEmail; } });

package/lib/Authenticator/common/DefaultFormFields/DefaultSelectMfaTypeFormFields.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const RadioGroup_1 = require("../../../primitives/RadioGroup");
+const Radio_1 = require("../../../primitives/Radio");
+const DefaultSelectMfaTypeFormFields = ({ fields = [], fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
+    // set initial value for radio field based on selected bool
+    const initialValue = fields.find((field) => !!field.selected)?.value;
+    return (<RadioGroup_1.RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
+      {fields.map(({ value, label, ...props }) => (<Radio_1.Radio {...props} key={value} value={value} label={label} labelStyle={fieldLabelStyle} style={fieldContainerStyle}/>))}
+    </RadioGroup_1.RadioGroup>);
+};
+DefaultSelectMfaTypeFormFields.displayName = 'FormFields';
+exports.default = DefaultSelectMfaTypeFormFields;

package/lib/Authenticator/common/DefaultFormFields/{DefaultRadioFormFields.js → DefaultVerifyUserFormFields.js}

@@ -8,9 +8,11 @@ const attributeMap = {
     email: 'Email',
     phone_number: 'Phone Number',
 };
-const DefaultRadioFormFields = ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
-    return (<primitives_1.RadioGroup disabled={isPending} style={style}>
-      {(fields ?? []).map(({ name, value, ...props }) => {
+const DefaultVerifyUserFormFields = ({ fields = [], fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
+    // set initial value for radio field based on selected bool
+    const initialValue = fields.find((field) => !!field.selected)?.name;
+    return (<primitives_1.RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
+      {fields.map(({ name, value, ...props }) => {
             const attributeType = attributeMap[name];
             return (<primitives_1.Radio {...props} key={value} 
             // value has to be name, because Auth is only interested in the
@@ -19,5 +21,5 @@ const DefaultRadioFormFields = ({ fields, fieldContainerStyle, fieldLabelStyle,
         })}
     </primitives_1.RadioGroup>);
 };
-DefaultRadioFormFields.displayName = 'FormFields';
-exports.default = DefaultRadioFormFields;
+DefaultVerifyUserFormFields.displayName = 'FormFields';
+exports.default = DefaultVerifyUserFormFields;

package/lib/Authenticator/common/DefaultFormFields/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultTextFormFields = exports.DefaultRadioFormFields = void 0;
-var DefaultRadioFormFields_1 = require("./DefaultRadioFormFields");
-Object.defineProperty(exports, "DefaultRadioFormFields", { enumerable: true, get: function () { return __importDefault(DefaultRadioFormFields_1).default; } });
+exports.DefaultSelectMfaTypeFormFields = exports.DefaultVerifyUserFormFields = exports.DefaultTextFormFields = void 0;
 var DefaultTextFormFields_1 = require("./DefaultTextFormFields");
 Object.defineProperty(exports, "DefaultTextFormFields", { enumerable: true, get: function () { return __importDefault(DefaultTextFormFields_1).default; } });
+var DefaultVerifyUserFormFields_1 = require("./DefaultVerifyUserFormFields");
+Object.defineProperty(exports, "DefaultVerifyUserFormFields", { enumerable: true, get: function () { return __importDefault(DefaultVerifyUserFormFields_1).default; } });
+var DefaultSelectMfaTypeFormFields_1 = require("./DefaultSelectMfaTypeFormFields");
+Object.defineProperty(exports, "DefaultSelectMfaTypeFormFields", { enumerable: true, get: function () { return __importDefault(DefaultSelectMfaTypeFormFields_1).default; } });

package/lib/Authenticator/hooks/useFieldValues/useFieldValues.js

@@ -5,29 +5,68 @@ const utils_1 = require("aws-amplify/utils");
 const utils_2 = require("./utils");
 const logger = new utils_1.ConsoleLogger('Authenticator');
 function useFieldValues({ componentName, fields = [], handleBlur, handleChange, handleSubmit, validationErrors, }) {
-    const [values, setValues] = (0, react_1.useState)({});
     const [touched, setTouched] = (0, react_1.useState)({});
     const [fieldValidationErrors, setFieldValidationErrors] = (0, react_1.useState)({});
-    const isRadioFieldComponent = componentName === 'VerifyUser';
+    const isVerifyUserRoute = componentName === 'VerifyUser';
+    const isSelectMfaTypeRoute = componentName === 'SelectMfaType';
+    const isRadioFieldComponent = isVerifyUserRoute || isSelectMfaTypeRoute;
+    // initialize values based on route
+    // select mfa type screen should auto select first radio option
+    const [values, setValues] = (0, react_1.useState)(() => {
+        const result = {};
+        if (isSelectMfaTypeRoute) {
+            const initialValue = fields[0]?.value;
+            if (initialValue) {
+                result.mfa_type = initialValue;
+            }
+        }
+        if (isVerifyUserRoute) {
+            const initialValue = fields[0]?.name;
+            if (initialValue) {
+                result.unverifiedAttr = initialValue;
+            }
+        }
+        return result;
+    });
     const sanitizedFields = (0, react_1.useMemo)(() => {
         if (!Array.isArray(fields)) {
             logger.warn(`Invalid fields type of ${typeof fields} passed to ${componentName}. fields must be of type array.`);
             return [];
         }
-        if (isRadioFieldComponent) {
-            return (0, utils_2.getSanitizedRadioFields)(fields, componentName);
+        if (isVerifyUserRoute) {
+            return (0, utils_2.getSanitizedVerifyUserFields)(fields);
+        }
+        if (isSelectMfaTypeRoute) {
+            return (0, utils_2.getSanitizedSelectMfaTypeFields)(fields);
         }
         return (0, utils_2.getSanitizedTextFields)(fields, componentName);
-    }, [componentName, fields, isRadioFieldComponent]);
+    }, [componentName, fields, isVerifyUserRoute, isSelectMfaTypeRoute]);
     const fieldsWithHandlers = sanitizedFields.map((field) => {
         if ((0, utils_2.isRadioFieldOptions)(field)) {
             const onChange = (value) => {
                 // call `onChange` passed as radio `field` option
                 field.onChange?.(value);
-                // set `name` as value of 'unverifiedAttr'
-                setValues({ unverifiedAttr: value });
+                // on VerifyUser route, set `name` as value of 'unverifiedAttr'
+                // on SelectMfaTYpe route, set `name` as value of 'mfa_type'
+                const fieldName = isVerifyUserRoute
+                    ? 'unverifiedAttr'
+                    : isSelectMfaTypeRoute
+                        ? 'mfa_type'
+                        : field.name;
+                setValues((prev) => ({ ...prev, [fieldName]: value }));
             };
-            return { ...field, onChange };
+            const result = {
+                ...field,
+                onChange,
+            };
+            // bind selected boolean attribute for radio field
+            if (isSelectMfaTypeRoute) {
+                result.selected = values.mfa_type === field.value;
+            }
+            if (isVerifyUserRoute) {
+                result.selected = values.unverifiedAttr === field.name;
+            }
+            return result;
         }
         const { name, label, labelHidden, ...rest } = field;
         const onBlur = (event) => {
@@ -63,17 +102,11 @@ function useFieldValues({ componentName, fields = [], handleBlur, handleChange,
             value: values[name],
         };
     });
-    const disableFormSubmit = isRadioFieldComponent
+    const disableFormSubmit = isVerifyUserRoute
         ? !values.unverifiedAttr
-        : fieldsWithHandlers.some(({ required, value }) => {
-            if (!required) {
-                return false;
-            }
-            if (value) {
-                return false;
-            }
-            return true;
-        });
+        : isSelectMfaTypeRoute
+            ? !values.mfa_type
+            : fieldsWithHandlers.some(({ required, value }) => required && !value);
     const handleFormSubmit = () => {
         const submitValue = isRadioFieldComponent
             ? values

package/lib/Authenticator/hooks/useFieldValues/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.runFieldValidation = exports.getRouteTypedFields = exports.getTypedFields = exports.getTypedField = exports.getSanitizedTextFields = exports.getSanitizedRadioFields = exports.isRadioFieldOptions = void 0;
+exports.runFieldValidation = exports.getRouteTypedFields = exports.getTypedFields = exports.getTypedField = exports.getSanitizedTextFields = exports.getSanitizedSelectMfaTypeFields = exports.getSanitizedVerifyUserFields = exports.isRadioFieldOptions = void 0;
 const utils_1 = require("aws-amplify/utils");
 const ui_1 = require("@aws-amplify/ui");
 const ui_react_core_1 = require("@aws-amplify/ui-react-core");
@@ -9,11 +9,11 @@ const logger = new utils_1.ConsoleLogger('Authenticator');
 const { getInvalidEmailText, getRequiredFieldText } = ui_1.authenticatorTextUtil;
 const isRadioFieldOptions = (field) => field?.type === 'radio';
 exports.isRadioFieldOptions = isRadioFieldOptions;
-const getSanitizedRadioFields = (fields, componentName) => {
+const getSanitizedVerifyUserFields = (fields) => {
     const values = {};
     return fields.filter((field) => {
         if (!(0, exports.isRadioFieldOptions)(field)) {
-            logger.warn(`${componentName} component does not support text fields. field with type ${field.type} has been ignored.`);
+            logger.warn(`VerifyUser component does not support text fields. field with type ${field.type} has been ignored.`);
             return false;
         }
         const { name, value } = field;
@@ -34,7 +34,28 @@ const getSanitizedRadioFields = (fields, componentName) => {
         return true;
     });
 };
-exports.getSanitizedRadioFields = getSanitizedRadioFields;
+exports.getSanitizedVerifyUserFields = getSanitizedVerifyUserFields;
+const getSanitizedSelectMfaTypeFields = (fields) => {
+    const values = {};
+    return fields.filter((field) => {
+        const { value } = field;
+        if (!(0, exports.isRadioFieldOptions)(field)) {
+            logger.warn(`SelectMfaType component does not support non-radio fields; field with type "${field.type}" has been ignored.`);
+            return false;
+        }
+        if (!value) {
+            logger.warn('Each field must have a value; field has been ignored.');
+            return false;
+        }
+        if (values[value]) {
+            logger.warn(`Each field value must be unique; field with duplicate value of "${value}" has been ignored.`);
+            return false;
+        }
+        values[value] = true;
+        return true;
+    });
+};
+exports.getSanitizedSelectMfaTypeFields = getSanitizedSelectMfaTypeFields;
 const getSanitizedTextFields = (fields, componentName) => {
     const names = {};
     return fields.filter((field) => {
@@ -103,8 +124,11 @@ function getRouteTypedFields({ fields, route, }) {
     }
     // `VerifyUser` does not require additional updates to the shape of `fields`
     const isVerifyUserRoute = route === 'verifyUser';
+    const isSelectMfaTypeRoute = route === 'selectMfaType';
     const radioFields = fields;
-    return isVerifyUserRoute ? radioFields : (0, exports.getTypedFields)(fields);
+    return isVerifyUserRoute || isSelectMfaTypeRoute
+        ? radioFields
+        : (0, exports.getTypedFields)(fields);
 }
 exports.getRouteTypedFields = getRouteTypedFields;
 /**

package/lib/primitives/RadioGroup/RadioGroup.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RADIO_GROUP_CONTAINER_TEST_ID = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
@@ -8,6 +9,7 @@ const theme_1 = require("../../theme");
 const Label_1 = require("../Label");
 const utils_1 = require("../Label/utils");
 const styles_1 = require("./styles");
+exports.RADIO_GROUP_CONTAINER_TEST_ID = 'amplify__radio-group__container';
 function RadioGroup({ accessible = true, accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
     const theme = (0, theme_1.useTheme)();
     const themedStyle = (0, styles_1.getThemedStyles)(theme);
@@ -29,7 +31,7 @@ function RadioGroup({ accessible = true, accessibilityRole = 'radiogroup', child
         setValue(nextValue);
         onChange?.(nextValue);
     }, [onChange]);
-    return (<react_native_1.View {...rest} style={[themedStyle.container, containerStyle, style]}>
+    return (<react_native_1.View {...rest} style={[themedStyle.container, containerStyle, style]} testID={exports.RADIO_GROUP_CONTAINER_TEST_ID}>
       <react_native_1.View accessible={accessible} accessibilityRole={accessibilityRole} style={childContainerStyle}>
         {react_1.Children.map(children, (child) => {
             if ((0, react_1.isValidElement)(child)) {

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '2.4.5';
+exports.VERSION = '2.5.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "2.4.5",
+  "version": "2.5.1",
   "main": "lib/index.js",
   "module": "dist/index.js",
   "react-native": "src/index.ts",
@@ -30,9 +30,9 @@
     "react-native-safe-area-context": "^5.2.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.9.1",
-    "@aws-amplify/ui-react-core": "3.3.5",
-    "@aws-amplify/ui-react-core-notifications": "2.2.5"
+    "@aws-amplify/ui": "6.10.1",
+    "@aws-amplify/ui-react-core": "3.4.1",
+    "@aws-amplify/ui-react-core-notifications": "2.2.7"
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",

package/src/Authenticator/Authenticator.tsx

@@ -28,6 +28,8 @@ import {
   SignIn,
   SignUp,
   VerifyUser,
+  SetupEmail,
+  SelectMfaType,
 } from './Defaults';
 
 const DEFAULTS = {
@@ -41,6 +43,8 @@ const DEFAULTS = {
   SignIn,
   SignUp,
   VerifyUser,
+  SetupEmail,
+  SelectMfaType,
 };
 
 const routePropSelector = ({
@@ -118,5 +122,7 @@ Authenticator.SetupTotp = SetupTotp;
 Authenticator.SignIn = SignIn;
 Authenticator.SignUp = SignUp;
 Authenticator.VerifyUser = VerifyUser;
+Authenticator.SetupEmail = SetupEmail;
+Authenticator.SelectMfaType = SelectMfaType;
 
 export default Authenticator;

package/src/Authenticator/Defaults/SelectMfaType/SelectMfaType.tsx

@@ -0,0 +1,87 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import {
+  DefaultContent,
+  DefaultFooter,
+  DefaultHeader,
+  DefaultSelectMfaTypeFormFields,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultSelectMfaTypeProps } from '../types';
+
+const COMPONENT_NAME = 'SelectMfaType';
+
+const {
+  getSelectMfaTypeByChallengeName,
+  getBackToSignInText,
+  getConfirmText,
+  getConfirmingText,
+} = authenticatorTextUtil;
+
+const SelectMfaType = ({
+  challengeName,
+  fields,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  isPending,
+  toSignIn,
+  validationErrors,
+  ...rest
+}: DefaultSelectMfaTypeProps): React.JSX.Element => {
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    fieldValidationErrors,
+    handleFormSubmit,
+  } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+    validationErrors,
+  });
+
+  const headerText = getSelectMfaTypeByChallengeName(challengeName);
+  const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
+  const secondaryButtonText = getBackToSignInText();
+
+  const buttons = useMemo(
+    () => ({
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
+      links: [{ children: secondaryButtonText, onPress: toSignIn }],
+    }),
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      secondaryButtonText,
+      toSignIn,
+    ]
+  );
+
+  return (
+    <DefaultContent
+      {...rest}
+      buttons={buttons}
+      headerText={headerText}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+      validationErrors={fieldValidationErrors}
+    />
+  );
+};
+
+SelectMfaType.Footer = DefaultFooter;
+SelectMfaType.FormFields = DefaultSelectMfaTypeFormFields;
+SelectMfaType.Header = DefaultHeader;
+
+SelectMfaType.displayName = COMPONENT_NAME;
+export default SelectMfaType;

package/src/Authenticator/Defaults/SelectMfaType/index.ts

@@ -0,0 +1 @@
+export { default as SelectMfaType } from './SelectMfaType';

package/src/Authenticator/Defaults/SetupEmail/SetupEmail.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import {
+  DefaultContent,
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultSetupEmailProps } from '../types';
+
+const COMPONENT_NAME = 'SetupEmail';
+
+const {
+  getBackToSignInText,
+  getConfirmText,
+  getConfirmingText,
+  getSetupEmailText,
+} = authenticatorTextUtil;
+
+const SetupEmail = ({
+  fields,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  isPending,
+  toSignIn,
+  validationErrors,
+  ...rest
+}: DefaultSetupEmailProps): React.JSX.Element => {
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    fieldValidationErrors,
+    handleFormSubmit,
+  } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+    validationErrors,
+  });
+
+  const headerText = getSetupEmailText();
+  const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
+  const secondaryButtonText = getBackToSignInText();
+
+  const buttons = useMemo(
+    () => ({
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
+      links: [{ children: secondaryButtonText, onPress: toSignIn }],
+    }),
+    [
+      disabled,
+      handleFormSubmit,
+      primaryButtonText,
+      secondaryButtonText,
+      toSignIn,
+    ]
+  );
+
+  return (
+    <DefaultContent
+      {...rest}
+      buttons={buttons}
+      headerText={headerText}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+      validationErrors={fieldValidationErrors}
+    />
+  );
+};
+
+SetupEmail.Footer = DefaultFooter;
+SetupEmail.FormFields = DefaultTextFormFields;
+SetupEmail.Header = DefaultHeader;
+
+SetupEmail.displayName = COMPONENT_NAME;
+export default SetupEmail;

package/src/Authenticator/Defaults/SetupEmail/index.ts

@@ -0,0 +1 @@
+export { default as SetupEmail } from './SetupEmail';

package/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx

@@ -5,7 +5,7 @@ import {
   DefaultContent,
   DefaultFooter,
   DefaultHeader,
-  DefaultRadioFormFields,
+  DefaultVerifyUserFormFields,
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 import { DefaultVerifyUserProps } from '../types';
@@ -68,7 +68,7 @@ const VerifyUser = ({
 };
 
 VerifyUser.Footer = DefaultFooter;
-VerifyUser.FormFields = DefaultRadioFormFields;
+VerifyUser.FormFields = DefaultVerifyUserFormFields;
 VerifyUser.Header = DefaultHeader;
 
 VerifyUser.displayName = COMPONENT_NAME;

package/src/Authenticator/Defaults/index.ts

@@ -8,6 +8,8 @@ export { SetupTotp } from './SetupTotp';
 export { SignIn } from './SignIn';
 export { SignUp } from './SignUp';
 export { VerifyUser } from './VerifyUser';
+export { SelectMfaType } from './SelectMfaType';
+export { SetupEmail } from './SetupEmail';
 export {
   Components,
   DefaultComponents,
@@ -17,6 +19,8 @@ export {
   ConfirmVerifyUserProps,
   ForceNewPasswordProps,
   ForgotPasswordProps,
+  SelectMfaTypeProps,
+  SetupEmailProps,
   SetupTotpProps,
   SignInProps,
   SignUpProps,

package/src/Authenticator/Defaults/types.ts

@@ -15,6 +15,8 @@ export interface SetupTotpStyle {}
 export interface SignInStyle {}
 export interface SignUpStyle {}
 export interface VerifyUserStyle {}
+export interface SetupEmailStyle {}
+export interface SelectMfaTypeStyle {}
 
 export type DefaultComponents<
   FieldType = {},
@@ -85,6 +87,20 @@ export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef<
   >['VerifyUser']
 >;
 
+export type DefaultSetupEmailProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: SetupEmailStyle }
+  >['SetupEmail']
+>;
+
+export type DefaultSelectMfaTypeProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    RadioFieldOptions,
+    { style?: SelectMfaTypeStyle }
+  >['SelectMfaType']
+>;
+
 /**
  * Custom Authenticator components
  */
@@ -143,6 +159,16 @@ type VerifyUserComponent<P = {}> = OverrideComponents<
   { style?: VerifyUserStyle } & P
 >['VerifyUser'];
 
+type SetupEmailComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: SetupEmailStyle } & P
+>['SetupEmail'];
+
+type SelectMfaTypeComponent<P = {}> = OverrideComponents<
+  RadioFieldOptions,
+  { style?: SelectMfaTypeStyle } & P
+>['SelectMfaType'];
+
 /**
  * Override `Authenticator` components param
  */
@@ -153,6 +179,8 @@ export interface Components {
   ConfirmVerifyUser?: ConfirmVerifyUserComponent;
   ForceNewPassword?: ForceNewPasswordComponent;
   ForgotPassword?: ForgotPasswordComponent;
+  SelectMfaType?: SelectMfaTypeComponent;
+  SetupEmail?: SetupEmailComponent;
   SetupTotp?: SetupTotpComponent;
   SignIn?: SignInComponent;
   SignUp?: SignUpComponent;
@@ -166,6 +194,8 @@ export interface ConfirmSignUpProps extends DefaultConfirmSignUpProps {}
 export interface ConfirmVerifyUserProps extends DefaultConfirmVerifyUserProps {}
 export interface ForceNewPasswordProps extends DefaultForceNewPasswordProps {}
 export interface ForgotPasswordProps extends DefaultForgotPasswordProps {}
+export interface SelectMfaTypeProps extends DefaultSelectMfaTypeProps {}
+export interface SetupEmailProps extends DefaultSetupEmailProps {}
 export interface SetupTotpProps extends DefaultSetupTotpProps {}
 export interface SignInProps extends DefaultSignInProps {}
 export interface SignUpProps extends DefaultSignUpProps {}