Customising how authentication error messages are displayed

[Matthew632]

I have created a custom UI for the SignIn component but I would also like to customise how error messages are displayed. Instead of being shown in a toast, I would like the error message to appear as plain text in my custom UI.

I pass the below theme into the withAuthenticator HOC to hide the toast:
const myTheme = { toast: {display: 'none'} }

But how do I obtain the error message in the SignIn component?

I can see the error is set into the state of 'SignIn' parent component 'Authenicator' (itself a child of class_1) but how could I access this without modifying the node_modules files?

I can also see that the error is assigned to the 'message' key in the 400 response that is returned from Cognito but how could React capture this?

Any advice would be greatly appreciated.

Matthew

[sammartinez]

@Matthew632 Currently, there isn't a way to customization error messages on your own outside of the toast. I have marked this as a feature request

[Matthew632]

Thanks for your reply Sam

I'm not looking to customise the error message, I just want to display it as plain text within my custom UI instead of it being displayed as a toast.

It may be a question better suited for a React forum but there must be a way to access the message that is in the 'Authenicator' component's state or get it off the 400 response. I was thinking some kind of event listener but I haven't found a solution yet.

[Matthew632]

I found two ways to solve this issue.

Firstly, if you are only interested in ‘signIn’, ‘signUp’ or ‘signOut’ events. You can use the ‘Hub’ utility to listen for an 'auth' event before you attempt an authentication action like signIn and then set the error message to state. Something like this:

import { Hub } from "aws-amplify";

handleLogin = e => {
  Hub.listen("auth", res => {
    const errorMsg = res.payload.data.message ? res.payload.data.message : null;
    this.setState(prevState => ({...prevState, errMsg: errorMsg}));
  })
  this.signIn(e);     
}

Alternatively, if like me you want the error messages off confirm sign in or forgot password events. You can use the Auth API and catch the error message. You have to figure out what needs to be passed into each method but the docs are quite informative. Here's an example for the confirm sign in:

import { Auth } from 'aws-amplify';

confrimSignIn = () => {
        Auth.confirmSignIn(this.props.authData, this.inputs.code, 'SMS_MFA')
        .then(() => this.changeState('signedIn'))
        .catch(err => this.setState({errMsg: err.message}));;
}

[sammartinez]

@Matthew632 As per the callout from you above, I am resolving this request based on your solution.

[nihp]

I am using aws-amplify-react-native. Here I imported all screens from the package itself.

Any option to customize the error message using this package? For eg) I saw a network error below the screen. I need to refactor that. Many other error message alone needs to change

Note: I am using the same UI from this package. Not customized.

import {
  Authenticator,
  AmplifyTheme,
  Greetings,
  SignIn,
  ConfirmSignIn,
  RequireNewPassword,
  SignUp,
  ConfirmSignUp,
  VerifyContact,
  ForgotPassword,
  AuthPiece,
} from "aws-amplify-react-native";

[xitanggg]

If you use the default UI that calls signIn and you also call Auth.confirmSignIn yourself, aren't you doing this twice? I think another alternative is to create a custom SignIn component and overwrite the original signIn method of the SignIn component, and catch the error there. Would love to know if there is a easier way to do this.

[nihp]

I created custom screens.

But here my imports are used in side the Authenticator component.

How can I use this screens inside the Authenticator.

Note:

I have added all my screens in the createStackNavigator and navigated back and forth. Any easy way to add the navigation and handling signIn, signUp, ForgotPassword and Confirmation in custom screens.

If I use the same calls of the Auth can I able to make this as correct for authenticate?

[nihp]

How to set the userAtrributes as different for different environment?

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.