@aws-amplify/ui-react-native 1.2.4 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @aws-amplify/ui-react-native
 
+## 1.2.6
+
+### Patch Changes
+
+- [#3333](https://github.com/aws-amplify/amplify-ui/pull/3333) [`4ba0fb5c1`](https://github.com/aws-amplify/amplify-ui/commit/4ba0fb5c13484a36c8f44be5eb41313bf3d676cc) Thanks [@calebpollman](https://github.com/calebpollman)! - fix(authenticator): migrate totpSecretCode generation to state machine
+
+- Updated dependencies [[`4ba0fb5c1`](https://github.com/aws-amplify/amplify-ui/commit/4ba0fb5c13484a36c8f44be5eb41313bf3d676cc), [`412538be9`](https://github.com/aws-amplify/amplify-ui/commit/412538be9e37a8dec7cb5e57281895a5b3b63184), [`9ce2d01b0`](https://github.com/aws-amplify/amplify-ui/commit/9ce2d01b09e2f7aa0b218a97bb829a4210350a0a), [`13d0882a8`](https://github.com/aws-amplify/amplify-ui/commit/13d0882a8fe3a9ef63e4b217c5f67cef2c75e148)]:
+  - @aws-amplify/ui-react-core@2.1.11
+  - @aws-amplify/ui@5.5.3
+
+## 1.2.5
+
+### Patch Changes
+
+- [#3198](https://github.com/aws-amplify/amplify-ui/pull/3198) [`9cb6696a2`](https://github.com/aws-amplify/amplify-ui/commit/9cb6696a227b7c5b4ce36920c2093289fa45cc95) Thanks [@ioanabrooks](https://github.com/ioanabrooks)! - fix(ui-react-native): Fixes an issue where undefined values end up in the state machine causing internal errors to be exposed to end users.
+
+- Updated dependencies [[`57f1a3f43`](https://github.com/aws-amplify/amplify-ui/commit/57f1a3f438b8288ffda46764f7a87e1739e61313), [`dd9de348a`](https://github.com/aws-amplify/amplify-ui/commit/dd9de348abcafdcd721600f543d58353957dac25), [`4d652033e`](https://github.com/aws-amplify/amplify-ui/commit/4d652033e120daa82665b4bb4035b56fa8d33bf8)]:
+  - @aws-amplify/ui@5.5.2
+  - @aws-amplify/ui-react-core@2.1.10
+
 ## 1.2.4
 
 ### Patch Changes

package/dist/Authenticator/Authenticator.d.ts

@@ -93,15 +93,15 @@ declare namespace Authenticator {
         style?: import("./Defaults/types").ResetPasswordStyle | undefined;
     }>) & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType>;
     var SetupTOTP: (React.ComponentClass<import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType> & {
-        getTotpSecretCode: import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").GetTotpSecretCode;
         toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
+        totpSecretCode: string | null;
     } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {
         style?: import("./Defaults/types").SetupTOTPStyle | undefined;
     }, any> | React.FunctionComponent<import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType> & {
-        getTotpSecretCode: import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").GetTotpSecretCode;
         toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
+        totpSecretCode: string | null;
     } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & {
         fields: import("./hooks").TextFieldOptionsType[];
     } & {

package/dist/Authenticator/Defaults/SetupTOTP/SetupTOTP.js

@@ -1,14 +1,12 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Logger } from 'aws-amplify';
+import React, { useMemo } from 'react';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
 import { Label } from '../../../primitives';
 import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, } from '../../common';
 import { useFieldValues } from '../../hooks';
 import { styles } from './styles';
 const COMPONENT_NAME = 'SetupTOTP';
-const logger = new Logger('Authenticator');
 const { getBackToSignInText, getConfirmingText, getConfirmText, getSetupTOTPText, getSetupTOTPInstructionsText, } = authenticatorTextUtil;
-const SetupTOTP = ({ fields, getTotpSecretCode, handleBlur, handleChange, handleSubmit, isPending, toSignIn, ...rest }) => {
+const SetupTOTP = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, totpSecretCode, ...rest }) => {
     const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
         componentName: COMPONENT_NAME,
         fields,
@@ -16,32 +14,17 @@ const SetupTOTP = ({ fields, getTotpSecretCode, handleBlur, handleChange, handle
         handleChange,
         handleSubmit,
     });
-    const [secretKey, setSecretKey] = useState(null);
-    const getSecretKey = useCallback(async () => {
-        try {
-            const newSecretKey = await getTotpSecretCode();
-            setSecretKey(newSecretKey);
-        }
-        catch (error) {
-            logger.error(error);
-        }
-    }, [getTotpSecretCode]);
-    useEffect(() => {
-        if (!secretKey) {
-            getSecretKey();
-        }
-    }, [getSecretKey, secretKey]);
     const headerText = getSetupTOTPText();
     const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
     const secondaryButtonText = getBackToSignInText();
-    const body = secretKey ? (<>
+    const body = (<>
       <Label style={styles.secretKeyText}>
         {getSetupTOTPInstructionsText()}
       </Label>
       <Label selectable style={styles.secretKeyText}>
-        {secretKey}
+        {totpSecretCode}
       </Label>
-    </>) : null;
+    </>);
     const buttons = useMemo(() => ({
         primary: { children: primaryButtonText, onPress: handleFormSubmit },
         links: [{ children: secondaryButtonText, onPress: toSignIn }],

package/dist/Authenticator/hooks/useFieldValues/useFieldValues.js

@@ -62,7 +62,7 @@ export default function useFieldValues({ componentName, fields = [], handleBlur,
     const handleFormSubmit = () => {
         const submitValue = isRadioFieldComponent
             ? values
-            : fieldsWithHandlers.reduce((acc, { name, value, type }) => {
+            : fieldsWithHandlers.reduce((acc, { name, value = '', type }) => {
                 /*
                       For phone numbers pass the first 3 charactes from value as dialCode until we support a dialCode picker
                   */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.4";
+export declare const VERSION = "1.2.6";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '1.2.4';
+export const VERSION = '1.2.6';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-native",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -43,8 +43,8 @@
     "type-fest": "^2.3.4"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.5.1",
-    "@aws-amplify/ui-react-core": "2.1.9"
+    "@aws-amplify/ui": "5.5.3",
+    "@aws-amplify/ui-react-core": "2.1.11"
   },
   "peerDependencies": {
     "aws-amplify": ">= 5.0.1",

package/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 
-import { Logger } from 'aws-amplify';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
 
 import { Label } from '../../../primitives';
@@ -18,8 +17,6 @@ import { styles } from './styles';
 
 const COMPONENT_NAME = 'SetupTOTP';
 
-const logger = new Logger('Authenticator');
-
 const {
   getBackToSignInText,
   getConfirmingText,
@@ -30,12 +27,12 @@ const {
 
 const SetupTOTP: DefaultSetupTOTPComponent = ({
   fields,
-  getTotpSecretCode,
   handleBlur,
   handleChange,
   handleSubmit,
   isPending,
   toSignIn,
+  totpSecretCode,
   ...rest
 }) => {
   const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
@@ -46,37 +43,20 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
     handleSubmit,
   });
 
-  const [secretKey, setSecretKey] = useState<string | null>(null);
-
-  const getSecretKey = useCallback(async () => {
-    try {
-      const newSecretKey = await getTotpSecretCode();
-      setSecretKey(newSecretKey);
-    } catch (error) {
-      logger.error(error);
-    }
-  }, [getTotpSecretCode]);
-
-  useEffect(() => {
-    if (!secretKey) {
-      getSecretKey();
-    }
-  }, [getSecretKey, secretKey]);
-
   const headerText = getSetupTOTPText();
   const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
   const secondaryButtonText = getBackToSignInText();
 
-  const body = secretKey ? (
+  const body = (
     <>
       <Label style={styles.secretKeyText}>
         {getSetupTOTPInstructionsText()}
       </Label>
       <Label selectable style={styles.secretKeyText}>
-        {secretKey}
+        {totpSecretCode}
       </Label>
     </>
-  ) : null;
+  );
 
   const buttons = useMemo(
     () => ({

package/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
-import { Logger } from 'aws-amplify';
 
 import { SetupTOTP } from '..';
-import { GetTotpSecretCode } from '@aws-amplify/ui-react-core/dist/types/Authenticator/hooks';
-
-// use empty mockImplementation to turn off console output
-const errorSpy = jest.spyOn(Logger.prototype, 'error').mockImplementation();
 
 const code = {
   name: 'code',
@@ -24,12 +19,12 @@ const props = {
   Footer: SetupTOTP.Footer,
   FormFields: SetupTOTP.FormFields,
   Header: SetupTOTP.Header,
-  getTotpSecretCode: jest.fn() as unknown as GetTotpSecretCode,
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
   isPending: false,
   toSignIn,
+  totpSecretCode: "Let's keep it hush hush",
 };
 
 const {
@@ -37,54 +32,45 @@ const {
   getConfirmingText,
   getConfirmText,
   getSetupTOTPText,
-  getSetupTOTPInstructionsText,
 } = authenticatorTextUtil;
 
-const SECRET_KEY = 'secretKey';
-const mockGetTotpSecretCode = jest.fn().mockResolvedValue(SECRET_KEY);
-
 describe('SetupTOTP', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders as expected', async () => {
+  it('renders as expected', () => {
     const { toJSON, getAllByRole, getByText } = render(
       <SetupTOTP {...props} />
     );
-    await waitFor(() => {
-      expect(toJSON()).toMatchSnapshot();
 
-      expect(getAllByRole('header')).toBeDefined();
-      expect(getByText(getSetupTOTPText())).toBeDefined();
-      expect(getByText(getConfirmText())).toBeDefined();
-      expect(getAllByRole('text')).toHaveLength(fields.length);
-    });
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getAllByRole('header')).toBeDefined();
+    expect(getByText(getSetupTOTPText())).toBeDefined();
+    expect(getByText(getConfirmText())).toBeDefined();
   });
 
-  it('renders an error message', async () => {
+  it('renders an error message', () => {
     const errorMessage = 'Test error message';
     const { toJSON, getByText } = render(
       <SetupTOTP {...props} error={errorMessage} />
     );
-    await waitFor(() => {
-      expect(toJSON()).toMatchSnapshot();
-      expect(getByText(errorMessage)).toBeDefined();
-    });
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText(errorMessage)).toBeDefined();
   });
 
-  it('calls toSignIn an secondary button press', async () => {
-    const errorMessage = 'Test error message';
-    const { getByText } = render(<SetupTOTP {...props} error={errorMessage} />);
-    await waitFor(() => {
-      const secondaryButton = getByText(getBackToSignInText());
+  it('calls toSignIn an secondary button press', () => {
+    const { getByText } = render(<SetupTOTP {...props} />);
 
-      expect(secondaryButton).toBeDefined();
+    const secondaryButton = getByText(getBackToSignInText());
 
-      fireEvent(secondaryButton, 'press');
+    expect(secondaryButton).toBeDefined();
 
-      expect(toSignIn).toHaveBeenCalledTimes(1);
-    });
+    fireEvent(secondaryButton, 'press');
+
+    expect(toSignIn).toHaveBeenCalledTimes(1);
   });
 
   it('shows the correct submit button based on isPending', async () => {
@@ -95,37 +81,4 @@ describe('SetupTOTP', () => {
       expect(queryByText(getConfirmText())).toBe(null);
     });
   });
-
-  it('handles secret code generation as expected', async () => {
-    const { getByText, queryByText, rerender } = render(
-      <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
-    );
-    await waitFor(async () => {
-      expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
-      expect(getByText(getSetupTOTPInstructionsText())).toBeDefined();
-      expect(queryByText(SECRET_KEY)).toBeDefined();
-      expect(getByText(SECRET_KEY).props.selectable).toBe(true);
-      expect(errorSpy).not.toHaveBeenCalled();
-
-      rerender(
-        <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
-      );
-      await waitFor(() => {
-        expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
-        expect(errorSpy).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  it('handles secret code generation errors as expected', async () => {
-    mockGetTotpSecretCode.mockImplementationOnce(() => {
-      throw new Error('Mock Error');
-    });
-
-    render(<SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />);
-    await waitFor(() => {
-      expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
-      expect(errorSpy).toHaveBeenCalledTimes(1);
-    });
-  });
 });

package/src/Authenticator/Defaults/SetupTOTP/__tests__/__snapshots__/SetupTOTP.spec.tsx.snap

@@ -23,6 +23,51 @@ Array [
   >
     Setup TOTP
   </Text>,
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "flexWrap": "wrap",
+          "marginHorizontal": 8,
+          "paddingVertical": 4,
+        },
+      ]
+    }
+  >
+    Copy and paste the secret key below into an authenticator app and then enter the code in the text field below.
+  </Text>,
+  <Text
+    accessibilityRole="text"
+    selectable={true}
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "flexWrap": "wrap",
+          "marginHorizontal": 8,
+          "paddingVertical": 4,
+        },
+      ]
+    }
+  >
+    Let's keep it hush hush
+  </Text>,
   <View
     style={
       Object {
@@ -302,6 +347,51 @@ Array [
   >
     Setup TOTP
   </Text>,
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "flexWrap": "wrap",
+          "marginHorizontal": 8,
+          "paddingVertical": 4,
+        },
+      ]
+    }
+  >
+    Copy and paste the secret key below into an authenticator app and then enter the code in the text field below.
+  </Text>,
+  <Text
+    accessibilityRole="text"
+    selectable={true}
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "flexWrap": "wrap",
+          "marginHorizontal": 8,
+          "paddingVertical": 4,
+        },
+      ]
+    }
+  >
+    Let's keep it hush hush
+  </Text>,
   <View
     style={
       Object {

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

@@ -271,6 +271,32 @@ describe('useFieldValues', () => {
     });
   });
 
+  it('does not submit undefined values for fields', () => {
+    const textField = {
+      label: 'test',
+      type: 'default',
+      name: 'testDefault',
+    } as TextFieldOptionsType;
+    const phoneTextField = {
+      type: 'phone',
+      name: 'testPhone',
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [textField, phoneTextField],
+      })
+    );
+
+    result.current.handleFormSubmit();
+    expect(props.handleSubmit).toHaveBeenCalledTimes(1);
+    expect(props.handleSubmit).toHaveBeenCalledWith({
+      country_code: '',
+      [textField.name]: '',
+      [phoneTextField.name]: '',
+    });
+  });
+
   it('submits the expected values for phone fields', () => {
     const phoneTextField = {
       type: 'phone',
@@ -294,7 +320,7 @@ describe('useFieldValues', () => {
     expect(props.handleSubmit).toHaveBeenCalledTimes(1);
     expect(props.handleSubmit).toHaveBeenCalledWith({
       country_code: mockValue.substring(0, 3),
-      [textField.name]: mockValue.substring(3, mockValue.length),
+      [phoneTextField.name]: mockValue.substring(3, mockValue.length),
     });
   });
 });

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

@@ -96,7 +96,7 @@ export default function useFieldValues<FieldType extends TypedField>({
   const handleFormSubmit = () => {
     const submitValue = isRadioFieldComponent
       ? values
-      : fieldsWithHandlers.reduce((acc, { name, value, type }) => {
+      : fieldsWithHandlers.reduce((acc, { name, value = '', type }) => {
           /*
                 For phone numbers pass the first 3 charactes from value as dialCode until we support a dialCode picker
             */

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.4';
+export const VERSION = '1.2.6';