How can I protect routes in a React app using Redux for authentication?

How can I protect routes in a React app using Redux for authentication?

To protect routes in a React app using Redux, you can create a higher-order component (HOC) that checks if a user is authenticated.

What does the HOC look like?

The HOC can use the Redux state to determine if the user is logged in. If not, it can redirect them to the login page.

Can you show me a code example?

Sure! Here's a simple example:

import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';

const withAuth = (WrappedComponent) => {
  const AuthHOC = ({ isAuthenticated, ...props }) => {
    return isAuthenticated ? <WrappedComponent {...props} /> : <Redirect to='/login' />;
  };

  const mapStateToProps = (state) => ({
    isAuthenticated: state.auth.isAuthenticated,
  });

  return connect(mapStateToProps)(AuthHOC);
};

export default withAuth;

What if I want to protect multiple routes?

You can use the same HOC for multiple routes by wrapping each protected component with it. Just apply withAuth to any component that needs protection.