3

I have a very simple app that lets you log in and then displays a dashboard. The design process with React and Redux is very simple :

  • I have two React components : Login and Dashboard
  • I store a boolean isAuthenticated in my state tree

Now some remarks :

  • The Login component can only be seen if isAuthenticated is false
  • The Dashboard component can only be seen if isAuthenticated is true
  • A button in the Login component sets isAuthentication to true
  • A button in the Dashboard component sets isAuthentication to false

How should I implement this in React ? There is at least two possibilities :

  • using routing : / redirects to /login if authenticated or /dashboard if not. Also /login redirects to /dashboard if authenticated and /dashboard redirects to /login if not authenticated
  • introduce an App component that renders either Login or Dashboard depending on isAuthenticated

Here is the implementation of the second proposal :

const Login = (props) => (
  <div className="login">
    <p>Login page</p>
    <input type="button" value="Log in" onClick={props.toggleAuthentication}/>
  </div>
)
const Dashboard = (props) => (
  <div className="dashboard">
    <p>Dashboard page</p>
    <input type="button" value="Log out" onClick={props.toggleAuthentication}/>
  </div>
)
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {isAuthenticated: false}
  }
  toggleAuthentication(){
    this.setState({isAuthenticated: !this.state.isAuthenticated})
  }
  render() {
    if(!this.state.isAuthenticated){
      return <Login toggleAuthentication={()=>this.toggleAuthentication()}/>
    } else {
    return <Dashboard toggleAuthentication={()=>this.toggleAuthentication()}/>
    }
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
1

I think the generally preferred react-router way to do this would be to have an onEnter hook that checks to see if you're logged in. If you're not, you get redirected to Login.

I've personally done it the second way you described, and while it worked, it did leak some information about URL structure to a non-authenticated user.

If you're not using react-router, you may want to use your second approach. If you are using react-router, have a look at their auth flow example:

https://reacttraining.com/react-router/web/example/auth-workflow

-2

The onEnter() approach suggested by @dannyid seems simple and efficient, although I've never tried it as of now.

I've recently stumbled upon this great article, describing another way of implementing authentication with higher order components: http://engineering.blogfoster.com/higher-order-components-theory-and-practice/

protected by gnat Jun 19 '17 at 10:39

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.