Nodejs and the MEAN stack for the .NET developer part 5 – adding auth with passport-local-mongoose

I spent a whole evening figuring out authentication. I also started refactoring my code.

  • I’ve renamed /server/app.js to server.js to distuinguish from the app.js file in the /public/javascripts folder.
  • I’ve renamed the folder ‘javascripts’ to ‘js’
  • I’ve refactored the api.js and now use ‘module.exports’

What does the application need?

I decided to start simple and implement local authentication against MongoDb.
Authentication in Nodejs is handled by the middleware (Express, but it originates from Connect).
There is a fantastic module that handles authentication for you, it’s called Passport.js. Authenticating requests is as simple as calling passport.authenticate() and specifying which strategy to employ (in our case it will be LocalStrategy).

Passport-local-mongoose

Then there is passport-local-mongoose. It adds a Mongoose flavour over Passport, like class inheritance.
It adds extra properties (username and password) to your schema, although you can change ‘username’ to ’email’. It also adds a hash and salt field to store the username, the hashed password and the salt value.

Learn to Read the Source, Luke

I studied the login example back and forth and I actually think I’m grasping it now. The source code never lies. It *is* better than documentation.

Install it like so:

Next, rewrite the schema:

As you see I commented out the password attribute, as it is automatically added through passport-local-mongoose.

This is the new server.js:

I moved the routes to a separate file. The new routes.api looks like this:

The biggest gotcha
The login action returns the Mongo ID of the user. Passports saves the user details in req.user.
The id is then returned like so: res.send(req.user._id);

Register a user

auth1

After registering successfully, it is time to log on:

Log on

auth2

In return you get the ID of the logged in user.

Nodejs and the MEAN stack for the .NET developer part 4

This is part 4 of my exploration of the MEAN stack. You can find part 3 here.

This is the outline of the app we are going to create:

sketch

We need at least 5 pages to start with:

  • index.html (this will be our layout master
  • welcome.html
  • admin.html
  • signup.html
  • member.html

Routing

To be able to use routing in Angular, which we’ll need for a Single Page App (SPA), you need to install angular-route.

Step 0: create the layout master

Grab a Boostrap theme and copy the source to /public/index.html
Delete everything from line 68 until somewhere around 373.
Now you have an emtpy container div.
Add the ng-view directive into the empty container div. This is the same as @RenderBody in Razor.

Now we’ll add some routing functionality in app.js.

Step 1: declare the Angular module and inject ngRoute:

Step 2: add the routing configuration with $routeProvider in app.js

The code is self explanatory, I think.
When browsing to the root (‘/’), a page welcome.html is inserted to the layout master (index.html).
The controller that is used is the WelcomeController and so on:

step 3: create a folder partials and create the 4 html pages

Here is the welcome.html:

step 4: add the controllers in app.js:

step 5: the app to the index.html

This is the complete index.html:

The result is..

hello-member

Again it seems I’m able to replace .NET for JavaScript.
This is good because now I can code on cheap and old laptops, since I do not need to install Visual Studio in it. 🙂