Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Setting up authentication with reactjs, firebase (google auth), react-router and redux.

The problem is very simple but I can't find any resource online or answers to fix it.

Unable to read roperty of uid (user id with firebase) because it's telling me it's undefined? I've set this up that Private routes is a new component and it's been imported in my app router. I also plan to have a public routes as well.

Here is my code along with screenshots of error.

PrivateRoute.js

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
export const PrivateRoute = (props) => (
    <Route {...props} />
const mapStateToProps = (state) => ({
  isAuthenticated: !!state.auth.uid <-error on this uid
export default connect(mapStateToProps)(PrivateRoute);
AppRouter.js
import PrivateRoute from './PrivateRoute'
<Route path="/" component={Login} exact={true}/>
<PrivateRoute path="/dashboard" component={Dashboard} />
<PrivateRoute path="/create" component={AddExp}/>
Screenshot of error when I'm logged out and try accessing /create private route
Updated to add redux store configure file
import authenticationReducer from '../reducers/authentication'
export default () => {
    const store = createStore(
        combineReducers({
            expenses: expensesReducer,
            authentication: authenticationReducer
        composeEnhancers(applyMiddleware(thunk))
    return store;
Auth reducer (just incase it's needed)
export default (state = {}, action) => {
    switch (action.type) {
        case 'LOGIN':
        return {
            uid: action.uid
        case 'LOGOUT':
        return {
        default:
        return state;
Cannot read property 'uid' of undefined - means you are trying something like variable.uid  and variable is undefined.  Based on the line with the error, state.auth is undefined.
You should be able to look at your state there, either debug or just throw a console.log in your mapStateToProps to see what your state actually looks like:
const mapStateToProps = (state) => {
  console.log('state:', state); // see what state is
  return {
    isAuthenticated: !!state.auth.uid <-error on this uid
Looking at combineReducers is seems like you are putting the result of your authenticationReducer onto state.authentication, not state.auth...
combineReducers({
    expenses: expensesReducer,
    authentication: authenticationReducer
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.