1

I am working on my second React/Redux application (I'm new to Redux) and also the first MERN stack app altogether.

Currently, I am having an Authentication problem on the Front-End side in React/Redux Which goes like this:

I have established a protect middleware in my Back-End to check if the user which logged in is always logged in with valid JWT-Token or not by setting the Token inside the Browser Cookie with HttpOnly flag enabled {no secure flag yet but I will enable that too in production step}

The main problem is that once I log in the application, everything is fine and if the user is validated without any errors then inside the authReducer, the isAuthenticated property will be set to true and then logged in user's data is passed to the redux store to be used. but once I redirect to the main feed page of the app everything is gone the isAuthenticated is now false and user data is null so the app crashes.

I know that I must call the auth protected route every time I send a request to the server but I am stuck because it needs some piece of the logged-in user like username or ID to be sent along with the each request to validate it and I can't store them in local storage because of safety issues. { storing sensitive data in local storage is not a good practice}

this is log in function in Redux Actions:

export const loginUser = (loginData) => async (dispatch) => {
    try{
        setLoading();

        const res = await axios({
            method: "post",
            url: "/users/login",
            data: {loginData}
        });

        dispatch({
            type: TYPES.LOGIN_SUCCESS,
            payload: {
                status: res.data.status,
                token: res.data.token,
                user: res.data.data.user
            }
        });

        // This below code will set the logged in user after successful login
        getLoggedInUser(res.data.data.user.username);

    }catch(error){
            dispatch({
            type: TYPES.LOGIN_FAIL,
            payload: {
                status: error.response.data.status, 
                message: error.response.data.message
            }
        });
    }
};

as you see after the successful log in, the token and user data is dispatched to store but after component reload they are gone so I can't re-Authenticate the logged in user.

this is my getLoggedInUser redux action function:

export const getLoggedInUser = (userName) => async (dispatch) => {
    try{
        setLoading();
        const res = await axios.get(`/auth/${userName}`, {
            // headers:{
            //     Cookies: `jwt=${token}`
            // }
        });

        dispatch({
            type: TYPES.GET_LOGGED_IN_USER,
            payload: res.data.data.loggedInUser
        });

    }catch(error){
            dispatch({
            type: TYPES.AUTH_ERROR,
            payload: {
                status: error.response.data.status, 
                message: error.response.data.message
            }
        });
    }
};

Any solutions?

Max Tat Shahdoost
  • 11
  • 3
  • If you want to be logged in after re-direct you have to save the JWT token in localstorage or in a cookie. It can only be accessed after succesful xss attack. However the attacker could still not change password/email, so this is a risk you have to take. – oshell Mar 09 '20 at 15:41
  • https://stackoverflow.com/questions/44133536/is-it-safe-to-store-a-jwt-in-localstorage-with-reactjs – oshell Mar 09 '20 at 15:41
  • I want to use cookies but I can't access them while they are flagged as HttpOnly and Secure so I want a way to validate my logged in user by the cookie which is set in the browser with HttpOnly and Secure flags. – Max Tat Shahdoost Mar 09 '20 at 16:08

0 Answers0