Handle authentication with Node, Angular and Stormpath
Final SOURCE CODE
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.
So here I’m following parts of the official tutorial.
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.
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:
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.
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:
Create the register and login templates.
The Stormpath angular library gives us special directives for our login and registration forms.
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