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 ponent 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="/" ponent={Login} exact={true}/>
<PrivateRoute path="/dashboard" ponent={Dashboard} />
<PrivateRoute path="/create" ponent={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(
bineReducers({
expenses: expensesReducer,
authentication: authenticationReducer
}),
poseEnhancers(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;
}
};
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 ponent 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="/" ponent={Login} exact={true}/>
<PrivateRoute path="/dashboard" ponent={Dashboard} />
<PrivateRoute path="/create" ponent={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(
bineReducers({
expenses: expensesReducer,
authentication: authenticationReducer
}),
poseEnhancers(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;
}
};
Share
Improve this question
edited Mar 16, 2018 at 21:51
cala
asked Mar 16, 2018 at 21:48
calacala
1,4217 gold badges22 silver badges44 bronze badges
4
-
1
Going to need to see how you are setting
auth
in your store – Anthony Commented Mar 16, 2018 at 21:49 - One moment sorry – cala Commented Mar 16, 2018 at 21:49
- Thank you this worked! I could not see this... – cala Commented Mar 16, 2018 at 21:54
- I thought it might be a problem with firebase uid – cala Commented Mar 16, 2018 at 21:55
2 Answers
Reset to default 3Cannot 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 bineReducers
is seems like you are putting the result of your authenticationReducer
onto state.authentication
, not state.auth
...
bineReducers({
expenses: expensesReducer,
authentication: authenticationReducer
}),
You are setting the uid
on state.authentication.uid
and trying to access it from state.auth.uid