fix(withAuthenticator): RN Set default usernameAttributes to username…

… and autofill the username in ConfirmSignUp Page. (aws-amplify#9723) * Set default usernameAttributes to username and autofill the username in ConfirmSignUp page * Set default usernameAttributes in the Authenticator Component Co-authored-by: Caleb Pollman <[email protected]>
james-ingold · Mar 28, 2022 · 4ce84c7 · 4ce84c7
1 parent b535af2
commit 4ce84c7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 51 deletions.
diff --git a/packages/aws-amplify-react-native/src/Auth/Authenticator.tsx b/packages/aws-amplify-react-native/src/Auth/Authenticator.tsx
@@ -25,18 +25,11 @@ import ConfirmSignUp from './ConfirmSignUp';
 import ForgotPassword from './ForgotPassword';
 import RequireNewPassword from './RequireNewPassword';
 import Greetings from './Greetings';
-import {
-	HubCapsule,
-	OnStateChangeType,
-	ISignUpConfig,
-	UsernameAttributesType,
-} from '../../types';
+import { HubCapsule, OnStateChangeType, ISignUpConfig, UsernameAttributesType } from '../../types';
 
 const logger = new Logger('Authenticator');
 
-const EmptyContainer: FC<{}> = ({ children }) => (
-	<React.Fragment>{children}</React.Fragment>
-);
+const EmptyContainer: FC<{}> = ({ children }) => <React.Fragment>{children}</React.Fragment>;
 
 class AuthDecorator {
 	onStateChange: (state: string) => void;
@@ -47,7 +40,7 @@ class AuthDecorator {
 
 	signIn(username: string, password: string) {
 		const that = this;
-		return Auth.signIn(username, password).then(data => {
+		return Auth.signIn(username, password).then((data) => {
 			that.onStateChange('signedIn');
 			return data;
 		});
@@ -79,10 +72,7 @@ interface IAuthenticatorState {
 	error?: string;
 }
 
-export default class Authenticator extends React.Component<
-	IAuthenticatorProps,
-	IAuthenticatorState
-> {
+export default class Authenticator extends React.Component<IAuthenticatorProps, IAuthenticatorState> {
 	_initialAuthState: string;
 	_isMounted: boolean;
 
@@ -129,16 +119,11 @@ export default class Authenticator extends React.Component<
 	}
 
 	handleStateChange(state: string, data?: any) {
-		if (state === undefined)
-			return logger.info('Auth state cannot be undefined');
+		if (state === undefined) return logger.info('Auth state cannot be undefined');
 
-		logger.info(
-			'Inside handleStateChange method current authState:',
-			this.state.authState
-		);
+		logger.info('Inside handleStateChange method current authState:', this.state.authState);
 
-		const nextAuthState =
-			state === 'signedOut' ? this._initialAuthState : state;
+		const nextAuthState = state === 'signedOut' ? this._initialAuthState : state;
 		const nextAuthData = data !== undefined ? data : this.state.authData;
 
 		if (this._isMounted) {
@@ -188,7 +173,7 @@ export default class Authenticator extends React.Component<
 		const { authState } = this.state;
 		const statesJumpToSignIn = ['signedIn', 'signedOut', 'loading'];
 		Auth.currentAuthenticatedUser()
-			.then(user => {
+			.then((user) => {
 				if (!this._isMounted) return;
 				if (user) {
 					this.checkContact(user);
@@ -198,15 +183,15 @@ export default class Authenticator extends React.Component<
 					}
 				}
 			})
-			.catch(err => {
+			.catch((err) => {
 				if (!this._isMounted) return;
 				logger.debug(err);
 				if (statesJumpToSignIn.includes(authState)) {
 					Auth.signOut()
 						.then(() => {
 							this.handleStateChange(this._initialAuthState, null);
 						})
-						.catch(err => logger.warn('Failed to sign out', err));
+						.catch((err) => logger.warn('Failed to sign out', err));
 				}
 			});
 	}
@@ -219,11 +204,9 @@ export default class Authenticator extends React.Component<
 		// otherwise if truthy, use the supplied render prop
 		// otherwise if falsey, use EmptyContainer
 		const ContainerWrapper: any =
-			this.props.container === undefined
-				? Container
-				: this.props.container || EmptyContainer;
+			this.props.container === undefined ? Container : this.props.container || EmptyContainer;
 
-		const { hideDefault, signUpConfig, usernameAttributes } = this.props;
+		const { hideDefault, signUpConfig, usernameAttributes = 'username' } = this.props;
 		const props_children: any = this.props.children || [];
 		const default_children = [
 			<Loading />,
@@ -236,20 +219,18 @@ export default class Authenticator extends React.Component<
 			<RequireNewPassword />,
 			<Greetings />,
 		];
-		const children = (hideDefault ? [] : default_children)
-			.concat(props_children)
-			.map((child, index) => {
-				return React.cloneElement(child, {
-					key: 'auth_piece_' + index,
-					theme: theme,
-					messageMap: messageMap,
-					authState: authState,
-					authData: authData,
-					onStateChange: this.handleStateChange,
-					Auth: new AuthDecorator(this.handleStateChange),
-					usernameAttributes,
-				});
+		const children = (hideDefault ? [] : default_children).concat(props_children).map((child, index) => {
+			return React.cloneElement(child, {
+				key: 'auth_piece_' + index,
+				theme: theme,
+				messageMap: messageMap,
+				authState: authState,
+				authData: authData,
+				onStateChange: this.handleStateChange,
+				Auth: new AuthDecorator(this.handleStateChange),
+				usernameAttributes,
 			});
+		});
 		return <ContainerWrapper theme={theme}>{children}</ContainerWrapper>;
 	}
 }
diff --git a/packages/aws-amplify-react-native/src/Auth/index.tsx b/packages/aws-amplify-react-native/src/Auth/index.tsx
@@ -64,10 +64,7 @@ export function withAuthenticator<Props extends object>(
 	theme: AmplifyThemeType = null,
 	signUpConfig: ISignUpConfig = {}
 ) {
-	class Wrapper extends React.Component<
-		Props & IWithAuthenticatorProps,
-		IWithAuthenticatorState
-	> {
+	class Wrapper extends React.Component<Props & IWithAuthenticatorProps, IWithAuthenticatorState> {
 		authConfig: any;
 
 		constructor(props: Props & IWithAuthenticatorProps) {
@@ -137,10 +134,7 @@ export function withAuthenticator<Props extends object>(
 			return (
 				<Authenticator
 					{...this.props}
-					hideDefault={
-						this.authConfig.authenticatorComponents &&
-						this.authConfig.authenticatorComponents.length > 0
-					}
+					hideDefault={this.authConfig.authenticatorComponents && this.authConfig.authenticatorComponents.length > 0}
 					signUpConfig={this.authConfig.signUpConfig}
 					onStateChange={this.handleAuthStateChange}
 					children={this.authConfig.authenticatorComponents}
@@ -151,7 +145,7 @@ export function withAuthenticator<Props extends object>(
 		}
 	}
 
-	Object.keys(Comp).forEach(key => {
+	Object.keys(Comp).forEach((key) => {
 		// Copy static properties in order to be as close to Comp as possible.
 		// One particular case is navigationOptions
 		try {