React, Firebase: Auth possibly failing on redirect - reactjs

Question

I've got component that captures user information and posts it to firebase, when the submit button is hit. Also within this component is a function that gets all posted data, and returns only the posts made by the currently logged in user:
authListener() {
auth().onAuthStateChanged(user => {
if(user){
this.setState({
userDetails:user
},
() =>
firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
let filteredGigs = querySnapshot.docs.filter(snapshot => {
return snapshot.data().user === this.state.userDetails.uid
})
this.setState({
filterGigs: filteredGigs
})
})
) //end of set state
} else {
this.setState({
userDetails:null
})
console.log('no user signed in')
}
})
}
This function works and displays what it should. However, when the submit function (in the same component) is executed, it should redirect to another page, but instead I get no render, and the error
TypeError: Cannot read property 'uid' of null
When I refresh the page however, it shows the correct page.
What this is basically saying is that, on redirect, this.state.userDetails.uid evaluates to null, even though I'm signed in at the time. Any ideas why this is happening and any potential solutions?
Here's the component in it's entirety:
import React from "react";
import Header from "./Header";
import TextField from "#material-ui/core/TextField";
import Button from "#material-ui/core/Button";
import { withStyles } from '#material-ui/core/styles';
import axios from "axios";
import firebase from 'firebase'
import { auth } from 'firebase/app'
import {Link} from 'react-router-dom'
import UniqueVenueListing from './UniqueVenueListing'
const StyledButton = withStyles({
root: {
background: '#54ADA6',
borderRadius: 3,
border: 0,
color: 'white',
height: 30,
padding: '0 30px',
marginRight: '1px'
},
label: {
textTransform: 'capitalize',
},
})(Button);
class GigRegister extends React.Component {
constructor() {
super();
this.state = {
name: "",
venue: "",
time: "",
date: "",
genre: "",
tickets: "",
price: "",
venueWebsite: "",
bandWebsite:"",
userDetails: {},
filterGigs: [],
isLoggedIn:false,
currentToken:{}
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange(e) {
this.setState({
[e.target.name]: e.target.value,
});
}
handleClick() {
console.log("handle click reached");
auth()
.signOut()
.then(() => {
console.log("Successfully signed out");
})
.catch((err) => {
console.log(err);
});
}
authListener() {
auth().onAuthStateChanged(user => {
if(user){
console.log(`this is the user: ${user.uid}`)
this.setState({
userDetails:user
},
() =>
firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
let filteredGigs = querySnapshot.docs.filter(snapshot => {
return snapshot.data().user === this.state.userDetails.uid
})
this.setState({
filterGigs: filteredGigs
})
})
) //end of set state
} else {
this.setState({
userDetails:null
})
console.log('no user signed in')
}
})
}
componentDidMount() {
this.authListener();
}
handleSubmit(e) {
let user = this.state.userDetails.uid;
const gigData = {
name: this.state.name,
venue: this.state.venue,
time: this.state.time,
date: this.state.date,
genre: this.state.genre,
tickets: this.state.tickets,
price: this.state.price,
venueWebsite: this.state.venueWebsite,
bandWebsite: this.state.bandWebsite,
user: user
};
auth()
.currentUser.getIdToken()
.then(function (token) {
axios(
"https://us-central1-gig-fort.cloudfunctions.net/api/createGigListing",
{
method: "POST",
headers: {
"content-type": "application/json",
Authorization: "Bearer " + token,
},
data: gigData,
}
);
})
.then((res) => {
this.props.history.push("/Homepage");
})
.catch((err) => {
console.error(err);
});
}
render() {
return (
<div className="gig-register">
<Header />
<div className="heading-container">
<h1>Venue Dashboard</h1> <br></br>
{this.state.userDetails ? (
<h3>You are signed in as {this.state.userDetails.email}</h3>
) : null}
<div className="gig-reg-buttons">
{this.state.userDetails ? (
<StyledButton onClick={this.handleClick}>Sign out </StyledButton>
) : (
<Link to="/" style={{ textDecoration: "none" }}>
<StyledButton>Sign In</StyledButton>
</Link>
)}
<Link to="/Homepage" style={{ textDecoration: "none" }}>
<StyledButton>Go to gig listings</StyledButton>
</Link>
</div>
</div>
<div className="handle-gigs">
<div className="reg-gig-input">
<form onSubmit={this.handleSubmit}>
<h3>Register a gig</h3>
<br></br>
<TextField
placeholder="Event name"
id="name"
name="name"
onChange={this.handleChange}
/>
<TextField
placeholder="Time"
type="time"
label="Enter start time"
id="time"
name="time"
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
onChange={this.handleChange}
/>
<TextField
id="date"
label="Select date"
type="date"
InputLabelProps={{
shrink: true,
}}
onChange={(e) => {
this.setState({ date: e.target.value });
}}
/>
<TextField
placeholder="Genre"
id="genre"
name="genre"
onChange={this.handleChange}
/>
<TextField
placeholder="Band website"
id="bandWebsite"
name="bandWebsite"
onChange={this.handleChange}
/>
<TextField
placeholder= "Link to ticketing agent"
id="tickets"
name="tickets"
onChange={this.handleChange}
/>
<TextField
placeholder="Price"
id="price"
name="price"
onChange={this.handleChange}
/>
<TextField
placeholder="Venue website"
id="venueWebsite"
name="venueWebsite"
onChange={this.handleChange}
/>
<Button type="submit">Submit</Button>
</form>
</div>
<div className="manage-gigs">
<h3 className="manage-gig">Manage your gigs</h3>
<br></br>
{this.state.userDetails ? (
<UniqueVenueListing gigList={this.state.filterGigs} />
) : (
<h2>no gigs to show</h2>
)}
</div>
</div>
</div>
);
}
}
export default GigRegister

Answer 1

Since the data is loaded from Firestore asynchronously, there is no guarantee that the user is still signed in by the time your filter method runs.
If you want to continue using the user that was signed in when the onAuthStateChanged triggered, use the user parameter that was passed in, instead of the value from the state:
if(user){
console.log(`this is the user: ${user.uid}`)
this.setState({
userDetails:user
},
() =>
firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
let filteredGigs = querySnapshot.docs.filter(snapshot => {
return snapshot.data().user === user.uid
})
The user variable in here is guaranteed to still have the correct value, as it is defined within the same scope. The state doesn't have such a guarantee as it is globally shared.
Alternatively if you want to use the user from the state, check whether it still has a value once you get the data from the database:
if(user){
console.log(`this is the user: ${user.uid}`)
this.setState({
userDetails:user
},
() =>
firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
if (this.state.userDetails) {
let filteredGigs = querySnapshot.docs.filter(snapshot => {
return snapshot.data().user === this.state.userDetails.uid
})
}
else {
console.log("User no longer signed in when database returned results, skipping filtering...");
}