Props not loaded on initial render from redux store - reactjs

Question

I am new to reactjs and need some help.
thanks for taking the time to solve my issue.
I am trying to get the data from props after authenticating a user from Signin page .
so when I get to home page the props does not give me the data in "auth" on initial render but automatically renders again and gives me the data.
I need the data on initial render or else the page crashes due to user data in the home page not being present
signin.js
class Signin extends Component {
state = { isSignedIn: false,
user: [] }
uiConfig = {
signInFlow: "popup",
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],
callbacks: {
signInSuccess: () => false
}
}
componentDidMount = () => {
firebase.auth().onAuthStateChanged(user => {
this.setState({ isSignedIn: !!user,
user})
console.log("state user is", this.state.user)
console.log("user on firebase", user)
})
}
render(){
const { authError, auth } = this.props;
if (auth.uid) return <Redirect to='/home' />
const signingin = (
this.state.isSignedIn ? (
<span>
<h1>signedin</h1>
</span>
) : (
<StyledFirebaseAuth
uiConfig={this.uiConfig}
firebaseAuth={firebase.auth()}
/>
))`
return (
<div>{signingin}
</div>
)
}
}
const mapStateToProps = (state) => {
return{
authError: state.auth.authError,
auth: state.firebase.auth
}
}
const mapDispatchToProps = (dispatch) => {
return {
signIn: (creds) => dispatch(signIn(creds)),
signOut: () => dispatch(signOut())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Signin);
authActions.js
export const signIn = (credentials) => {
return (dispatch, getState, {getFirebase}) => {
const firebase = getFirebase();
firebase.auth()(
credentials.email,
credentials.password
).then(() => {
dispatch({ type: 'LOGIN_SUCCESS' });
}).catch((err) => {
dispatch({ type: 'LOGIN_ERROR', err });
});
}
}
export const signOut = () => {
return (dispatch, getState, {getFirebase}) => {
const firebase = getFirebase();
firebase.auth().signOut().then(() => {
dispatch({ type: 'SIGNOUT_SUCCESS' })
});
}
}
authReducer.js
const initState = {
authError: null
}
const authReducer = (state = initState, action) => {
switch(action.type){
case 'LOGIN_ERROR':
console.log('login error');
return {
...state,
authError: 'Login failed'
}
case 'LOGIN_SUCCESS':
console.log('login success');
return {
...state,
authError: null
}
case 'SIGNOUT_SUCCESS':
console.log('signout success');
return state;
default:
return state
}
};
export default authReducer;
Home.js
import React, { Component } from 'react';
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import { Redirect } from 'react-router-dom'
import { signOut } from './../store/actions/authActions'
import { connect } from 'react-redux'
class Home extends Component {
render(){
console.log( "the props here in home.js", this.props)
return (
<div>
<h1> Welcome home</h1>
<button onClick={() => { firebase.auth().signOut();}}>Sign out!</button>
{/* <h1>Welcome {firebase.auth().currentUser.displayName}</h1> */}
{/* <img
alt="profile picture"
src={firebase.auth().currentUser.photoURL}
/> */}
</div>
);
}
}
const mapStateToProps = (state) => {
return{
auth: state.firebase.auth
}
}
const mapDispatchToProps = (dispatch) => {
return {
signOut: () => dispatch(signOut())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
so in chrome developer tools when I am trying to print the props in console
it gives auth as {isLoaded: false, isEmpty: true}