Using Stormpath on our React front-end

Rahama Obadak
Marketing & Comms, Flexisaf

In a [previous post](, I went through how we hooked up Stormpath to our Java backend. In this post, I'll go through how we got it working with our React front-end.In a [previous post](, I explained our rationale for not using the Stormpath React SDK:

For front-end applications, Stormpath provides the Stormpath React SDK, a fairly new project that tries to do a lot of the work required when adding authentication to your app. In our project, however, we opted not to use the SDK. The SDK’s code was fairly small and simple, so we decided it would be more productive in the long run to implement a narrower set of functionalities tailored to our use-case and consistent with our app’s design.

With a REST API backend and a REST client as is our case, it is an established pattern to expect a server response with a payload in a format such as JSON, XML, etc. The Stormpath Servlet Plugin however, responds with paths to server-rendered views for some of its endpoints. This works well if you are rendering your views on the server-side. The URIs to the views returned are [configurable](, which didn't make much of a difference for us because we prefer containing the view routing logic within the client. Consequently and hopefully temporarily, we ended up with a fire-and-forget model because we couldn't rely on the response from the server, and we didn't want the client to redirect to a server-specified URI. But I digress, the issues we faced with the client-server integration are a topic for another post.I'll run you through the code required to implement some basic authentication features in a React app using Stormpath. The illustration code is written in ES6, and uses the Reflux flux library. Nonetheless, the code should be easily adaptable to ES5 and/or a different flux library.First, let's create a login form:[javascript]// login-form.jsimport React from 'react'import Reflux from 'reflux'import ReactMixin from 'react-mixin'import bindAll from 'lodash/bindAll'import LinkedStateMixin from 'react-addons-linked-state-mixin'import Actions from './actions' import Store from './store'@ReactMixin.decorate(LinkedStateMixin)@ReactMixin.decorate(Reflux.connect(Store))class LoginForm extends React.Component { constructor (props) { super(props) bindAll(this) this.state = { username: '', password: '' } } static get propTypes () { // History is provided by react-router. return { history: React.PropTypes.object.isRequired } } componentWillUpdate (nextProps, nextState) { if (nextState.loggedIn) { this.props.history.pushState(null, '/') } } onSubmit (e) { e.preventDefault() const username = this.state.username const password = this.state.password Actions.login({username, password}) } render () { return ( <div> <form className='login' onSubmit={this.onSubmit.bind(this)}> <div className='login-fields'> <input type='email' ref='email' className='field' placeholder='Username or Email (required)' valueLink={this.linkState('username')} required='required' /> <input type='password' className='field' placeholder='Password (required)' valueLink={this.linkState('password')} required='required' /> </div> <input type='submit' className='login-button' value='Log In'/> </form> <LoginInfo/> </div> ) } }export default LoginForm[/javascript]The component above uses the [react-mixin]( library to make decorators work with React ES6 components. You'll need to use Babel 5.x or a [plugin]( if you are on Babel 6, because the unratified decorator syntax is no longer supported. Next we'll create a registration form: