Firebase, React: How do I display http errors on client side? - reactjs

Question

I'm building a project with React and Firebase. I've split it into two repos - a backend repo for firebase functions, and a client-side repo for React. Part of my project involves user registration, and I want to be able to send any errors (eg, email already in use, weak password) to the client side, but I'm not sure how. Does anyone have suggestions about how I can pass backend errors to the client?
I know that I could move the firebase API call to client side which would make error handling much easier, but this would create complications.
Code as follows:
Registration component VenueRegister
import React from 'react'
import Header from './Header'
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button'
import axios from 'axios'
import { auth } from 'firebase/app'
class VenueRegister extends React.Component {
constructor() {
super();
this.state = {
email: '',
password:'',
confirmPassword:'',
venueName:'',
venueAddress:''
};
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e){
this.setState({
[e.target.name]: e.target.value
})
}
handleSubmit(e) {
console.log("submit function reached");
e.preventDefault();
const venueData = {
email: this.state.email,
password: this.state.password,
confirmPassword: this.state.confirmPassword,
venueName: this.state.venueName,
venueAddress: this.state.venueAddress
};
axios("http://localhost:5000/gig-fort/us-central1/api/registerVenue", {
method: "POST",
headers: {
"content-type": "application/json",
},
data: venueData,
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
}
render() {
return (
<>
<Header />
<h1 className="heading-venue-reg">Register your venue</h1>
<form onSubmit = {this.handleSubmit}>
<TextField
required
id="standard-required"
name = 'email'
label="Required"
defaultValue="email"
placeholder="email"
onChange = {this.handleChange}
/>
<TextField
required
id="standard-required"
name = 'password'
label="Required"
defaultValue="password"
placeholder="password"
onChange = {this.handleChange}
/>
<TextField
required
id="standard-required"
name = 'confirmPassword'
label="Required"
defaultValue="confirm password"
placeholder="confirm password"
onChange = {this.handleChange}
/>
<TextField
required
id="standard-required"
name = 'venueName'
label="Required"
defaultValue="venue name"
placeholder="venue name"
onChange = {this.handleChange}
/>
<TextField
required
id="standard-required"
name = 'venueAddress'
label="Required"
defaultValue="venue address"
placeholder="venue address"
onChange = {this.handleChange}
/>
<Button type="submit">Submit</Button>
</form>
</>
);
}
}
export default VenueRegister
Backend function for venue registration:
app.post('/registerVenue',(req,res) =>{
const newVenue = {
email: req.body.email,
password: req.body.password,
confirmPassword: req.body.confirmPassword,
venueName: req.body.venueName,
venueAddress: req.body.venueAddress
}
let errors = {}
if(isEmpty(newVenue.email)){
errors.email = 'Email must not be empty'
}else if (!isEmail(newVenue.email)){
errors.email = 'must be a valid email address'
}
if(Object.keys(errors).length >0){
return res.status(400).json(errors)
}
let token, userId
db.doc(`/user/${newVenue.venueName}`).get()
.then(doc => {
if(doc.exists){
return res.status(400).json({venueName: `This venue name is already taken`})
} else {
return firebase
.auth()
.createUserWithEmailAndPassword(newVenue.email, newVenue.password)
}
})
.then(data=> {
userId = data.user.uid;
return data.user.getIdToken()
})
.then(idToken => {
token = idToken
const venueDetails ={
email: newVenue.email,
venueName: newVenue.venueName,
venueAddress: newVenue.venueAddress,
createdAt: new Date().toISOString(),
userId
}
return db.doc(`/users/${newVenue.venueName}`).set(venueDetails)
})
.then(() => {
return res.status(201).json({token})
})
.catch(err => {
console.error(err)
if(err.code === 'auth/email-already-in-use'){
return res.status(400).json({email: 'Email is already in use'})
} else {
return res.status(500).json({error:err.code})
}
//TODO: put in conditional statement that sends 'weak password error' to client
})
})

Answer 1

In the frontend, when receiving the data from the backend, you should check your response data for errors. It is very likely you would want a util function for that since it is a common task across almost all requests (hence re-utilize).
So you would like to check the response.status and then set a new state like a hasError or something that will cause a re-render to your component and show, i.e, a child component that displays the error to the user and gives the ability to retry the operation.