Last active
August 29, 2015 14:22
-
-
Save vcarl/5aa1eb460b79a85046cc to your computer and use it in GitHub Desktop.
Auth handling for a simple React applicatoin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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