Build a React.js Application with User Login and Authentication
- Once our users have signed up and logged in. We want to give them the option to logout.
- Robin works on Stormpath’s React SDK.
- But before we can use it, we need to open up app.js and add a route for the page in our router.
- With this, using the Authenticated component, when we have a user session we’ll render a link to the /profile page and allow our users to view their user profile.
- The router is what determines how we’ll be able to navigate around in our React application.
Learn how to use Stormpath to build a React.js application with user authentication.
@GvozderacBojan: More of an angular 2 man myself but still interesting to read #reactjs #web #development
This article was originally published on Stormpath. Thank you for supporting the partners who make SitePoint possible.
React (sometimes referred to as React.js) is an awesome way to build web UIs. The Stormpath React SDK extends React and React Router with routes and components that allow you to solve common user management tasks using Stormpath, such as authentication and authorization.
Lately, React has picked up quite some attention, and it’s easy to understand why. React allows you to turn complex UIs into simple and reusable components that can be composed easily together.
This post will show you how to build a React application from scratch, using the Stormpath React SDK to add features that allow people to sign up, log in, and even view their own user profile.
Let’s get started!
Since we’re building our app from scratch, we’ll use ES6 and JSX to write as little code as possible, as well as the Stormpath React SDK for user features.
To give you a good overview of what we’ll be using:
file for it.
Now install Express, the Stormpath module for Express, and Body Parser:
and put the code below in it:
with the following code in it. And yeah, you do have to replace those values in it with your own.
. If everything is set up correctly then you should see:
If you saw that message, you’ve successfully configured your server to talk with Stormpath and expose a REST API for our React application to use.
Before you get too excited, kill the server and install Webpack so that we can package all of our client-side scripts (we’ll need this organization soon).
and put the code below in it:
and add these lines to the top of it:
Since we’ll be using ES6 and JSX, we need to transpile these files into ES5 (for backwards compatibility with non-modern browsers). This is where Babel comes in. Babel can take our ES6/JSX files as input, and convert those to ES5.
To use Babel, start by installing some dependencies:
Now we’ll instruct Babel on how to compile our files, so create a new file named `.babelrc` and add this code it:
Finally, in order to get Babel to work with Webpack, we need to edit `webpack.config.js` and add an entry to the `module.loaders` array, as shown below:
. Our server will serve all of our static files from this folder.
, put the following:
and at the top of the file add:
How Does React Work?
Now that we have the skeleton for our app done, we can focus on building our React app. But before we write any code, let’s take a look at what React is and what it does for us.
In React, everything is built upon components. You can think of a component as something that renders a DOM node. A simple React component looks like this:
That was simple. Now, if you wanted to render this component to a page, then all you’d have to do is import React and then call:
And React would render the component to that element.
There are, of course, more things to a React component, such as state. Below is an example of a counter component that starts counting when added to the DOM and stops when removed.
. These are component life-cycle methods that will be executed at various points of a component’s life-cycle (in this case, mount and unmount). These methods are usually used for setting up and tearing down a component and is necessary to use because React will error if you try to set the state of a component when it hasn’t been mounted yet.
is a collection of all the properties (inputs) passed to a component. Properties of a component can be set as shown below:
, e.g. as shown below:
that you should use instead.
To illustrate the issue, this won’t work:
But this will:
What this means is that you never have to think of manually manipulating DOM elements again. All you have to do is tell React how you want your component to look like, and it will take care of transforming the DOM the ways necessary (with minimal effort).
Now when we are acquainted with React, we’ll kick things off by installing some React dependencies:
, and then use that as your working directory.
and enter this code:
file, add the import statement:
. Important: Leave the other ReactRouter imports, we’ll be needing those later.
That was easy! We’re now ready to start building our pages.
so that it looks like this:
and add this code to it:
in the same directory with the following content:
. This will contain the components of the child routes that our router match. So if we had a route that looked like:
component and for that reason that component would be rendered in our master page.
you can specify the component that should be rendered when you hit the path of the master page route (in our case `/`).
and add the following to it:
so that it looks like the following:
We now have a React application that shows a header with a default page. But we don’t have a login page yet. So let’s create a new file named `LoginPage.js` and add some content to it:
component. This is all we have to add in order for us to have a fully working form in which people can sign up from.
add the following:
add the following:
when the user isn’t logged in yet.
and put the following content in it:
component. As you might have guessed, this will render a Stormpath registration form. And once you’ve signed up it will point users to the login page where they’ll be able to login.
link when the user isn’t logged in.
and put the following code in it:
. This is a simple helper form that allows you to edit the most basic user fields.
This will allow the form to change both the given name, surname, email and password of user.
form and add the fields that you wish to edit in the route above.
page and allow our users to view their user profile.
. This route itself doesn’t do anything. But acts as a “marker”, to indicate where to redirect to when logging in and logging out.
and change the:
that we created in the previous step:
So that it looks like:
. This is used to indicate the authenticated route that we want to redirect to after login.
Finally, once our users have signed up and logged in. We want to give them the option to logout. Fortunately, adding this is really simple.
add this code to the end:
Access user state in your components by requesting the authenticated and user context types:
directory and export all of our pages from it, as shown below:
With this, we’ll only have to do one import in order to have access to all of our pages.
file and at the top of the file, add the following import statement:
Now we have an application where our users can sign up, login, and show their user data. So let’s try it out!
As before, start our server by running the following:
And if everything is running successfully you should be able to see this message:
So, open up http://localhost:3000 in your browser and try it out!
As you have seen in this article, React is a really powerful tool and when used together with ES6, JSX, and Stormpath, building apps suddenly becomes fun again.
If there are any parts that you feel unsure of, feel free to check out the [example project] and use that as a reference implementation. I also enjoyed this post on React’s design – it explains in beautiful detail why React is awesome.
And if you have questions regarding the Stormpath React SDK, be sure to check out its API documentation.