Skip to content

Instantly share code, notes, and snippets.

@vcarl
Last active Aug 29, 2015
Embed
What would you like to do?
Auth handling for a simple React applicatoin
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;
})();
// 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;
})();
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>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment