Uncaught TypeError: Cannot read property 'uid' of undefined

Question

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;
    }
};

Going to need to see how you are setting auth in your store — Anthony
– Anthony, Commented Mar 16, 2018 at 21:49

Jason Goemaat · Accepted Answer · 2018-03-16 22:02:53Z

3

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
}),

answered Mar 16, 2018 at 22:02

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anthony · Accepted Answer · 2018-03-16 21:55:31Z

1

You are setting the uid on state.authentication.uid and trying to access it from state.auth.uid

answered Mar 16, 2018 at 21:55

Anthony

6,5122 gold badges20 silver badges36 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property 'uid' of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related