User object not updating in order in react

I am using Reack hooks and having some trouble with asynchronous functions executing before objects are updated. My understanding of Moralis React hooks is that user gets automatically updated after authenticate(). I see the user object in my useEffect() but when it returns to my handler, user is null

function Main(props) {
    const { authenticate, isAuthenticated, user } = useMoralis()
    const [ authComplete, setAuthComplete ] = useState(isAuthenticated)
    const onButtonSubmit = async(e) => {
        e.preventDefault()
        if (!isAuthenticated) {
            await authenticate()
            console.log(user) // returns NULL
            if (authComplete === true) { // returns FALSE
                validateCredentials(user)
            }
		}
		else {
			validateCredentials()
		}
    }

	useEffect(() => {
        console.log(user) // returns correct user object
		if (user === null) {
			setAuthComplete(false)
		} 
		else {
			setAuthComplete(true)
		}
	}, [user])
}

maybe you need to fetch the user data: https://github.com/MoralisWeb3/react-moralis#refetch-user-data-refetchuserdata

I have tried this but an error is logged

            await authenticate()
            await new Promise(r => setTimeout(r, 3000)); // wait 3 seconds
            await refetchUserData() // ERROR
            await new Promise(r => setTimeout(r, 3000)); // wait 3 seconds
            console.log(user)

Ok. It looks like it doesn’t work. I guess that it worked fine with previous versions of Moralis sdk

@mfsmoonshine, can you add code on codesandbox that replications this problem?

@cryptokid Here you go. Same issue still happening. https://codesandbox.io/s/sharp-pare-7wm3v?file=/src/App.js

Best way to solve this is to use the onSuccess param in the authenticate function

authenticate({
  onSuccess: user => console.log(user)
})

Alternatively you can use an useEffect hook, and check when the user variable has a value an isAuthenticated becomes true.