@aws-amplify/ui-react-native 1.2.28 → 2.0.1

package/src/Authenticator/Authenticator.tsx

@@ -8,10 +8,9 @@ import {
   useAuthenticator,
   useAuthenticatorRoute,
   useAuthenticatorInitMachine,
+  useSetUserAgent,
 } from '@aws-amplify/ui-react-core';
 
-import { configureComponent } from '@aws-amplify/ui';
-
 import { useDeprecationWarning } from '../hooks';
 import { DefaultContainer, InnerContainer } from './common';
 import { TypedField, getRouteTypedFields } from './hooks';
@@ -24,8 +23,8 @@ import {
   ConfirmSignUp,
   ConfirmVerifyUser,
   ForceNewPassword,
-  ResetPassword,
-  SetupTOTP,
+  ForgotPassword,
+  SetupTotp,
   SignIn,
   SignUp,
   VerifyUser,
@@ -37,8 +36,8 @@ const DEFAULTS = {
   ConfirmSignUp,
   ConfirmVerifyUser,
   ForceNewPassword,
-  ResetPassword,
-  SetupTOTP,
+  ForgotPassword,
+  SetupTotp,
   SignIn,
   SignUp,
   VerifyUser,
@@ -61,19 +60,22 @@ function Authenticator({
   useDeprecationWarning({
     message:
       'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
-    shouldWarn: !!options?.passwordSettings,
+    // shouldWarn: !!options?.passwordSettings,
+    /**
+     * @migration turn off until getConfig returns zero config
+     */
+    shouldWarn: false,
   });
 
-  React.useEffect(() => {
-    configureComponent({
-      packageName: '@aws-amplify/ui-react-native',
-      version: VERSION,
-    });
-  }, []);
+  useSetUserAgent({
+    componentName: 'Authenticator',
+    packageName: 'react-native',
+    version: VERSION,
+  });
 
   useAuthenticatorInitMachine(options);
 
-  const { authStatus, fields, route } = useAuthenticator(routePropSelector);
+  const { fields, route } = useAuthenticator(routePropSelector);
 
   const components = useMemo(
     // allow any to prevent TS from assuming that all fields are of type `TextFieldOptions`
@@ -84,8 +86,9 @@ function Authenticator({
   const { Component, props } = useAuthenticatorRoute({ components });
 
   const typedFields = getRouteTypedFields({ fields, route });
+  const isAuthenticatedRoute = route === 'authenticated' || route === 'signOut';
 
-  if (authStatus === 'authenticated') {
+  if (isAuthenticatedRoute) {
     return children ? <>{children}</> : null;
   }
 
@@ -110,8 +113,8 @@ Authenticator.ConfirmSignIn = ConfirmSignIn;
 Authenticator.ConfirmSignUp = ConfirmSignUp;
 Authenticator.ConfirmVerifyUser = ConfirmVerifyUser;
 Authenticator.ForceNewPassword = ForceNewPassword;
-Authenticator.ResetPassword = ResetPassword;
-Authenticator.SetupTOTP = SetupTOTP;
+Authenticator.ForgotPassword = ForgotPassword;
+Authenticator.SetupTotp = SetupTotp;
 Authenticator.SignIn = SignIn;
 Authenticator.SignUp = SignUp;
 Authenticator.VerifyUser = VerifyUser;

package/src/Authenticator/Defaults/{ResetPassword/ResetPassword.tsx → ForgotPassword/ForgotPassword.tsx}

@@ -9,9 +9,9 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultResetPasswordProps } from '../types';
+import { DefaultForgotPasswordProps } from '../types';
 
-const COMPONENT_NAME = 'ResetPassword';
+const COMPONENT_NAME = 'ForgotPassword';
 const {
   getResetYourPasswordText,
   getSendCodeText,
@@ -19,7 +19,7 @@ const {
   getBackToSignInText,
 } = authenticatorTextUtil;
 
-const ResetPassword = ({
+const ForgotPassword = ({
   fields,
   handleBlur,
   handleChange,
@@ -28,7 +28,7 @@ const ResetPassword = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultResetPasswordProps): JSX.Element => {
+}: DefaultForgotPasswordProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
@@ -77,9 +77,9 @@ const ResetPassword = ({
   );
 };
 
-ResetPassword.Footer = DefaultFooter;
-ResetPassword.FormFields = DefaultTextFormFields;
-ResetPassword.Header = DefaultHeader;
+ForgotPassword.Footer = DefaultFooter;
+ForgotPassword.FormFields = DefaultTextFormFields;
+ForgotPassword.Header = DefaultHeader;
 
-ResetPassword.displayName = COMPONENT_NAME;
-export default ResetPassword;
+ForgotPassword.displayName = COMPONENT_NAME;
+export default ForgotPassword;

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

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

package/src/Authenticator/Defaults/{SetupTOTP/SetupTOTP.tsx → SetupTotp/SetupTotp.tsx}

@@ -12,20 +12,20 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultSetupTOTPProps } from '../types';
+import { DefaultSetupTotpProps } from '../types';
 import { styles } from './styles';
 
-const COMPONENT_NAME = 'SetupTOTP';
+const COMPONENT_NAME = 'SetupTotp';
 
 const {
   getBackToSignInText,
   getConfirmingText,
   getConfirmText,
-  getSetupTOTPText,
-  getSetupTOTPInstructionsText,
+  getSetupTotpText,
+  getSetupTotpInstructionsText,
 } = authenticatorTextUtil;
 
-const SetupTOTP = ({
+const SetupTotp = ({
   fields,
   handleBlur,
   handleChange,
@@ -35,7 +35,7 @@ const SetupTOTP = ({
   totpSecretCode,
   validationErrors,
   ...rest
-}: DefaultSetupTOTPProps): JSX.Element => {
+}: DefaultSetupTotpProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
@@ -50,14 +50,14 @@ const SetupTOTP = ({
     validationErrors,
   });
 
-  const headerText = getSetupTOTPText();
+  const headerText = getSetupTotpText();
   const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
   const secondaryButtonText = getBackToSignInText();
 
   const body = (
     <>
       <Label style={styles.secretKeyText}>
-        {getSetupTOTPInstructionsText()}
+        {getSetupTotpInstructionsText()}
       </Label>
       <Label selectable style={styles.secretKeyText}>
         {totpSecretCode}
@@ -96,9 +96,9 @@ const SetupTOTP = ({
   );
 };
 
-SetupTOTP.Footer = DefaultFooter;
-SetupTOTP.FormFields = DefaultTextFormFields;
-SetupTOTP.Header = DefaultHeader;
+SetupTotp.Footer = DefaultFooter;
+SetupTotp.FormFields = DefaultTextFormFields;
+SetupTotp.Header = DefaultHeader;
 
-SetupTOTP.displayName = COMPONENT_NAME;
-export default SetupTOTP;
+SetupTotp.displayName = COMPONENT_NAME;
+export default SetupTotp;

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

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

package/src/Authenticator/Defaults/{SetupTOTP → SetupTotp}/styles.ts

@@ -1,10 +1,10 @@
 import { StyleSheet, TextStyle } from 'react-native';
 
-export interface SetupTOTPStyle {
+export interface SetupTotpStyle {
   secretKeyText: TextStyle;
 }
 
-export const styles: SetupTOTPStyle = StyleSheet.create({
+export const styles: SetupTotpStyle = StyleSheet.create({
   // TODO: replace with tokens
   secretKeyText: { flexWrap: 'wrap', paddingVertical: 4, marginHorizontal: 8 },
 });

package/src/Authenticator/Defaults/SignIn/SignIn.tsx

@@ -6,6 +6,7 @@ import {
   DefaultTextFormFields,
   DefaultHeader,
   DefaultContent,
+  FederatedProviderButtons,
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
@@ -19,7 +20,9 @@ const SignIn = ({
   handleChange,
   handleSubmit,
   hideSignUp,
-  toResetPassword,
+  socialProviders,
+  toFederatedSignIn,
+  toForgotPassword,
   toSignUp,
   validationErrors,
   ...rest
@@ -50,10 +53,18 @@ const SignIn = ({
   const signInText = getSignInText();
   const signUpText = getSignUpTabText();
 
+  const body = socialProviders ? (
+    <FederatedProviderButtons
+      route="signIn"
+      socialProviders={socialProviders}
+      toFederatedSignIn={toFederatedSignIn}
+    />
+  ) : null;
+
   const buttons = useMemo(() => {
     const forgotPassword = {
       children: forgotPasswordText,
-      onPress: toResetPassword,
+      onPress: toForgotPassword,
     };
     return {
       primary: { children: signInText, disabled, onPress: handleFormSubmit },
@@ -68,13 +79,14 @@ const SignIn = ({
     hideSignUp,
     signInText,
     signUpText,
-    toResetPassword,
+    toForgotPassword,
     toSignUp,
   ]);
 
   return (
     <DefaultContent
       {...rest}
+      body={body}
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}

package/src/Authenticator/Defaults/SignUp/SignUp.tsx

@@ -6,6 +6,7 @@ import {
   DefaultFooter,
   DefaultTextFormFields,
   DefaultHeader,
+  FederatedProviderButtons,
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
@@ -28,6 +29,8 @@ const SignUp = ({
   hasValidationErrors,
   hideSignIn,
   isPending,
+  socialProviders,
+  toFederatedSignIn,
   toSignIn,
   validationErrors,
   ...rest
@@ -53,6 +56,14 @@ const SignUp = ({
     : getCreateAccountText();
   const secondaryButtonText = getSignInTabText();
 
+  const body = socialProviders ? (
+    <FederatedProviderButtons
+      route="signUp"
+      socialProviders={socialProviders}
+      toFederatedSignIn={toFederatedSignIn}
+    />
+  ) : null;
+
   const buttons = useMemo(
     () => ({
       primary: {
@@ -77,6 +88,7 @@ const SignUp = ({
   return (
     <DefaultContent
       {...rest}
+      body={body}
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}

package/src/Authenticator/Defaults/index.ts

@@ -3,8 +3,8 @@ export { ConfirmSignIn } from './ConfirmSignIn';
 export { ConfirmSignUp } from './ConfirmSignUp';
 export { ConfirmVerifyUser } from './ConfirmVerifyUser';
 export { ForceNewPassword } from './ForceNewPassword';
-export { ResetPassword } from './ResetPassword';
-export { SetupTOTP } from './SetupTOTP';
+export { ForgotPassword } from './ForgotPassword';
+export { SetupTotp } from './SetupTotp';
 export { SignIn } from './SignIn';
 export { SignUp } from './SignUp';
 export { VerifyUser } from './VerifyUser';

package/src/Authenticator/Defaults/types.ts

@@ -11,14 +11,14 @@ export interface ConfirmSignUpStyle {}
 export interface ConfirmVerifyUserStyle {}
 export interface ForceNewPasswordStyle {}
 export interface ResetPasswordStyle {}
-export interface SetupTOTPStyle {}
+export interface SetupTotpStyle {}
 export interface SignInStyle {}
 export interface SignUpStyle {}
 export interface VerifyUserStyle {}
 
 export type DefaultComponents<
   FieldType = {},
-  Props = {}
+  Props = {},
 > = AuthenticatorComponentDefaults<FieldType, Props>;
 
 export type DefaultConfirmResetPasswordProps = React.ComponentPropsWithoutRef<
@@ -56,18 +56,18 @@ export type DefaultForceNewPasswordProps = React.ComponentPropsWithoutRef<
   >['ForceNewPassword']
 >;
 
-export type DefaultResetPasswordProps = React.ComponentPropsWithoutRef<
+export type DefaultForgotPasswordProps = React.ComponentPropsWithoutRef<
   DefaultComponents<
     TextFieldOptionsType,
     { style?: ResetPasswordStyle }
-  >['ResetPassword']
+  >['ForgotPassword']
 >;
 
-export type DefaultSetupTOTPProps = React.ComponentPropsWithoutRef<
+export type DefaultSetupTotpProps = React.ComponentPropsWithoutRef<
   DefaultComponents<
     TextFieldOptionsType,
-    { style?: SetupTOTPStyle }
-  >['SetupTOTP']
+    { style?: SetupTotpStyle }
+  >['SetupTotp']
 >;
 
 export type DefaultSignInProps = React.ComponentPropsWithoutRef<
@@ -90,7 +90,7 @@ export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef<
  */
 type OverrideComponents<
   FieldType = {},
-  Props = {}
+  Props = {},
 > = AuthenticatorComponentOverrides<FieldType, Props>;
 
 type ConfirmSignInComponent<P = {}> = OverrideComponents<
@@ -118,15 +118,15 @@ type ForceNewPasswordComponent<P = {}> = OverrideComponents<
   { style?: ForceNewPasswordStyle } & P
 >['ForceNewPassword'];
 
-type ResetPasswordComponent<P = {}> = OverrideComponents<
+type ForgotPasswordComponent<P = {}> = OverrideComponents<
   TextFieldOptionsType,
   { style?: ResetPasswordStyle } & P
->['ResetPassword'];
+>['ForgotPassword'];
 
-type SetupTOTPComponent<P = {}> = OverrideComponents<
+type SetupTotpComponent<P = {}> = OverrideComponents<
   TextFieldOptionsType,
-  { style?: SetupTOTPStyle } & P
->['SetupTOTP'];
+  { style?: SetupTotpStyle } & P
+>['SetupTotp'];
 
 type SignInComponent<P = {}> = OverrideComponents<
   TextFieldOptionsType,
@@ -152,8 +152,8 @@ export interface Components {
   ConfirmResetPassword?: ConfirmResetPasswordComponent;
   ConfirmVerifyUser?: ConfirmVerifyUserComponent;
   ForceNewPassword?: ForceNewPasswordComponent;
-  ResetPassword?: ResetPasswordComponent;
-  SetupTOTP?: SetupTOTPComponent;
+  ForgotPassword?: ForgotPasswordComponent;
+  SetupTotp?: SetupTotpComponent;
   SignIn?: SignInComponent;
   SignUp?: SignUpComponent;
   VerifyUser?: VerifyUserComponent;

package/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Button, Icon, Label } from '../../../primitives';
 import { usePressableContainerStyles } from '../../../hooks';
 
-import { styles } from './styles';
 import { FederatedProviderButtonProps } from './types';
 
 export default function FederatedProviderButton({
@@ -14,14 +13,13 @@ export default function FederatedProviderButton({
   ...rest
 }: FederatedProviderButtonProps): JSX.Element {
   const pressableStyle = usePressableContainerStyles({
-    containerStyle: styles.container,
     overrideStyle: style,
   });
 
   return (
     <Button {...rest} style={pressableStyle}>
-      <Icon source={source} style={styles.icon} size={20} />
-      <Label style={[styles.label, textStyle]}>{children}</Label>
+      <Icon source={source} size={20} />
+      <Label style={textStyle}>{children}</Label>
     </Button>
   );
 }

package/src/Authenticator/common/FederatedProviderButton/types.ts

@@ -7,7 +7,9 @@ import {
 
 import { ButtonProps } from '../../../primitives';
 
-export interface FederatedProviderButtonProps extends ButtonProps {
+export interface FederatedProviderButtonProps
+  extends Omit<ButtonProps, 'children'> {
+  children?: React.ReactNode;
   source: ImageSourcePropType;
 }
 

package/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx

@@ -1,25 +1,48 @@
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
-import { capitalize } from '@aws-amplify/ui';
+import { signInWithRedirect } from 'aws-amplify/auth';
 
-import { icons } from '../../../assets';
-import { FederatedProviderButton } from '../FederatedProviderButton';
-import { Divider } from '../../../primitives';
+import {
+  SocialProvider,
+  authenticatorTextUtil,
+  capitalize,
+} from '@aws-amplify/ui';
 
-import { styles } from './styles';
+import { Divider } from '../../../primitives';
+import { useTheme } from '../../../theme';
+import { FederatedProviderButton } from '../FederatedProviderButton';
 import { FederatedProviderButtonsProps } from './types';
+import { icons } from '../../../assets';
+import { getThemedStyles } from './styles';
+
+const { getSignInWithFederationText, getOrText } = authenticatorTextUtil;
+
+// use `signInWithRedirect` directly instead of `toFederatedSignIn`
+// exposed on `useAuthenticator` for RN. `@aws-amplify/rtn-web-browser`
+// does not emit an event on federated sign in flow cancellation,
+// preventing the `Authenticator` from updating state and leaving the
+// UI in a "pending" state
+const handleSignInWithRedirect = (
+  provider: 'amazon' | 'apple' | 'facebook' | 'google'
+) => signInWithRedirect({ provider: capitalize(provider) });
 
 export default function FederatedProviderButtons({
+  buttonStyle,
+  dividerLabelStyle,
+  route,
   socialProviders,
-  toFederatedSignIn,
+  style,
 }: FederatedProviderButtonsProps): JSX.Element | null {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
   const providerButtons = useMemo(
     () =>
-      socialProviders?.map((provider) => {
+      socialProviders?.map((provider: SocialProvider) => {
         const providerIconSource = icons[`${provider}Logo`];
 
         const handlePress = () => {
-          toFederatedSignIn({ provider });
+          handleSignInWithRedirect(provider);
         };
 
         return (
@@ -27,19 +50,24 @@ export default function FederatedProviderButtons({
             key={provider}
             onPress={handlePress}
             source={providerIconSource}
-            style={styles.button}
+            style={[themedStyle.button, buttonStyle]}
           >
-            {`Sign In with ${capitalize(provider)}`}
+            {getSignInWithFederationText(route, provider)}
           </FederatedProviderButton>
         );
       }),
-    [socialProviders, toFederatedSignIn]
+    [route, socialProviders, themedStyle, buttonStyle]
   );
 
   return providerButtons?.length ? (
-    <View style={styles.container}>
+    <View
+      style={[themedStyle.container, style]}
+      testID="amplify__federated-provider-buttons"
+    >
       {providerButtons}
-      <Divider labelStyle={styles.text}>Or</Divider>
+      <Divider labelStyle={[themedStyle.dividerLabel, dividerLabelStyle]}>
+        {getOrText()}
+      </Divider>
     </View>
   ) : null;
 }

package/src/Authenticator/common/FederatedProviderButtons/styles.ts

@@ -1,7 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../../theme';
 import { FederatedProviderButtonStyle } from './types';
 
-export const styles: FederatedProviderButtonStyle = {
-  button: { marginVertical: 8 },
-  container: { paddingVertical: 4 },
-  text: { paddingVertical: 8, textAlign: 'center' },
+export const getThemedStyles = (
+  theme: StrictTheme
+): FederatedProviderButtonStyle => {
+  const { space } = theme.tokens;
+
+  return StyleSheet.create({
+    button: {
+      marginVertical: space.xs,
+    },
+    dividerLabel: {
+      textAlign: 'center',
+    },
+    container: {
+      marginHorizontal: space.small,
+    },
+  });
 };

package/src/Authenticator/common/FederatedProviderButtons/types.ts

@@ -1,16 +1,19 @@
-import { TextStyle, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
 
 import { AuthenticatorMachineContext } from '@aws-amplify/ui-react-core';
 
-// TODO extend from ViewProps, add button style related style props
 export interface FederatedProviderButtonsProps
   extends Pick<
-    AuthenticatorMachineContext,
-    'socialProviders' | 'toFederatedSignIn'
-  > {}
+      AuthenticatorMachineContext,
+      'route' | 'socialProviders' | 'toFederatedSignIn'
+    >,
+    ViewProps {
+  buttonStyle?: StyleProp<ViewStyle>;
+  dividerLabelStyle?: StyleProp<TextStyle>;
+}
 
 export interface FederatedProviderButtonStyle {
   button: ViewStyle;
   container: ViewStyle;
-  text: TextStyle;
+  dividerLabel: TextStyle;
 }

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

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Logger } from 'aws-amplify';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { ValidationError } from '@aws-amplify/ui';
 
 import { OnChangeText, TextFieldOnBlur, TypedField } from '../types';

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

@@ -1,4 +1,4 @@
-import { Logger } from 'aws-amplify';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import {
   authenticatorTextUtil,
   isString,

package/src/Authenticator/types.ts

@@ -7,11 +7,8 @@ import { Components } from './Defaults';
 
 type SupportedAuthenticatorMachineOptions = Omit<
   AuthenticatorMachineOptions,
-  // `socialProviders` not supported as a prop,
-  // feature is not enabled in React Native `Authenticator`
-  | 'socialProviders'
   // `formFields` prop in RWA is to be deprecated
-  | 'formFields'
+  'formFields'
 >;
 
 export interface AuthenticatorProps

package/src/InAppMessaging/components/InAppMessageDisplay/handleMessageLinkAction.ts

@@ -1,8 +1,8 @@
 import { Linking } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { HandleMessageLinkAction } from '@aws-amplify/ui-react-core-notifications';
 
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 
 const handleMessageLinkAction: HandleMessageLinkAction = async (
   url: string

package/src/InAppMessaging/hooks/useMessageImage/useMessageImage.ts

@@ -1,16 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 import { Image } from 'react-native';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
 import {
-  MessageImage,
-  MessageLayout,
+  InAppMessageImage,
+  InAppMessageLayout,
 } from '@aws-amplify/ui-react-core-notifications';
 
 import { ImageDimensions, ImagePrefetchStatus, UseMessageImage } from './types';
 import { getLayoutImageDimensions, prefetchNetworkImage } from './utils';
 
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 
 /**
  * Handles prefetching and dimension setting for message images
@@ -20,8 +20,8 @@ const logger = new Logger('Notifications.InAppMessaging');
  * @returns message image dimensions and rendering related booleans
  */
 export default function useMessageImage(
-  image: MessageImage | undefined,
-  layout: MessageLayout
+  image: InAppMessageImage | undefined,
+  layout: InAppMessageLayout
 ): UseMessageImage {
   const { src } = image ?? {};
   const shouldPrefetch = !!src;