auth component as middleware in react

Question

How can I ensure only logged in user to be able to access to home and task page? I'm using redux and I try to avoid any pre-made auth component to learn better about auth.

const App = props => (
    <BrowserRouter>
        <Provider store={store}>
            <div className="app">
                <Layout>
                <Header>
                    <Navbar />
                </Header>
                <Content>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/login' component={Login} />
                    <Route exact path='/signup' component={Signup} />
                    <Route exact path='/task/:id' component={Task} />
                </Content>
                </Layout>
            </div>
        </Provider>
    </BrowserRouter>
)

I was using angular and there's middleware concept in route, but in react I'm lost. I think auth has nothing to do with redux's store? do I need to call to get the user detail's from api when the user navigate around the app?

Answer 1

To solve this problem in our application, we used a higher order component and wrapped our root application route use it. Our route structure was a bit different, but for any route you need "protected" you could use the same concept.

The higher order component just "extends" a component's functionality. Redux's connect is a HOC. In this case, the extended functionality would be checking for authentication. When the component mounts, you'd want to make your check for authentication, whether checking a server or localStorage, etc. Build a new component file like so:

import React from 'react'

export default function(ComposedComponent) {

  class RequireAuth extends Component {

    state = {
      isAuthenticated: false
    }

    // Push to login route if not authenticated on mount
    componentWillMount() {
      if(!this.state.authenticated) {
        // Use your router to redirect them to login page
      }
    }

    // Push to login route if not authenticated on update
    componentWillUpdate(nextProps) {
      if(!this.state.authenticated) {
        // Use your router to redirect them to login page
      }
    }

    // Otherwise render the original component
    render() {
      return <ComposedComponent {...this.props}/>
    }

  }

  return RequireAuth

}

In your routes file, just import the HOC as RequireAuth or something similar, and use like so:

<Route exact path='/' component={RequireAuth(Home)} />

This more or less does the following: When your router hits the home route, it runs the RequireAuth check when it attempts to render the route component. The RequireAuth will need to check for some sort of authentication you set up, and set the isAuthenticated state to true. If it's not true, it should redirect to your login route or something similar. You can also connect this HOC to redux to save that isAuthenticated state to the store instead of component state.