Previously you created a CRUD application using Spring Boot, React and Stormpath where React handled the data view and the Stormpath Spring Boot Starter set up the login and registration pages. Now you’ll see how to use Stormpath’s React SDK to create login and signup pages manually so that every view on your site is managed by you.

Re-wire Stormpath and React

The Stormpath Spring Boot Starter sets up local server endpoints such as /login and /register that both serve up the front-end templates (for get requests) and receive back-end API requests (for post and put). You need to wire the get endpoints to your own React-based HTML. You will use the React Router to handle each URL, and the pages themselves will call the starter post and put endpoints when logging in, registering etc.

Configure Spring Boot and Stormpath

Start with a clone of the repository from a follow-on tutorial (which added webpack functionality):

Strip out the security configuration by removing any Stormpath-related lines from application.properties. The file should then read

Now rename the endpoints you want to override for the front-end so that your URLs don’t clash with the Spring Boot Starter.

Note: see the Stormpath documentation for a full list of these settings.

Remove the Stormpath code from configure() in Security.java.

Install the project libraries and run webpack.

If you navigate to localhost:8080 you should see a table with some rows. This is what the user should see after they’ve logged in.

React Starter

Add Security with Stormpath for Authentication

Add the Stormpath-related lines back to application.properties.

Note: For security reasons you should never store your Stormpath keys inside of project files. Rather, use environment variables or an apiKey.properties file.

Add the Stormpath lines back to Security.java but change it to allow anyone access the homepage, public files, and the URLs for the user management pages.

Restart and you’ll see the table header and logout button but without any table rows. You’ve allowed anyone to view the main page but there isn’t any data coming through.

Network Failure

If you open the network console you’ll see what is happening—an authorization failure occurred on the /api/employees REST endpoint. You need to set up React to redirect to a login page when an authorization failure like this happens.

Create Routes in React

The Stormpath React SDK uses React Router to specify pages like login. Add these libraries to your project:

Now add the following imports at the top of your app.js entry.

These define which React components represent the login page, etc., and which URLs require authentication. Next initialize the SDK with the following after your imports:

The init accepts various settings to configure the SDK. Here the management endpoint URLs are changed to match those specified in application.properties. Change the render command at the bottom of app.js to the following:

You’ve specified that the root element must render from Router (a Stormpath component) which uses React Router’s browserHistory plugin to manage URLs. Then AuthenticateRoute ensures that any visits to the homepage (/) need to be authenticated and also rendered with the MainPage component (you’ll derive this from the previous interface). Finally the LoginRoute makes sure that any login requirements redirect to /login and are rendered with a component called LoginPage (which you still need to define).

Create Pages in React

Put each page into a separate file. Inside of src create a folder called pages.

Pages Folder

Pull the previous components out of app.js and export them from MainPage.js.

Note: the main page now includes the logout button. This simplifies index.html, our single page app holder, significantly.

Now create the login page in LoginPage.js.

Here you’re using the React Document Title library which you need to install. It allows you to set the browser title whilst using React Router.

Now import the pages into your app.js entry.

app.js now looks like the following.

Reroute Through Spring Boot

React Router artificially alters the URL to /login, /register,etc., but all requests still come through Spring Boot (i.e. server). You need to tell Spring boot to send those requests to our SPA in case someone refreshes the browser window. Change HomeController.java to the following.

Start Your Site

After running Webpack and refreshing you should be sent to the login page you just created.

Custom Login

Once you put in correct details you’ll see the data table populated as before.

Add Signup and Password Reset

There are two other pages you should specify – registration, and the forgot password screen. The first you can add using an ordinary React Router Route.

For the page itself, use the one from the React SDK example project.

Add a link to the login page to /register.

Now, when you click the link you should see a signup page.

Custom Signup

Add Forgot Password

Lastly, the forgot password page is configured in much the same way.

Learn More!

Just like that you have created your own React user management components and tied them to the Spring Boot backend. You can clone the full source code on Github. To go further, check out the Stormpath React SDK API for more details or check out this blog post on how to create custom forms with React.