[SOLVED] Cannot sign up user with an empty username

Moralis General
#1

Hey, I’m following this tutorial - https://www.youtube.com/watch?v=FaTyOg7ickc and I’m trying to sign up the user using the email and password. I’m getting “Cannot sign up user with an empty username.” error. What am I doing wrong? It works in the tutorial.

import { Button, Alert, AlertIcon, Box, AlertTitle, AlertDescription, CloseButton, Input } from "@chakra-ui/react";
import { Container, Heading } from "@chakra-ui/layout";
import { useMoralis } from "react-moralis";
import { useState } from "react";

const SignUp = () => {
  const { signup } = useMoralis();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return <Box>
    <Input placeholder="Email" value={email} onChange={(event) => setEmail(event.currentTarget.value)} />
    <Input placeholder="Password" type="password" value={password} onChange={(event) => setPassword(event.currentTarget.value)} />
    <Button onClick={() => signup()}>Sign up</Button>
  </Box>
}

function App() {
  const { authenticate, isAuthenticated, isAuthenticating, authError, logout } = useMoralis();

  if(isAuthenticated) {
    return (
      <Container>
        <Heading>Welcome to the game</Heading>
        <Button onClick={() => logout()}>Logout</Button>
      </Container>
    );
  }

  return (
    <Container>
      Game

      {authError && <Alert status="error">
        <AlertIcon />
        <Box flex="1">
          <AlertTitle>Authentication has failed!</AlertTitle>
          <AlertDescription display="block">
            {authError.message}
          </AlertDescription>
        </Box>
        <CloseButton position="absolute" right="8px" top="8px" />
      </Alert>}

      {/*<Button isLoading={isAuthenticating} onClick={() => authenticate()}>Authenticate</Button>*/}

      <SignUp />
    </Container>
  );
}

export default App;
2 Likes
#2

Hi @ApesTogetherStrong,

I guess the video missed the part where we input the email and password arguments in the sign-up call.

Please check the video at 10:40 and you’ll see it there.

The code -

<Button onClick={() => signup()}>Sign up</Button>

The code that’s there in the video -

<Button onClick={() => signup(email, password, email)}>Sign up</Button>
4 Likes
#3

This worked, thanks! :slight_smile:

1 Like