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 fetchUserAttributes:

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