Login error cannot read property 'data'

[rade98]

Hi, I'm having some problems with frontend authentication. I'm following all the steps from videos, and until now everything worked well. But now I have issues with login. When I give invalid username/password I can see in redux extension 'LOGIN_FAIL' but when I log in with an actual account I don't see 'LOGIN_SUCCESS'. In console I see

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at eval (auth.js:54)

I tried to console.log(res) even console.log(res.data) everything looks fine. Why is that? Here is my auth.js

import axios from 'axios';
import { returnErrors } from './messages';
import { USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL } from './types';

// Check token and load user
export const loadUser = () => (dispatch, getState) => {
    // User Loading
    dispatch({ type: USER_LOADING });

    // Get Token from state
    const token = getState().auth.token;

    // Headers
    const config = {
        headers: {
            "Content-Type": "application/json"
        }
    };

    // If token, add to headers
    if (token) {
        config.headers['Authorization'] = `Token ${token}`;
    }

    axios.get('/api/auth/user', config)
        .then(res => {
            dispatch({
                type: USER_LOADED,
                payload: res.data
            });
        }).catch(err => {
            dispatch(returnErrors(err.response.data, err.response.status));
            dispatch({
                type: AUTH_ERROR
            });
        });
};

// Login iser
export const login = (username, password) => dispatch => {
    // Headers
    const config = {
        headers: {
            "Content-Type": "application/json"
        }
    };

    // Request Body
    const body = JSON.stringify({ username, password });

    axios
        .post("/api/auth/login", body, config)
        .then(res => {
            dispatch({
                type: LOGIN_SUCCESS,
                payload: res.data
            });
        })
        .catch(err => {
            dispatch(returnErrors(err.response.data, err.response.status));
            dispatch({
                type: LOGIN_FAIL
            });
        });
};

I even have downloaded this code, I was checking all of this, even replacing with your code but I got the same error, maybe it's not a problem with auth.js?

[rade98]

Anyone?

[linneudm]

same problem here =(

[linneudm]

I do not know why but when I copied the static files from the repository it worked, except this line in Alert.js should look like this:

export default connect(mapStateToProps)(withAlert()(Alerts));

[deerajDev]

@linneudm . Try to use the alerts version used in the tutorial.The latest version is not compatible with the code . or you can also try react-toastify

[deerajDev]

Try console.log(Object.Keys(res)) . It will give all the keys of an object. If you don't find data key, then can you send the link of the repository

[kaloster]

@rade98 @linneudm any success with figuring this out? I'm having the same issue.

[cpinamtz]

@kaloster @linneudm @rade98 After a couple of weeks blocked in the same step, I found the solution. Basically the problem is related to a wrong spelling of the variables. Please do the following:

Check carefully how you've spelt the auth.isAuthenticated variable inside your PrivateRoute.js. In my case, It was set as auth.IsAuthenticated so when the custom router decides if render your current component or redirect you to the /login page it will do the second due to there isn't any auth.IsAuthenticated attribute so !auth.IsAuthenticated is true and it will constantly go back and forth because probably in your Login.js conditional statement is correctly declared.