CODEWITHSUNDEEP
reactjsreact-router
abu abu
abu abu

Reputation: 7028

React Router for Unauthenticated User

I am using react router in my project. I am trying to protect authenticated user pages from unauthenticated users.

My code is like below

ReactDOM.render(
    <Router>
        <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/register" component={Register} />

            if(Auth.isAuthenticated()) {                
                <Route exact path="/dashboard" component={Dashboard} />
            }
            else {
                <Redirect to="/" />
            }
        </Switch>
    </Router>, 
    document.getElementById('root'));

But this <Redirect to="/" /> is not working.

UPDATE

I made another component like below

Authentication.js 

import React, { Component } from 'react';
import Auth from '../services/Auth';
import { Redirect} from "react-router-dom";

const memberAreaHOC = WrappedComponent => {
    class Authentication extends Component {
        render() {
            if ( ! Auth.isAuthenticated()) {
                return <Redirect to="/login" />
            }
            return <WrappedComponent {...this.props}/>;
        }
    }
}

export default memberAreaHOC;

Upvotes: 0

Views: 2004

Answers (3)

CodeZombie
CodeZombie

Reputation: 2087

Wrap requireAuth to those components which needs permission to access. Routes

<Route path="/admindashboard" component={requireAuth(App)}/>

Create a Higher Order Component to authenticate the user.Generally,HOC is created to reuse the functionality where it takes function as an input and gives output as a function.So,in order to authenticate user for each route and for all his authenticated updation or creation it is needed.As the componentWillMount will check his authentication before rendering the wrapped component where as the componentWillUpdate will check for authetication before updating anything in the authenticated user flow.

import React from 'react';
import { connect } from 'react-redux';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

export default function(ComposedComponent) {
  class Authenticate extends React.Component {
    componentWillMount() {
      if (!this.props.isAuthenticated) {
         this.props.history.push('/');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.isAuthenticated) {
        this.props.history.push('/');
      }
    }

    render() {
      return (
        <ComposedComponent {...this.props} />
      );
    }
  }

  Authenticate.propTypes = {
    isAuthenticated: PropTypes.bool.isRequired
  }

  function mapStateToProps(state) {
    return {
      isAuthenticated: state.auth.isAuthenticated
    };
  }

  return withRouter(connect(mapStateToProps, null)(Authenticate));
}

Upvotes: 0

Tzook Bar Noy
Tzook Bar Noy

Reputation: 11677

There are several way to do that, but I did recently is creating a wrapper function to extended my protected routes.

ie:

const memberAreaHOC = WrappedComponent => {
  class MA extends Component {
    render() {
      if ( ! Auth.isAuthenticated()) {
        return <Redirect to="/login" />
      }
      return <WrappedComponent {...this.props}/>;
    }
  }
}

and now in your routes definition:

<Router>
    <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/register" component={Register} />

        <Route exact path="/dashboard" component={memberAreaHOC(Dashboard)} />

    </Switch>
</Router>

You can see, I wrapped Dashboard with our new memberAreaHOC

memberAreaHOC(Dashboard)

Upvotes: 3

Abin Thaha
Abin Thaha

Reputation: 4633

Could you try this?

<Switch>
    <Route exact path="/" component={Login} />
    <Route exact path="/register" component={Register} />
    {
        !Auth.isAuthenticated() && <Redirect to="/" />
    }
    <Route exact path="/dashboard" component={Dashboard} />
</Switch>

Upvotes: 0

Related Questions