Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(withAuthenticator): RN Set default usernameAttributes to username and autofill the username in ConfirmSignUp Page. #9723

Merged
merged 3 commits into from
Mar 28, 2022
Merged

fix(withAuthenticator): RN Set default usernameAttributes to username and autofill the username in ConfirmSignUp Page. #9723

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2fb922
Set default usernameAttributes to username and autofill the username …
chintannp Mar 21, 2022
34711cb
Set default usernameAttributes in the Authenticator Component
chintannp Mar 28, 2022
f66f601
Merge branch 'main' into rn-withAuthenticator-signUpConfirm-autofill-…
calebpollman Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 23 additions & 42 deletions packages/aws-amplify-react-native/src/Auth/Authenticator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
});
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -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));
}
});
}
Expand All @@ -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;
Copy link
Contributor Author

@chintannp chintannp Mar 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only change that I have introduced with the PR. All other changes are related to formatting. The previous formatting was not as per the .prettierrc.js mentioned in the package. Hence, I think we should also fix the code formatting as well.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for calling this out 👍

const props_children: any = this.props.children || [];
const default_children = [
<Loading />,
Expand All @@ -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>;
}
}
12 changes: 3 additions & 9 deletions packages/aws-amplify-react-native/src/Auth/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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}
Expand All @@ -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 {
Expand Down