Handle all authentication with Node, Angular and Stormpath

Final SOURCE CODE

Hit me up on twitter

Set up project

Stormpath is a service that handles user authentication and authorization for you. We are going to integrate Stormpath user management into a very lightweight MEAN stack starter template. First we’re going to clone the starter project which you can view here.

This command clones the starter template into a folder named “node-angular-stormpath”. The starter template is set up with MongoDB, so open a new tab and run `mongod` in that window so MongoDB is ready on your machine.

Next up install dependencies and start the Node.js server.

Register for Stormpath

So here I’m following parts of the official tutorial.

Either register for a new account or login if you already have one. The dashboard will look like this. Click “Create API Key”.

So once you create a new API key you must download a file with your credentials. This is the message from Stormpath

By creating a new API Key, you will be prompted to download a file containing both your API Key ID, and the secret key

Make sure you place this file in a safe location so you do not lose it. You will not be able to download this file again. If you lose the file, you will have to delete the API key and create a new one.

I saved the file to my desktop. Next up go to the “Applications” tab and click “Create Application”.

Click the application you created from the list and get the “HREF”. Next configure environment variables on your machine:

To view your environment variables on mac you can use `$ printenv` or `$ printenv STORMPATH_CLIENT_APIKEY_ID`.

We will have to do this again when shipping to production, though that will look a bit different. Configuring environment variables on heroku looks like `$ heroku config:set STORMPATH_CLIENT_APIKEY_ID=xxxx`.

Last but not least you must set a “default account store” in order to avoid this error.

Start coding

After we set up Stormpath for our environment install the stormpath npm package into our project:

Then init the stormpath in server.js after the express config block:

Protect a route

Go into server/routes.js and add some API routes.

When you try to hit `http://localhost:3000/api/test` you will get a JSON error:

But when you go to `http://localhost:3000/api/test2` you will see the text “Passes the test!”. Just like that we have endpoint protection for our API.

Log users in

Now we will transition to client side. We are going to use bower. It should really be part of the starter template but whatever, here it goes:

.bowerrc then looks like:

Then run our bower commands:

Add these scripts to index.html:

And add the modules to our angular app:

Then configure the `$stormpath` module in a run block:

This sends users to the “main” view after they log in and to the “login” view if they try and access a protected route when not logged in.

Create a navbar in public/templates/navbar.html:

Then add the navbar to public/index.html:

Define routes:

Create the register and login templates.

public/templates/register.html

public/templates/login.html

The Stormpath angular library gives us special directives for our login and registration forms.

Create profile view

Next we will create a profile view and force the user to log in in order to view it. The route looks like:

and the template looks like:

Here are the stormpath-angularjs docs. Happy building!

Final SOURCE CODE

Hit me up on twitter

Engineer, writer and community organizer. I built Employbl to help candidates get jobs in the Bay Area: https://employbl.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store