I'm using Firebase to authenticate a user, then using the Firebase ID (uid) to setUserData with the user's row in Postgres via a HTTP request. It works as written, but I'm having trouble with the order execution of these functions because the console is returning 'invalid input syntax for type integer: "undefined"'.
The desired order is
Instead, it seems to run 2, 1, 3, 2. On the second HTTP attempt data is populated. This explains why I sometimes need to log out and log back in for certain components to load with the user's data.
What am I missing to ensure correct order of operations?
Login.js
async function handleSubmit(e) {
e.preventDefault()
try {
setError("")
setLoading(true)
await login(emailRef.current.value, passwordRef.current.value)
setLoading(false)
history.push("/")
} catch {
setLoading(false)
setError("Failed to log in")
}
Auth.js
useEffect(() => {
const fetchProfile = (uid) => {
axios.get(`/user/${uid}`)
.then(async (response) => {
setUserData(await response.data)
console.log(response.data)
console.log(uid)
})
.catch(error => console.error(`Error: ${error}`))
}
const unsubscribe = auth.onAuthStateChanged(async user => {
user && fetchProfile(user.uid)
setCurrentUser(user)
setLoading(false)
})
return unsubscribe
}, [])
const value = {
currentUser,
userData,
login,
signup,
logout,
resetPassword,
updateEmail,
updatePassword
}
return (
<AuthContext.Provider value={value}>
{ !loading && children}
</AuthContext.Provider>
)
I would remove fetchProfile as a function and move unsubscribe outside of useEffect and have currentUser as a dependency to useEffect. useEffect would only run when currentUser has changed.
...
const unsubscribe = auth.onAuthStateChanged(async user => {
//only if there is a user setCurrentUser
if(user){
setCurrentUser(user)
setLoading(false)
}
})
useEffect(() => {
if(!currentUser) return
axios.get(`/user/${currentUser.uid}`)
.then(async (response) => {
setUserData(await response.data)
console.log(response.data)
console.log(uid)
})
.catch(error => console.error(`Error: ${error}`))
}, [currentUser])
...