Building forms has never really been any fun. But with the new custom forms feature that we’ve added to the Stormpath React SDK, it suddenly is. This custom forms functionality means you’ll have the ability to plug in your own markup to the forms for user login, registration and reset password without having to think about any of the logic behind them.

React developers can now simply style the form quickly, and Stormpath will take care of all the rest.

Let’s Build a User Form in React

Before we get started: If you haven’t played around with React or want to try these examples in a sample application, then take a look at our previous blog post Build a React.js Application With User Authentication or play along with the example project.

Default Markup

Forms in the Stormpath React SDK still work as previously. If no markup is provided, the form will simply render with the default Bootstrap markup, i.e.

This actually turns into:

Custom Markup for Login Forms

Now, adding your own markup to user forms is easy. When markup is passed to the form, the form will automatically process that markup and bind common input fields and buttons depending on their input type and name. The conditions (spIf) and bindings (spBind) available depend on the form used.

To demonstrate this, a simple, stripped-down login form can look like:

Field Mapping

As previously mentioned, when markup is provided to a form, that markup is processed and input fields are mapped, with available fields varying by form.
For the login form, the valid fields are username (or login, the username to login with) and password (the password to login with).

In order to map an input to the username field, all you have to do is to set the input name to the field name:

If you’re interested in seeing what fields can be mapped for the registration or reset password form, take a look at the Stormpath React documentation.

Conditional Statements

In order to control what is being shown, each form has a specific set of spIf conditions that you can use.
For the login form, the available conditions are form.processing, which is true when the form is loading, and form.error, which is set to true when there is a bindable error message.

In order to only show an element during a form.error, all you need to do is set the spIf attribute:

If you’re interested in seeing what spIf conditions are available for the registration or reset password form, take a look at the Stormpath React documentation.

Bind Values

In order to show certain texts, spBind can be added on an element to bind that element to a value. For the login form, the bindable values are form.errorMessage, which is an error message present when the form.error condition is true.

So in order to show an error message during a form.error, all you need to do is to set the spBind attribute on an element, as shown below:

If you’re interested in seeing what spBind values are available for the registration or reset password form, take a look at the Stormpath React documentation.

Intercept Form Submit

If an onSubmit attribute is set on a form, then the handled function attached to that attribute will be called once a form is submitted. The handler that you attach can be used to do custom error validation or format the data that is posted to Stormpath, i.e. providing your own onSubmit handler for the login form would look like:

Summary

As you’ve just seen demonstrated, the new custom forms feature really makes building forms a lot easier. It’s one of the many improvements we have added to the React SDK lately.

If you have any feedback on the custom forms feature or the React SDK in general. Feel free to leave that in the comment section below.