Amplify UI



Migrate from 1.x to 2.x


Install the 2.x version of @aws-amplify/ui-react-native, 6.x version of aws-amplify and 1.x version of @aws-amplify/react-native.

The 2.x version of @aws-amplify/ui-react-native has a minimum dependency of 6.x on aws-amplify and 1.x on @aws-amplify/react-native. aws-amplify@6 introduced breaking API changes and requires @aws-amplify/react-native.

npm install @aws-amplify/ui-react-native@2.x aws-amplify@6.x @aws-amplify/react-native@1.x
yarn add @aws-amplify/ui-react-native@2.x aws-amplify@6.x @aws-amplify/react-native@1.x

Update and usage

@aws-amplify/ui-react@6.x introduces the following breaking changes:

1. Updates to the Authenticator

The initialState property now accepts forgotPassword in place of resetPassword:

React/React Native

- <Authenticator initialState="resetPassword" />
+ <Authenticator initialState="forgotPassword" />

The corresponding key of the components prop has been updated to reflect the change as well:

- <Authenticator components={{ ResetPassword: MyResetPassword }} />
+ <Authenticator components={{ ForgotPassword: MyForgotPassword }} />

The user object provided after an end user has been authenticated has been updated to reflect the AuthUser interface available from aws-amplify/auth:

- interface AmplifyUser {
-   challengeName?: ChallengeName;
-   attributes?: CognitoAttributes;
-   username: string;  
- }
+ interface AuthUser  {
+   username: string;
+   userId: string;
+   signInDetails?: CognitoAuthSignInDetails;
+ }

AuthUser can be imported from aws-amplify/auth:

import { AuthUser } from 'aws-amplify/auth';

User attributes are now available by directly calling fetchUserAttribues:

import { fetchUserAttributes } from 'aws-amplify/auth';

const userAttributes = await fetchUserAttributes();

The function signatures of the services interface have been updated to align with the shape of the underlying aws-amplify/auth APIs used by the Authenticator and provide improved typescript support:

interface AuthenticatorProps {
  services?: {
-    getCurrentUser?: () => Promise<any>,
+    getCurrentUser?: () => Promise<AuthUser>,

-    handleSignIn?: ({ username, password, }: { username: string;password: string; }) => Promise<any>,
+    handleSignIn?: (input: SignInInput) => Promise<SignInOutput>,

-    handleSignUp?: (formData: any) => Promise<ISignUpResult>,
+    handleSignUp?: (input: SignUpInput) => Promise<SignUpOutput>,

-    handleConfirmSignIn?: ({ user, code, mfaType, }: { user: any; code: string; mfaType: ChallengeName; }) =>Promise<any>),
+    handleConfirmSignIn?: (input: ConfirmSignInInput) => Promise<ConfirmSignInOutput>,

-    handleConfirmSignUp?: ({ username, code, }: { username: string; code: string; }) => Promise<any>,
+    handleConfirmSignUp?: (input: ConfirmSignUpInput) => Promise<ConfirmSignUpOutput>,

-    handleForgotPasswordSubmit?: ({ username, code, password, }: { username: string; code: string; password:string; }) => Promise<string>),
+    handleForgotPasswordSubmit?: (input: ConfirmResetPasswordInput) => Promise<void>,

-    handleForgotPassword?: (formData: any) => Promise<any>,
+    handleForgotPassword?: (input: ResetPasswordInput) => Promise<ResetPasswordOutput>,

The input and return type interfaces are available as imports from aws-amplify/auth:

import { ConfirmSignInInput } from 'aws-amplify';

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.