Migration

@aws-amplify/ui-react-native

Migrate from 1.x to 2.x

Installation

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.

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';