AuthError – Username cannot be empty

Total
1
Shares

I created SignUp page for My React App,Later Im trying to store those SignUp Information in AWS Amplify, I follow the Documentation Steps to store SignUp Information in Amplify after finishing the Work,I expected all the information are stored Online,But That was Wrong.,I got Below ERROR

[ERROR] 55:29.258 AuthError - Username cannot be empty
console.<computed> @ index.js:1
SignUp.js:20 AuthError: Username cannot be empty
    at new AuthError (http://localhost:3000/static/js/vendors~main.chunk.js:10816:20)
    at AuthClass.rejectAuthError (http://localhost:3000/static/js/vendors~main.chunk.js:10734:27)
    at AuthClass.signUp (http://localhost:3000/static/js/vendors~main.chunk.js:8550:19)
    at signUp (http://localhost:3000/static/js/main.chunk.js:1406:62)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/vendors~main.chunk.js:376157:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/vendors~main.chunk.js:376206:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/vendors~main.chunk.js:376266:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/vendors~main.chunk.js:376281:29)
    at executeDispatch (http://localhost:3000/static/js/vendors~main.chunk.js:380516:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/vendors~main.chunk.js:380548:11)
    at processDispatchQueue (http://localhost:3000/static/js/vendors~main.chunk.js:380561:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/vendors~main.chunk.js:380572:7)
    at http://localhost:3000/static/js/vendors~main.chunk.js:380783:16
    at batchedEventUpdates$1 (http://localhost:3000/static/js/vendors~main.chunk.js:394468:16)
    at batchedEventUpdates (http://localhost:3000/static/js/vendors~main.chunk.js:375955:16)
    at dispatchEventForPluginEventSystem (http://localhost:3000/static/js/vendors~main.chunk.js:380782:7)
    at attemptToDispatchEvent (http://localhost:3000/static/js/vendors~main.chunk.js:378265:7)
    at dispatchEvent (http://localhost:3000/static/js/vendors~main.chunk.js:378183:23)
    at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:413814:16)
    at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:383563:14)
    at discreteUpdates$1 (http://localhost:3000/static/js/vendors~main.chunk.js:394485:18)
    at discreteUpdates (http://localhost:3000/static/js/vendors~main.chunk.js:375967:16)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/vendors~main.chunk.js:378149:7)
 


Here Is The Code:



    import React,{useState} from 'react'
    import Amplify,{Auth} from 'aws-amplify'
    import awsconfig from "../SignProperties/aws-exports"
    Amplify.configure(awsconfig)
    function SignUp() {
        const initialValues={username:"",password:"",email:"",phoneNumber:""}
        const [loginAttributes,setLoginAttributes]=useState(initialValues)
        const onChange=(e)=>{
            setLoginAttributes({[e.target.name]:e.target.value})
    
        }
        const signUp=async()=>{
            const {username,password,email,phoneNumber}=loginAttributes
            try{
                await Auth.signUp({username,password,attributes:{
                    email,phoneNumber
                }
            })
            console.log("Succesful")}
            catch(error){console.log(error)}
        }
        return (
            <div className="signUpScreen">
                <input onChange={onChange} name="username" placeholder="username" ></input>
                <input onChange={onChange} name="password" placeholder="password" type="password"></input>
                <input onChange={onChange} name="Email" placeholder="Email" type="email"></input>
                <input onChange={onChange} name="Phone_Number" placeholder="Phone_Number" type="number"></input>
                <button onClick={signUp}> Sign Up</button>
            </div>
        )
    }
    
    export default SignUp

Please Help to find Out The Error i have Done


Solution

The problem is that you are not updating loginAttributes value, you are simply redefining the loginAttributes value.

First when you enter your user name you set the loginAttributes to {username : name}, then when you enter the password, you simply redefining the loginAttributes to {password: ‘password’}, So it will remove the username property from loginAttributes.

So you can write like this in onChange function

_x000D_

_x000D_

setLoginAttributes(prev => ({
  ...prev,
  [e.target.name]: e.target.value
})

_x000D_

_x000D_

_x000D_

what it will do is update the new value with previous loginAttributes values.

Leave a Reply

Your email address will not be published. Required fields are marked *