[SOLVED] Sign-up Error Handling

Moralis General
#1

Good afternoon!

I’ve been having a little trouble implementing custom error handling for my signup function.
Ideally I would like to handle any errors from sign-up, log-in and wallet authentication by saving them to state within the Next.js project and use them in custom alerts to the user.

I noticed in the react-moralis docs, it mentions “most hooks” having an error variable provided by default which I can see displayed in the console but any additional use of this variable in my catch block is being ignored. In the case bellow this refers to the alert but any other logic using the error is also ignored.

Here is my function:

 const handleSignup = async () => {
    try {
      await signup(form.username, form.password);
    } catch (error) {
      alert(error);
      
    }
  };

Ironically, when adding the {throwOnError = true} to the arguments for signup() I get the intended behavior, the custom error alert works, but the error that is returned is complaining that the email format should be of type string. Adding a dummy email parameter also doesn’t change this behavior.

Is there a way that a user can sign-up with just username and password and I am still able to use the throwOnError argument?

#2

For clarity - my test scenario is trying to sign-up a user with a username that is already taken.
When adding throwOnError my alert works but not for the correct reason.

 const handleSignup = async () => {
    try {
      await signup(form.username, form.password, {
        throwOnError: true,
      });
    } catch (error) {
      alert(error);
    }
  };

results in the following -

Google Chrome 21_06_2022 15_47_57
Google Chrome 21_06_2022 15_47_571255×584 59.2 KB

#3

Apologies for spam but here is an example of the intended behavior that is currently working in my loggin function -

 const handleLogin = async () => {
    try {
      await login(form.username, form.password, { throwOnError: true });
    } catch (error) {
      let svrErr = {
        code: error.code,
        message: error.message,
      };
      setServerErrors(svrErr);
    }
  };

- Google Chrome 21_06_2022 16_06_29
- Google Chrome 21_06_2022 16_06_291361×665 52.6 KB

here you can see that throwOnError is allowing me to save an errors object to state and it’s then used in form validation.

Thanks in advance.

#4

You got that error due to the parameters the signup expects in order of (username, password, email, otherFields, options) and the expected type for the third option which is email in this case is a string or undefined whereas you passed an object. Here is a little fix you can make here in the signup

await signup(form.username, form.password, undefined, undefined, {
  throwOnError: true,
});
1 Like
#5

Ideal! I can see that it’s now working. I should have paid more attention to the order of parameters. Thanks for your time!