Review: Stormpath for User Authentication in Node

This post was originally published on Medium by Stormpath user Ryan Busby. It is reprinted here with his permission.

Why Stormpath, you ask? Stormpath offers easy integration and storage for account creation, management, and authorization. It can be configured to use JWT tokens and OAuth 2.0. Out of the box, Stormpath can provide login, signup, signout, and manage forgotten passwords. Many of the features Stormpath gives by default can even be customized if you want to change the form layouts or even change the integration settings. All you need is an API key to get started. Stormpath has many APK integrations. Today we’ll be going over Node/Express and React. I’m going to walk you through a few ways you can integrate and utilize Stormpath from signup to implementation. Let’s get right into it, shall we?

The first thing you’re going to need is an API key. So head on over to Stormpath’s site and register don’t worry I’ll wait. Once you have your key we can begin to integrate it into your app. There are a few ways to add your key depending on the environment you’re working with. Heroku, for example, can take it as an environment variable or if you’re testing locally you can just add an apiKey.properties file to the root of your directory with your API key and secret.

It will look something like this for a local Node setup:

If you plan to use Heroku there are a few ways to setup Stormpath for your server:

I’d recommend Option 1 as it’s clean and easy.

Adding an Env variable looks like this:

Begin with the Stormpath Node Integration

Prequisite installations are Node, Express, and express-stormpath. Run npm install express-stormpath --save if you haven’t already. Now that we have Stormpath installed, let’s add a few lines to our server.js to allow Stormpath access to our express server. The first thing we’re going to do is require Stormpath with this line of code:

var stormpath = require('express-stormpath');

Next, we can add a few more lines that add Stormpath’s configuration options and set it to run before your server starts. Like so:

This is a barebones Stormpath setup in just a few lines of code! Now let’s enable some of the power features by adding to our configuration options. Inside of your Stormpath account, you created you can have applications registered to Stormpath. We need to wire your application up to this instance to use some of the more powerful auth features. You can do this by going to their site and grabbing your unique HREF for your Stormpath App.

Now we’re going to take that HREF and add it to the object we’re passing into our stormpath.init. We’re also going to tell Stormpath we want to use their web forms. website: true is grabbing all of Stormpath’s forms by default we can customize this if we want later. Your server.js should be looking like this right about now:

Let’s fire up our server and take Stormpath for a spin. Open up your web browser preferably Chrome and navigate to localhost:3000/login. You should see something like this:

That’s all it takes. Congratulations you just setup salting, hashing, storing, and user authorization for your app. Let’s talk a bit more about these forms Stormpath provides with the website: true option. All user data is stored inside your Stormpath account. This form has working hyperlinks for password reset and a redirect to /register up at the top. The three forms Stormpath provides are /login, /register, and /logout. They all work with the information stored inside of your Stormpath account and your can toggle the validation if you want. By default, it asks for a moderately secure password.

Authentication Routes in Node

Say you want areas of your application unique to your user. They need to be allowed to access those resources and authenticated. In Stormpath’s express integration, all you need to do is add stormpath.loginRequired to your CRUD operation. Like so:

That’s it! Side now you may be wondering what’s going on with the req.user.givenName magic Stormpath offers. That is the object created on account creation using Stormpath’s default forms! You can customize these properties for access in CRUD operations and DB queries!

Authenticate Components in React

So in React, assuming you’re using React router, we need to do some importing. You can start my adding these lines to your routes component:

import { Route, IndexRoute } from 'react-router';
import { LogoutRoute, AuthenticatedRoute } from 'react-stormpath';

Those will properly bring in the component dependencies we need to enable React auth with Stormpath. The features it enables will look something like this:

Stormpath gives us the LogoutRoute to configure our /logout and the AuthenticatedRoute which is react-stormpath’s equivalent of stormpath.loginRequired. That’s all you need to configure Stormpath for your React or Node needs.

I hope you enjoyed Stormpath auth as I found it very user-friendly and the documentation is very good. I’d also like to add these are the basic and fundamental features. There are enormous amounts of customization that you can do including user groups, password validation, form appearance and much more. As always thank you for reading.

Thanks Ryan!

Interesting in learning more about user authentication with Node and React? Check out these resources:

The post Review: Stormpath for User Authentication in Node appeared first on Stormpath User Identity API.