Handling JWT authentication in React app

Question

I'm trying to implement a restricted route with react-router v4 and I'm almost done, but I need to handle validation of JWT token and don't know where to put this.

RestrictedRoute

const RestrictedRoute = (props) => {
  const { component, ...otherProps } = props;
  return <Route {...otherProps} component={component} />;
};

const mapStateToProps = state => ({
  authenticated: state.authentication.session,
});


const branched = branch(
  ({ authenticated }) => !authenticated,
  renderComponent(() => <Redirect to="/login" />),
);

const enhanced = compose(
  connect(mapStateToProps),
  branched,
)(RestrictedRoute);

export default enhanced;

So with this I'm able to redirect users to /login page if the state.authentication.session is set to false. Until now I was checking if there is a jwt cookie and setting this session based on that. This had some simple vulnerability as you could add jwt cookie with any value, and you will be considered as authenticated.

I created an endpoint for validating my jwt token and created an action for this. My question is - where to put this?

If I put this in componentWillMount of RestrictedRoute and a authenticated user tries to visit a restricted page he is showed the login page and then switched to the restricted route, as the response from the endpoint changes the redux store.

hossein derakhshan · Accepted Answer · 2017-09-06 05:52:20Z

1

do you want to validate your token in each of your RestrictedRoute? why?!

you don't need to validate your token for changing a route even if your react -route is restricted.

you have to validate your token for getting data on the server by write a policy or middle-ware for that API.

with this method you can just checking a cookie for validate it in react-route.. if hackers put the data on your cookie, they can access to that react-route but they cant see the data

answered Sep 6, 2017 at 5:52

hossein derakhshan

7712 gold badges10 silver badges24 bronze badges

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

1 Comment

mdmb Over a year ago

Thanks for the answer. I handled it by validating the token on the server (as I do server side rendering) and passing the data to my redux store.

Collectives™ on Stack Overflow

Handling JWT authentication in React app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related