How to protect client side of react + redux + reactRouter app?

Question

I am building react + redux + reactRouter app. I have an api which sends me tokens after login, so I can protect my api, but I have front-end routes, that should be protected (like dashboard).

I have login form which dispatches login action.

.../actions/loginAction.js

axios.post('/api/auth', {
        email: email,
        password: password
    }).then(function (response) {
        dispatch({
            type: response.data.token ? types.LOGIN_SUCCESS : LOGIN_FAILED,
            email: email
        });
    }).catch(function (error) {
        dispatch({
            type: LOGIN_FAILED,
            error: error
        });
    });

and the reducer

import * as types from '../actions/actionTypes';

let initialState = {
    email: '',
    isAuthenticated: false,
    authenticating: false,
    authError: false
};

export default (state = initialState, action) => {
    switch (action.type){
        case types.LOGIN_START:
            return Object.assign({}, state, {authenticating: true});
        case types.LOGIN_FAILED:
            return Object.assign({}, state, {authenticating: false, isAuthenticated: false, authError: action.error});
        case types.LOGIN_SUCCESS:
            return Object.assign({}, state, {
                authenticating: false,
                isAuthenticated: true,
                authError: false,
                email: action.email
            });
        default:
            return state;
    }
};

It WORKS, BUT anyone can hack it, just editing value of redux store from console, or dispatching LOGIN_SUCCESS action, or even editing js where is verification, is it right? How to avoid it?

I would suggest using lazy loading of the code for your route-specific pages from the server. Then backend depending on the provided token, route and available claims will decide whether currently authenticated user is permitted to navigate to the page or not. — Ivan
– Ivan, Commented Dec 14, 2017 at 20:32
This is done on the server side. You authorize users to do certain actions on the server depending on their permissions. There is no way to do it on the client side. — Dmitry
– Dmitry, Commented Dec 14, 2017 at 20:34

Rich Churcher · Accepted Answer · 2017-12-14 22:39:41Z

4

Dmitry's comment is correct, but just to expand on it: every request for non-public information should be covered by some kind of permission check, and you can't do that stuff in the client. It's completely reasonable to have a LOGIN_SUCCESS action but its purpose is to inform routing and aspects of the UI. So you can switch the route based on such an action but you should ensure that every part of your interaction with the API is covered by authentication and authorization where necessary.

So, for example, your 'fake' user is routed to mysecretroute after spoofing their login but all API interactions from that route will fail, and they'll be dumped back at the login screen again. You certainly wouldn't rely solely on your client state value isAuthenticated to decide whether or not to expose sensitive data.

answered Dec 14, 2017 at 22:39

Rich Churcher

7,6923 gold badges40 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

How to protect client side of react + redux + reactRouter app?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related