Unhandled Rejection (ValidationError): username can only be a string type [SOLVED]

**i am Newbie both react and moralis **

i want to create a signup form using email pass and username i created here with just to input field but it returns this error

Unhandled Rejection (ValidationError): username can only be a string type

my code here signup jsx file

const SigUp = () => {
  const [email, setEmail] = useState()
  const [username, setUsername] = useState()
  const [password, setPassword] = useState()
  const {signup , isAuthenticated, isAuthenticating,
      authError, 

} = useMoralis()
    
  if(isAuthenticated){
      return(
<Title> welcome  to  our  official  page</Title>
)}
return(
<Container>
<Title>create your  free account</Title>
<Box>
 {authError &&(
<Para> {authError.message}</Para>
)}
<Input placeholder='email' value={email}
onChange={(e) => setEmail(e.currentTarget.value)} />
<Input type='password' laceholder='password' value={password}
onChange={(e) => setPassword(e.currentTarget.value)} />
 <Button disabled = {isAuthenticating} onClick={signup}> signup</Button>
</Box>
</Container>)}

screenshot

Hi, it looks like you didn’t use username variable in this signup jsx file.

i ADDED USERNAME STATE HERE BUT STILL I GET SOM ERROR

SEE MY CODE HERE I ADDED COMMENT FOR EVRY INPUT FIELD

  { /*USER NAME*/ }
<Input placeholder='username' value={username}
onChange={(e) => setUsername(e.currentTarget.value)} />
{ /*EMAIL*/ }
<Input placeholder='email' value={email}
onChange={(e) => setEmail(e.currentTarget.value)} />
 { /*PASSWORD */ }
<Input type='password' laceholder='password' value={password}
onChange={(e) => setPassword(e.currentTarget.value)} />

You are using the registration function incorrectly. It should be liek this:

<Button disabled={isAuthenticating} onClick={() => signup(username, password, email)}>

The final code:

const SignUp = () => {
  const [email, setEmail] = useState();
  const [username, setUsername] = useState();
  const [password, setPassword] = useState();
  const { signup, isAuthenticated, isAuthenticating, authError } = useMoralis();

  if (isAuthenticated) {
    return <Title> welcome to our official page</Title>;
  }
  return (
    <Container>
      <Title>create your free account</Title>
      <Box>
        {authError && <Para> {authError.message}</Para>}
        <Input
          placeholder="email"
          value={email}
          onChange={(e) => setEmail(e.currentTarget.value)}
        />
        <Input
          type="password"
          laceholder="password"
          value={password}
          onChange={(e) => setPassword(e.currentTarget.value)}
        />
        <Button disabled={isAuthenticating} onClick={() => signup(username, password, email)}>
          signup
        </Button>
      </Box>
    </Container>
  );
};

Thank You Solved

and Good Night

1 Like

You are welcome! Good Night :sleeping: