@aws-amplify/ui-react-native 2.4.4 → 2.5.0

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,8 +179,24 @@ export interface Components {
   ConfirmVerifyUser?: ConfirmVerifyUserComponent;
   ForceNewPassword?: ForceNewPasswordComponent;
   ForgotPassword?: ForgotPasswordComponent;
+  SelectMfaType?: SelectMfaTypeComponent;
+  SetupEmail?: SetupEmailComponent;
   SetupTotp?: SetupTotpComponent;
   SignIn?: SignInComponent;
   SignUp?: SignUpComponent;
   VerifyUser?: VerifyUserComponent;
 }
+
+export interface ConfirmResetPasswordProps
+  extends DefaultConfirmResetPasswordProps {}
+export interface ConfirmSignInProps extends DefaultConfirmSignInProps {}
+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 {}
+export interface VerifyUserProps extends DefaultVerifyUserProps {}

package/src/Authenticator/common/DefaultContainer/index.ts

@@ -1,3 +1,3 @@
 export { default as DefaultContainer } from './DefaultContainer';
 export { default as InnerContainer } from './InnerContainer';
-export { DefaultContainerComponent } from './types';
+export { ContainerProps, DefaultContainerComponent } from './types';

package/src/Authenticator/common/DefaultFormFields/DefaultSelectMfaTypeFormFields.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { DefaultRadioFormFieldsProps } from './types';
+
+import { RadioGroup } from '../../../primitives/RadioGroup';
+import { Radio } from '../../../primitives/Radio';
+
+const DefaultSelectMfaTypeFormFields = ({
+  fields = [],
+  fieldContainerStyle,
+  fieldLabelStyle,
+  isPending,
+  style,
+}: DefaultRadioFormFieldsProps): React.JSX.Element => {
+  // set initial value for radio field based on selected bool
+  const initialValue = fields.find((field) => !!field.selected)?.value;
+  return (
+    <RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
+      {fields.map(({ value, label, ...props }) => (
+        <Radio
+          {...props}
+          key={value}
+          value={value}
+          label={label}
+          labelStyle={fieldLabelStyle}
+          style={fieldContainerStyle}
+        />
+      ))}
+    </RadioGroup>
+  );
+};
+
+DefaultSelectMfaTypeFormFields.displayName = 'FormFields';
+
+export default DefaultSelectMfaTypeFormFields;

package/src/Authenticator/common/DefaultFormFields/{DefaultRadioFormFields.tsx → DefaultVerifyUserFormFields.tsx}

@@ -14,18 +14,19 @@ const attributeMap: AttributeMap = {
   phone_number: 'Phone Number',
 };
 
-const DefaultRadioFormFields = ({
-  fields,
+const DefaultVerifyUserFormFields = ({
+  fields = [],
   fieldContainerStyle,
   fieldLabelStyle,
   isPending,
   style,
 }: DefaultRadioFormFieldsProps): React.JSX.Element => {
+  // set initial value for radio field based on selected bool
+  const initialValue = fields.find((field) => !!field.selected)?.name;
   return (
-    <RadioGroup disabled={isPending} style={style}>
-      {(fields ?? []).map(({ name, value, ...props }) => {
+    <RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
+      {fields.map(({ name, value, ...props }) => {
         const attributeType = attributeMap[name as keyof AttributeMap];
-
         return (
           <Radio
             {...props}
@@ -43,6 +44,6 @@ const DefaultRadioFormFields = ({
   );
 };
 
-DefaultRadioFormFields.displayName = 'FormFields';
+DefaultVerifyUserFormFields.displayName = 'FormFields';
 
-export default DefaultRadioFormFields;
+export default DefaultVerifyUserFormFields;

package/src/Authenticator/common/DefaultFormFields/index.ts

@@ -1,3 +1,4 @@
-export { default as DefaultRadioFormFields } from './DefaultRadioFormFields';
 export { default as DefaultTextFormFields } from './DefaultTextFormFields';
+export { default as DefaultVerifyUserFormFields } from './DefaultVerifyUserFormFields';
+export { default as DefaultSelectMfaTypeFormFields } from './DefaultSelectMfaTypeFormFields';
 export { DefaultFormFieldsComponent, DefaultFormFieldsStyle } from './types';

package/src/Authenticator/hooks/useFieldValues/useFieldValues.ts

@@ -2,14 +2,20 @@ import { useMemo, useState } from 'react';
 import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { ValidationError } from '@aws-amplify/ui';
 
-import { OnChangeText, TextFieldOnBlur, TypedField } from '../types';
+import {
+  OnChangeText,
+  RadioFieldOptions,
+  TextFieldOnBlur,
+  TypedField,
+} from '../types';
 
 import { UseFieldValues, UseFieldValuesParams } from './types';
 import {
   getSanitizedTextFields,
-  getSanitizedRadioFields,
   isRadioFieldOptions,
   runFieldValidation,
+  getSanitizedVerifyUserFields,
+  getSanitizedSelectMfaTypeFields,
 } from './utils';
 
 const logger = new Logger('Authenticator');
@@ -22,11 +28,32 @@ export default function useFieldValues<FieldType extends TypedField>({
   handleSubmit,
   validationErrors,
 }: UseFieldValuesParams<FieldType>): UseFieldValues<FieldType> {
-  const [values, setValues] = useState<Record<string, string>>({});
   const [touched, setTouched] = useState<Record<string, boolean>>({});
   const [fieldValidationErrors, setFieldValidationErrors] =
     useState<ValidationError>({});
-  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] = useState(() => {
+    const result: Record<string, string> = {};
+    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 = useMemo(() => {
     if (!Array.isArray(fields)) {
@@ -36,12 +63,16 @@ export default function useFieldValues<FieldType extends TypedField>({
       return [];
     }
 
-    if (isRadioFieldComponent) {
-      return getSanitizedRadioFields(fields, componentName);
+    if (isVerifyUserRoute) {
+      return getSanitizedVerifyUserFields(fields);
+    }
+
+    if (isSelectMfaTypeRoute) {
+      return getSanitizedSelectMfaTypeFields(fields);
     }
 
     return getSanitizedTextFields(fields, componentName);
-  }, [componentName, fields, isRadioFieldComponent]);
+  }, [componentName, fields, isVerifyUserRoute, isSelectMfaTypeRoute]);
 
   const fieldsWithHandlers = sanitizedFields.map((field) => {
     if (isRadioFieldOptions(field)) {
@@ -49,11 +80,31 @@ export default function useFieldValues<FieldType extends TypedField>({
         // 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 }));
+      };
+
+      const result: RadioFieldOptions = {
+        ...field,
+        onChange,
       };
 
-      return { ...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;
@@ -100,18 +151,11 @@ export default function useFieldValues<FieldType extends TypedField>({
     };
   }) as FieldType[];
 
-  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

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

@@ -31,16 +31,15 @@ export const isRadioFieldOptions = (
   field: TypedField
 ): field is RadioFieldOptions => field?.type === 'radio';
 
-export const getSanitizedRadioFields = (
-  fields: TypedField[],
-  componentName: AuthenticatorRouteComponentName
+export const getSanitizedVerifyUserFields = (
+  fields: TypedField[]
 ): TypedField[] => {
   const values: Record<string, boolean> = {};
 
   return fields.filter((field) => {
     if (!isRadioFieldOptions(field)) {
       logger.warn(
-        `${componentName} component does not support text fields. field with type ${field.type} has been ignored.`
+        `VerifyUser component does not support text fields. field with type ${field.type} has been ignored.`
       );
       return false;
     }
@@ -77,6 +76,39 @@ export const getSanitizedRadioFields = (
   });
 };
 
+export const getSanitizedSelectMfaTypeFields = (
+  fields: TypedField[]
+): TypedField[] => {
+  const values: Record<string, boolean> = {};
+
+  return fields.filter((field) => {
+    const { value } = field;
+
+    if (!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;
+  });
+};
+
 export const getSanitizedTextFields = (
   fields: TypedField[],
   componentName: AuthenticatorRouteComponentName
@@ -180,9 +212,12 @@ export function getRouteTypedFields({
 
   // `VerifyUser` does not require additional updates to the shape of `fields`
   const isVerifyUserRoute = route === 'verifyUser';
+  const isSelectMfaTypeRoute = route === 'selectMfaType';
   const radioFields = fields as TypedField[];
 
-  return isVerifyUserRoute ? radioFields : getTypedFields(fields);
+  return isVerifyUserRoute || isSelectMfaTypeRoute
+    ? radioFields
+    : getTypedFields(fields);
 }
 
 /**

package/src/Authenticator/index.ts

@@ -1,4 +1,19 @@
 export { default as Authenticator } from './Authenticator';
+export { ContainerProps } from './common';
+export {
+  ConfirmResetPasswordProps,
+  ConfirmSignInProps,
+  ConfirmSignUpProps,
+  ConfirmVerifyUserProps,
+  ForceNewPasswordProps,
+  ForgotPasswordProps,
+  SelectMfaTypeProps,
+  SetupEmailProps,
+  SetupTotpProps,
+  SignInProps,
+  SignUpProps,
+  VerifyUserProps,
+} from './Defaults';
 export { AuthenticatorProps, WithAuthenticatorOptions } from './types';
 export { useAuthenticator, UseAuthenticator } from './useAuthenticator';
 export { default as withAuthenticator } from './withAuthenticator';

package/src/index.ts

@@ -5,6 +5,18 @@ export {
   UseAuthenticator,
   withAuthenticator,
   WithAuthenticatorOptions,
+  ConfirmResetPasswordProps,
+  ConfirmSignInProps,
+  ConfirmSignUpProps,
+  ConfirmVerifyUserProps,
+  ForceNewPasswordProps,
+  ForgotPasswordProps,
+  SelectMfaTypeProps,
+  SetupEmailProps,
+  SetupTotpProps,
+  SignInProps,
+  SignUpProps,
+  VerifyUserProps,
 } from './Authenticator';
 export * from './InAppMessaging';
 export {

package/src/primitives/RadioGroup/RadioGroup.tsx

@@ -19,6 +19,8 @@ import { RadioProps } from '../Radio';
 import { getThemedStyles } from './styles';
 import { RadioGroupProps } from './types';
 
+export const RADIO_GROUP_CONTAINER_TEST_ID = 'amplify__radio-group__container';
+
 export default function RadioGroup<T>({
   accessible = true,
   accessibilityRole = 'radiogroup',
@@ -73,7 +75,11 @@ export default function RadioGroup<T>({
   );
 
   return (
-    <View {...rest} style={[themedStyle.container, containerStyle, style]}>
+    <View
+      {...rest}
+      style={[themedStyle.container, containerStyle, style]}
+      testID={RADIO_GROUP_CONTAINER_TEST_ID}
+    >
       <View
         accessible={accessible}
         accessibilityRole={accessibilityRole}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '2.4.4';
+export const VERSION = '2.5.0';