Performing Authentication on Routes with react-router-v4

Question

I'm trying to write Authentication checking for my DashBoard. But the function itself is not getting called. Can anyone give me some solution for this? I'm developing in ReactJs.

This is the Route part :

 <Router>
            <div>
              <Route exact path={"/"} component={Home} />
              <Route path={"/SignUp"} component={SignUp} />
              <Route path={"/SignIn"} component={SignIn} />
              <Route path={"/Dashboard"} component={Dashboard} onEnter={this.requireAuth} />
            </div>
          </Router>

This is the function :

  requireAuth (nextState, replace) {
    console.log("?????????????",this.state.getToken);
    if(!this.state.getToken) {
      replace({pathname: '/'});
    }
  }

If you are using React-router v4, check this https://stackoverflow.com/questions/45429963/onenter-prop-in-react-router-v4/45430656#45430656 — Shubham Khatri, Dec 04 '17 at 06:42
I've changed like : " {requireAuth(); return }} />" But I'm getting "bundle.js:6004 Warning: You should not use and in the same route; will be ignored" error. — Riya Kapuria, Dec 04 '17 at 06:52
as the error suggests you shouldn't be both component and render together, render the component Dashboard from the render prop as suggested in the answer on the link — Shubham Khatri, Dec 04 '17 at 06:56
{requireAuth(); return }} /> for this error is showing as "requireAuth is not defined" — Riya Kapuria, Dec 04 '17 at 06:59
I've tried with this.requireAuth() also. Same error is coming. — Riya Kapuria, Dec 04 '17 at 07:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160403/discussion-between-riya-kapuria-and-shubham-khatri). — Riya Kapuria, Dec 04 '17 at 07:21

score 15 · Accepted Answer · edited Aug 06 '20 at 20:40

In react-router v4, you can make use of render prop to Route along with the lifecycle methods to replace the onEnter functionality existing in react-router v3.

See this answer for more details:

onEnter prop in react-router v4

However since all you want to do is authentication in the onEnter prop, you could easily create a HOC that does that

const RequireAuth = (Component) => { 

    return class App extends Component { 
    
        componentWillMount() { 
            const getToken = localStorage.getItem('token'); 
            if(!getToken) { 
               this.props.history.replace({pathname: '/'}); 
            } 
        } 
        render() { 
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

and use it like

<Route path={"/Dashboard"} component={RequireAuth(Dashboard)}/>

Edit: In case you need to make a network call to find if the use if authenticated of not, you would write the HOC like

 const RequireAuth = (Component) => { 

    return class App extends Component { 
        state = {
            isAuthenticated: false,
            isLoading: true
        }
    
        componentDidMount() {
            AuthCall().then(() => {
                this.setState({isAuthenticated: true, isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           const { isAuthenticated, isLoading } = this.state;
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

Update:

In addition to the HOC, you can also go for the PrivateRoute component like

const PrivateRoute = ({component: Component, isAuthenticated, isLoading, ...rest }) => { 
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 
} 

 export { PrivateRoute };

and you can use it like

  class App extends Component { 
        state = {
            isAuthenticated: false,
            isLoading: true
        }
    
        componentDidMount() {
            AuthCall().then(() => {
                this.setState({isAuthenticated: true, isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           <Router>
              <div>
                  <Route exact path={"/"} component={Home} />
                  <Route path={"/SignUp"} component={SignUp} />
                  <Route path={"/SignIn"} component={SignIn} />
                  <PrivateRoute path={"/Dashboard"} component={Dashboard} isAuthenticated={this.state.isAuthenticated} isLoading={this.isLoading}/>
               </div>
           </Router>
        }
    }

Could someone not just edit the react state via react dev tools to make `isAuthenticated: true` and `isLoading: false`? Then they would have access to the protected route — JL9, Jul 21 '18 at 21:03
@JL9 if they do this they would get to the view, but if they send an invalid request to the backend the server should respond with 401 and the ui would then redirect to login — Len Joseph, Oct 07 '20 at 04:12

Performing Authentication on Routes with react-router-v4

1 Answers1

Linked

Related