Create a user document after creating a user in authentication in firebase - reactjs

Question

I'm trying to figure out how to create a user document in firestore after a user auth record is created.
My current attempt is below.
When i add the async/await the code generates error messages. When I remove them, the authentication part works to create a user record in the authentication part of firebase, but the firestore record is not created. No error message is generated.
Can anyone see what's going wrong?
import React, {useState} from 'react';
import { auth, firestore } from '../../../services/firebase/firebase';
import { useHistory } from 'react-router-dom';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import { Buttons } from '../navigation/styles';
export default function FormDialog() {
const [open, setOpen] = React.useState(false);
let [loading, setLoading] = useState(false);
const history = useHistory();
const [displayName, setDisplayName ] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState(null);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleSubmit = async (event) => {
setLoading(true);
event.preventDefault();
auth.createUserWithEmailAndPassword( email, password)
THE ATTEMPT BELOW LOGS THE UID, BUT SAYS TypeError: user.updateProfile
is not a function
.then((res) => {
console.log("logging user", (auth.currentUser.uid) );
const user = auth.currentUser.uid;
return user.updateProfile({
displayName: displayName
})
firestore.collection('users').doc(auth.currentUser.uid)
.set({
fullName: displayName,
createdAt: firestore.fieldValue.serverTimestamp(),
})
})
THIS IS ANOTHER ATTEMPT, WHICH ASLO DOESNT WORK TO MAKE THE USER
DOCUMENT IN FIRESTORE
.then(() => {
if (auth.currentUser != null) {
auth.currentUser.updateProfile({
displayName: displayName
})
firestore.collection('users').doc(auth.currentUser.uid)
.set({
fullName: displayName,
createdAt: firestore.fieldValue.serverTimestamp(),
})
}
})
//THIS IS ANOTHER ATTEMPT, IN THE ALTERNATIVE TO THE ABOVE, WHICH ALSO
DOESNT WORK
.then((res) => {
const user = auth.currentUser;
return user.updateProfile({
displayName: displayName
})
firestore.collection('users').doc(auth.currentUser.uid)
.set({
fullName: displayName,
createdAt: firestore.fieldValue.serverTimestamp(),
})
})
.then(() => {
history.push("/");
})
.catch(error => {
console.error(error);
})
.then(() => {
clear();
})
.then(() => {
handleClose()
})
.finally(() => {
setLoading(false);
});
};
THIS IS A FURTHER ATTEMPT, WHICH I CAN'T TEST BECAUSE SOMETHING ABOUT THE THEN STATEMENT THAT TRIES TO PUSH HISTORY IS CONSIDERED TO HAVE A PARSING ERROR. I CAN'T FIND ANY TUTORIALS ABOUT HOW TO FIGURE OUT SOLVING THOSE.
const createUserDocument = async (user, displayName) => {
if (!user) return;
const userRef = firestore.doc(`users/${user.uid}`);
const snapshot = await userRef.get();
if (!snapshot.exists) {
const { email } = user;
const { displayName } = displayName;
try {
await userRef.set({
displayName,
email,
createdAt: new Date(),
});
} catch (error) {
console.log('Error in creating user', error);
}
}
};
const handleSubmit = async (event) => {
setLoading(true);
event.preventDefault();
try {
const { user } = await auth.createUserWithEmailAndPassword(
email,
password
);
await createUserDocument(user, { displayName });
} catch (error) {
console.log('error', error);
}
.then(() => {
history.push("/");
})
.then(() => {
clear();
})
.then(() => {
handleClose()
})
.finally(() => {
setLoading(false);
});
};
//continuing after all current attempts
const onChangeHandler = event => {
const { name, value } = event.currentTarget;
if (name === "userEmail") {
setEmail(value);
} else if (name === "userPassword") {
setPassword(value);
} else if (name === "displayName") {
setDisplayName(value);
}
};
const clear = () => {
setDisplayName("");
setEmail("");
setPassword("");
};
return (
<div>
<Buttons onClick={handleClickOpen}>
Join
</Buttons>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Join the waitlist</DialogTitle>
<DialogContent>
<DialogContentText>
Join
</DialogContentText>
<TextField
autoFocus
margin="dense"
label="Full name"
type="text"
fullWidth
name="displayName"
value={displayName}
placeholder="Jill Green"
id="displayName"
onChange={event => onChangeHandler(event)}
/>
<TextField
margin="dense"
label="Email Address"
type="email"
fullWidth
name="userEmail"
value={email}
placeholder="email address"
id="userEmail"
onChange={event => onChangeHandler(event)}
/>
<TextField
margin="dense"
label="Password"
type="password"
fullWidth
name="userPassword"
value={password}
id="userPassword"
placeholder="Minimum 6 characters"
onChange={event => onChangeHandler(event)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button
onClick={handleSubmit}
color="primary">
Register
</Button>
</DialogActions>
</Dialog>
</div>
);
}

Answer 1

Apart from ongoing issues trying to figure out how to record timestamps in firebase, this works to create the user document record.
const handleSubmit = async (event) => {
setLoading(true);
event.preventDefault();
auth.createUserWithEmailAndPassword(
email,
password
)
.then(credential => {
if (credential && credential.user) {
firestore.collection("users")
.doc(credential.user.uid)
.set({
email: email,
displayName: displayName,
// createdAt: firestore.Timestamp.now()
// createdAt: firestore.fieldValue.serverTimestamp()
// createdAt: firebase.firestore.fieldValue.serverTimestamp()
});
history.push("/");
}
})