Moralis Login issue in react

Moralis General
#1

This is my signup page

import {
    Button,
    Checkbox,
    Flex,
    FormControl,
    FormLabel,
    Heading,
    Input,
    Link,
    Stack,
    Image,
    Text,
  } from '@chakra-ui/react';
import React from 'react'
import { useState , useEffect } from 'react';
import { useMoralis } from "react-moralis";
import { useNavigate } from 'react-router-dom';
  
  export default function Signup() {
    
    const { signup, isAuthenticated, hasAuthError, auth , user } = useMoralis();
    const navigate = useNavigate();
    

    const [signupData , setSignupData] = useState({
      name: '',
      email: '',
      password: '',
      cpassword: ''
    })

    const {name , email , password , cpassword} = signupData

    const onChange = (e) => {
      setSignupData((prevState) => ({
        ...prevState,
        [e.target.name] : e.target.value
      }) )
    }

    useEffect(() => {
      console.log('AUTH:', auth)
      console.log('HASAUTH ERROR:', hasAuthError)
      console.log('USER:', user)
      if (auth.state === "authenticated") {
        navigate('/')
  
      console.log("auth...!!")
      }
      else{
        console.log("Invalid credentials")
      }
    },[auth])


    
   
    return (
      <Stack minH={'100vh'} direction={{ base: 'column', md: 'row' }}>
           <Flex flex={1}>
          <Image
            alt={'Signup Image'}
            objectFit={'cover'}
            src={
              'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80'
            }
          />
        </Flex>
        <Flex p={8} flex={1} align={'center'} justify={'center'}>
          <Stack spacing={4} w={'full'} maxW={'md'}>
            <Heading fontSize={'2xl'}>Sign up to your account</Heading>
            <FormControl id="name">
              <FormLabel>Full Name</FormLabel>
              <Input type="text" name='name' value={name} onChange={onChange} />
            </FormControl>
            <FormControl id="email">
              <FormLabel>Email address</FormLabel>
              <Input type="email" name='email' value={email} onChange={onChange}  />
            </FormControl>
            <FormControl id="password">
              <FormLabel>Password</FormLabel>
              <Input type="password" name='password' value={password} onChange={onChange} />
            </FormControl>
            <FormControl id="confirm-password">
              <FormLabel> Confirm Password</FormLabel>
              <Input type="password" name='cpassword' value={cpassword} onChange={onChange} />
            </FormControl>
            <Stack spacing={10} pt={2}>
              <Button
                type= "submit"
                loadingText="Submitting"
                size="lg"
                bg={'blue.400'}
                color={'white'}
                _hover={{
                  bg: 'blue.500',
                }}
                onClick={() => signup(signupData.name , signupData.email ,signupData.password , signupData.cpassword)}
                
                >
                  
                Sign up
              </Button>
              console.log(auth)
            </Stack>
            <Stack pt={6}>
              <Text align={'center'}>
                Already a user? <Link color={'blue.400'}>Login</Link>
              </Text>
            </Stack>
          </Stack>
        </Flex>
       
      </Stack>
    );
  }

I am getting an error like this..

Failed to load resource: the server responded with a status of 400 ()
AUTH: Objecterror: Error: Email address format is invalid.
    at handleError (http://localhost:3000/static/js/bundle.js:124664:17)state: "error"[[Prototype]]: Object
Signup.jsx:43 HASAUTH ERROR: true
Signup.jsx:44 USER: null
Signup.jsx:51 Invalid credentials


How can I fix this .. Please help
#2

can you log the parameters that are used here?

#3

It is showing all the data which i enter in the input .
I have to console like this right ?
console.log(signupData.name , signupData.email ,signupData.password , signupData.cpassword)

#4

Yeppp like that, try and see what you get

#5

Yes , I get the data which I enter in the input

#6

cool hmm so what’s the issue again? can’t find any description above

#7

AUTH: {state: ‘error’, error: Error: Email address format is invalid.
at handleError (http://localhost:3000/static/js/bundle.…}

this same error

#8

btw I don’t think you need to include confirm password in signup

#9

Why ?

I want tht in my project

#10

coz it’s not part of the parameters for the signup function. Seems like now we even just need username and password only for this.

Here it also shows another way to signup with more like manual DB insert approach.

https://docs.moralis.io/moralis-server/users/email-login#sign-up-with-username

But confirm password usually isn’t a part of any authentication function in general, it’s usually something handled by form validation libraries to check whether the password and confirm password are the same.

#11

But why is it showing email format is invalid ?

#12

hmmm how does your email looks like? just give me the format (coz email are sensitive)

based on the error, it might be you’re inputting something that’s not email :thinking:

#13

Normal - [email protected]

#14

hmmm :thinking: how about you try

() => signup(signupData.name, signupData.password , signupData.email)
#15

POST https://qjion5szz2ou.usemoralis.com:2053/server/users 400

AUTH: {state: ‘error’, error: Error: Email address format is invalid.
at handleError (http://localhost:3000/static/js/bundle.…}

No the same error…

#16

this shouldnt give this error, i think if an email has @ and . it should be a valid entry :thinking:, try check if there are spaces before or after and delete the spaces it should just be plain email :thinking:
and if it is acceptable in your input field it should aslo work there

#17

you can also try to use individual hooks for the properties which i dont believe is the problem but you can try that out and log out signupData to see what it return when you try to sign up