AWS Cognito 'Index.handler' Error in React-Redux app - reactjs

Question

I am trying to learn how to integrate AWS Cognito Auth into a custom React-Redux app. I am running into an issue during the sign-up event with the following error message from cognito:
"message: "CustomMessage failed with error index.handler is undefined or not exported."}"
This error is being generated from my 'signup' action. So I know that react is passing off the form data to redux accurately. The Cognito console also successfully shows a registered user, however the email confirmation the user is supposed to get after the signup process is not sent (I am using real email's to test).
Below are my action and reducers for the signup process. Any suggestions would be helpful.
--FYI I made sure that my Amplify configuration is in the root and that my src directory has an index.js file. I am also using email as the username.
ACTION
// SIGN UP USER
export const signup = ({
firstname,
lastname,
username,
password,
phonenumber,
}) => async (dispatch) => {
try {
const res = await Auth.signUp({
username,
password,
attributes: {
given_name: firstname,
family_name: lastname,
phone_number: phonenumber,
},
});
console.log(res);
dispatch({
type: SIGNUP_SUCCESS,
payload: res,
});
// get if user is signed in
dispatch(loadUser());
} catch (error) {
console.log(error);
dispatch({
type: SIGNUP_FAIL,
});
}
};
REDUCER
case SIGNUP_SUCCESS:
return {
...state,
...payload,
isAuthenticate: true,
};
case AUTH_ERROR:
case LOGOUT:
return {
...state,
isAuthenticated: false,
user: null,
};
REACT FORM
const SignUp = ({ signup, isAuthenticated }) => {
// collect data from form
const [formData, setFormData] = useState({
firstname: '',
lastname: '',
username: '',
password: '',
phonenumber: '',
});
//extract data into formData object
const { firstname, lastname, username, password, phonenumber } = formData;
// collect input data on click
const onChange = (event) =>
setFormData({ ...formData, [event.target.name]: event.target.value });
// call action on submit of form
const onSubmit = async (event) => {
event.preventDefault();
try {
// call signup action
signup({ firstname, lastname, username, password, phonenumber });
//this.props.history.push('/welcome');
return <Redirect to='/welcome' />;
} catch (error) {
console.log(error.message);
}
};
// if user is already signed up/in then return to dashboard
if (isAuthenticated) {
return <Redirect to='/dashboard' />;
}
return (
<Fragment>
<div className='row signin'>
<div className='col-md-3 col-sm-auto col-lg-3'></div>
<div className='col-md-6 col-sm-auto col-lg-6 text-center '>
{/* onSubmit={this.handleSubmit} */}
<form className='form-signin' onSubmit={onSubmit}>
<h1 className='h3 font-weight-normal'>Please sign in</h1>
<label for='inputFirstName' className='sr-only'>
First Name
</label>
<input
type='text'
id='inputFirstName'
name='firstName'
className='form-control'
placeholder='First Name'
required
onChange={onChange}
></input>
<label for='inputLastName' className='sr-only'>
Last Name
</label>
<input
type='text'
id='inputLastName'
name='lastname'
className='form-control'
placeholder='Last Name'
required
onChange={onChange}
></input>
<label for='inputEmail' className='sr-only'>
E-mail
</label>
<input
type='text'
name='username'
id='inputemail'
className='form-control'
placeholder='Email address'
required
autofocus
onChange={onChange}
></input>
<label for='inputPassword' className='sr-only'>
Password
</label>
<input
type='password'
id='inputPassword'
name='password'
className='form-control'
placeholder='Password'
required
onChange={onChange}
></input>
<label for='inputPhoneNumber' className='sr-only'>
Phone Number
</label>
<input
type='text'
id='inputPhoneNumber'
name='phonenumber'
className='form-control'
placeholder='Phone Number'
required
onChange={onChange}
></input>
<button className='btn btn-lg btn-primary btn-block' type='submit'>
Sign up
</button>
</form>
</div>
<div className='col-md-3 col-sm-auto col-lg-3'></div>
</div>
</Fragment>
);
};
SignUp.propTypes = {
signup: propTypes.func.isRequired,
isAuthenticated: propTypes.bool,
};
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps, { signup })(SignUp);

Answer 1

That error message sounds like a Lambda function is failing. Do you by chance have Cognito set to trigger a Lambda function with a custom signup message?
It sounds like you have customized the 'send email confirmation' behavior with your own Lambda function, and that function is not written/packaged/deployed correctly.