aws-amplify
diff --git a/‎.changeset/polite-ducks-prove.md
Lines changed: 10 additions & 0 deletions b/‎.changeset/polite-ducks-prove.md
Lines changed: 10 additions & 0 deletions
diff --git a/‎docs/package.json
Lines changed: 1 addition & 1 deletion b/‎docs/package.json
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.angular.mdx
Lines changed: 3 additions & 14 deletions b/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.angular.mdx
Lines changed: 3 additions & 14 deletions
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.react-native.mdx
Lines changed: 3 additions & 14 deletions b/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.react-native.mdx
Lines changed: 3 additions & 14 deletions
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.react.mdx
Lines changed: 3 additions & 14 deletions b/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.react.mdx
Lines changed: 3 additions & 14 deletions
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.vue.mdx
Lines changed: 3 additions & 14 deletions b/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.vue.mdx
Lines changed: 3 additions & 14 deletions
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/index.page.mdx
Lines changed: 5 additions & 0 deletions b/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/index.page.mdx
Lines changed: 5 additions & 0 deletions
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/routes-list.mdx
Lines changed: 16 additions & 0 deletions b/‎docs/src/pages/[platform]/connected-components/authenticator/advanced/routes-list.mdx
Lines changed: 16 additions & 0 deletions
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.react-native.mdx
Lines changed: 11 additions & 1 deletion b/‎docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.react-native.mdx
Lines changed: 11 additions & 1 deletion
diff --git a/‎docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.web.mdx
Lines changed: 50 additions & 0 deletions b/‎docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.web.mdx
Lines changed: 50 additions & 0 deletions
@@ -0,0 +1,10 @@
+---
+'@aws-amplify/ui-angular': minor
+'@aws-amplify/ui-react-native': minor
+'@aws-amplify/ui-react-core': minor
+'@aws-amplify/ui-react': minor
+'@aws-amplify/ui-vue': minor
+'@aws-amplify/ui': minor
+---
+
+feat(authenticator): add support for email otp and select mfa type challenges
@@ -74,4 +74,4 @@
     "react-markdown": "^8.0.3",
     "ts-node": "^10.9.1"
   }
-}
+}
@@ -1,19 +1,8 @@
+import RoutesList from './routes-list.mdx';
+
 You can use `AuthenticatorService` to access `route` string that represents the current `authState`. They can be one of:
 
-- `idle`
-- `setup`
-- `signIn`
-- `signUp`
-- `confirmSignIn`
-- `confirmSignUp`
-- `setupTotp`
-- `forceNewPassword`
-- `forgotPassword`
-- `confirmResetPassword`
-- `verifyUser`
-- `confirmVerifyUser`
-- `signOut`
-- `authenticated`
+<RoutesList />
 
 ```html
 <!-- Only render this if there's an authenticated user -->
 
@@ -1,19 +1,8 @@
+import RoutesList from './routes-list.mdx';
+
 You can use `useAuthenticator` hook to access `route` string that represents the current `authState`. They can be one of:
 
-- `idle`
-- `setup`
-- `signIn`
-- `signUp`
-- `confirmSignIn`
-- `confirmSignUp`
-- `setupTotp`
-- `forceNewPassword`
-- `forgotPassword`
-- `confirmResetPassword`
-- `verifyUser`
-- `confirmVerifyUser`
-- `signOut`
-- `authenticated`
+<RoutesList />
 
 ```jsx
 import { useAuthenticator } from '@aws-amplify/ui-react-native';
 
@@ -1,19 +1,8 @@
+import RoutesList from './routes-list.mdx';
+
 You can use `useAuthenticator` hook to access `route` string that represents the current `authState`. They can be one of:
 
-- `idle`
-- `setup`
-- `signIn`
-- `signUp`
-- `confirmSignIn`
-- `confirmSignUp`
-- `setupTotp`
-- `forceNewPassword`
-- `forgotPassword`
-- `confirmResetPassword`
-- `verifyUser`
-- `confirmVerifyUser`
-- `signOut`
-- `authenticated`
+<RoutesList />
 
 ```tsx{1,4-7}
 import { useAuthenticator } from '@aws-amplify/ui-react';
 
@@ -1,19 +1,8 @@
+import RoutesList from './routes-list.mdx';
+
 You can use `useAuthenticator` composable to access `route` string that represents the current `authState`. They can be one of:
 
-- `idle`
-- `setup`
-- `signIn`
-- `signUp`
-- `confirmSignIn`
-- `confirmSignUp`
-- `setupTotp`
-- `forceNewPassword`
-- `forgotPassword`
-- `confirmResetPassword`
-- `verifyUser`
-- `confirmVerifyUser`
-- `signOut`
-- `authenticated`
+<RoutesList />
 
 ```html{1,5-7}
 <script setup>
 
@@ -188,6 +188,11 @@ Here's an example that uses the `toForgotPassword` trigger transition, to create
           <ResponsiveTableCell label="Description">Provides detail on where confirm sign up code is sent to.</ResponsiveTableCell>
           <ResponsiveTableCell label="Type">`CodeDeliveryDetail`</ResponsiveTableCell>
         </TableRow>
+        <TableRow>
+          <ResponsiveTableCell label="Name">`allowedMfaTypes`</ResponsiveTableCell>
+          <ResponsiveTableCell label="Description">Multi-factor authentication types available for selection.</ResponsiveTableCell>
+          <ResponsiveTableCell label="Type">`AuthMfaType[]`</ResponsiveTableCell>
+        </TableRow>
       </TableBody>
     </ResponsiveTable>
 
 
@@ -0,0 +1,16 @@
+- `idle`
+- `setup`
+- `signIn`
+- `signUp`
+- `confirmSignIn`
+- `confirmSignUp`
+- `selectMfaType`
+- `setupEmail`
+- `setupTotp`
+- `forceNewPassword`
+- `forgotPassword`
+- `confirmResetPassword`
+- `verifyUser`
+- `confirmVerifyUser`
+- `signOut`
+- `authenticated`
@@ -37,7 +37,7 @@ The `Authenticator` subcomponents can be overridden allowing for advanced use ca
 The following example shows how to override each component in the Authenticator to produce a distinct look and feel using a third-party component library.
 
 <Tabs.Container defaultValue="example">
-  <Tabs.List style={{ overflowX: 'scroll', paddingBottom: 8 }}>
+  <Tabs.List style={{ overflowX: 'scroll' }}>
     <Tabs.Item value="example">Example.tsx</Tabs.Item>
     <Tabs.Item value="confirm-reset-password">
       ConfirmResetPassword.tsx
@@ -46,6 +46,8 @@ The following example shows how to override each component in the Authenticator
     <Tabs.Item value="confirm-verify-user">ConfirmVerifyUser.tsx</Tabs.Item>
     <Tabs.Item value="force-new-password">ForceNewPassword.tsx</Tabs.Item>
     <Tabs.Item value="forgot-password">ForgotPassword.tsx</Tabs.Item>
+    <Tabs.Item value="select-mfa-type">SelectMfaType.tsx</Tabs.Item>
+    <Tabs.Item value="setup-email">SetupEmail.tsx</Tabs.Item>
     <Tabs.Item value="setup-totp">SetupTotp.tsx</Tabs.Item>
     <Tabs.Item value="sign-in">SignIn.tsx</Tabs.Item>
     <Tabs.Item value="sign-up">SignUp.tsx</Tabs.Item>
@@ -76,6 +78,14 @@ The following example shows how to override each component in the Authenticator
     ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ForgotPassword.tsx
     ```
   </Tabs.Panel>
+  <Tabs.Panel value="select-mfa-type">
+    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SelectMfaType.tsx
+    ```
+  </Tabs.Panel>
+  <Tabs.Panel value="setup-email">
+    ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SetupEmail.tsx
+    ```
+  </Tabs.Panel>
   <Tabs.Panel value="setup-totp">
     ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SetupTotp.tsx
     ```
 
@@ -69,6 +69,23 @@ Using the same techniques as [Internationalization (I18n)](#internationalization
     </Accordion.Content>
   </Accordion.Item>
 
+  <Accordion.Item value="confirm-sign-in">
+    <Accordion.Trigger>
+      <Text fontWeight="bold">Confirm Sign In</Text>
+      <Accordion.Icon />
+    </Accordion.Trigger>
+    <Accordion.Content>
+    ```ts
+    I18n.putVocabulariesForLanguage('en', {
+      'Confirm SMS Code': 'SMS',
+      'Confirm TOTP Code': 'TOTP',
+      'Confirm Email Code': 'Email',
+      'Confirm MFA Code': 'Default',
+    });
+    ```
+    </Accordion.Content>
+  </Accordion.Item>
+
   <Accordion.Item value="forgot-password">
     <Accordion.Trigger>
       <Text fontWeight="bold">Forgot Password</Text>
@@ -106,4 +123,37 @@ Using the same techniques as [Internationalization (I18n)](#internationalization
       ```
     </Accordion.Content>
   </Accordion.Item>
+  
+  <Accordion.Item value="select-mfa-type">
+    <Accordion.Trigger>
+      <Text fontWeight="bold">Select MFA Type</Text>
+      <Accordion.Icon />
+    </Accordion.Trigger>
+    <Accordion.Content>
+      ```ts
+      I18n.putVocabulariesForLanguage('en', {
+        'Multi-Factor Authentication Setup': 'MFA Setup', // MFA Setup Selection Header
+        'Multi-Factor Authentication': 'MFA', // MFA Selection Header
+        'Select MFA Type': "Choose an MFA Type", // Radio Group Legend
+        'Email Message': 'Email', // Email Radio Option Label
+        'Text Message (SMS)': 'SMS', // SMS Radio Option Label
+        'Authenticator App (TOTP)': 'TOTP', // TOTP Radio Option Label
+      });
+      ```
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="setup-email">
+    <Accordion.Trigger>
+      <Text fontWeight="bold">Setup Email</Text>
+      <Accordion.Icon />
+    </Accordion.Trigger>
+    <Accordion.Content>
+      ```ts
+      I18n.putVocabulariesForLanguage('en', {
+        'Setup Email': 'Email Setup' // Setup Email Header
+      });
+      ```
+    </Accordion.Content>
+  </Accordion.Item>
 </Accordion.Container>
Original file line number	Diff line number	Diff line change
`@@ -74,4 +74,4 @@`
`74`	`74`	`"react-markdown": "^8.0.3",`
`75`	`75`	`"ts-node": "^10.9.1"`
`76`	`76`	`}`
`77`		`-}`
	`77`	`+}`