Auth handling for a simple React applicatoin

auth.jsx

module.exports = (function() {
  'use strict';

  var React = require('react');
  var Login = require('../components/login.jsx');
  var { RouteHandler } = require('react-router');
  var Actions = require('../actions/actions.js');

  var Auth = React.createClass({
    propTypes: {
      user: React.PropTypes.shape({
        state: React.PropTypes.string
      }).isRequired
    },
    render: function() {
      if (this.props.user.state !== 'logged_in') {
        // If we're not logged in, show a login dialog. The login component 
        // handles the logic for getting username/password and two factor auth, 
        // and fires Flux actions as needed.
        return <Login user={this.props.user} />
      } else {
        // If we're logged in, great! Render the route.
        return <RouteHandler user={this.props.user} />
      }
    }
  });

  return Auth;
})();

login.jsx

// This is the route handler for /login, NOT the login component. Because the
// route for this is nested under our auth handler in routes.jsx, all the logic
// is guaranteed to be handled by the time we're rendering this component.
module.exports = (function() {
  'use strict';
  var React = require('react');

  var Login = React.createClass({
    render: function() {
      return (
        <div className="text-center">
          <h1>You've been logged in</h1>
        </div>
      );
    }
  });

  return Login;
})();

routes.jsx

var routes = (
    <Route name="home" path="/" handler={require('app.jsx')} >
      <Route name="auth" path="" handler={require('auth.jsx')}>
        <Route name="authed page" path="stuff" handler={require('view.jsx')} />
        <Route name="login" path="login" handler={require('login.jsx')} />
      </Route>
      <Route name="unauthenticated route" path="no-auth" handler={require('unauthenticated.jsx')} />
    </Route>
  );