Auth0 Authentication and NodeJs

If you follow this blog, you’ll know I posted a blog and starting kit for doing authentication in nodejs leveraging passportjs. In it, I rolled out my own authentication package which you can use to start your own projects.

What if you want a more robust solution with plenty more features? I’ve had the opportunity to switch my company to a 3rd party vendor’s solution: auth0. And it’s pretty good.

So what do you get with auth0 that you don’t get with my home-grown solution?

  • You can easily offer other types of Social logins without doing any extra work (e.g. Facebook, Google, Twitter logins)
  • You get security features such as email verification and multifactor authentication
  • You get a user management console to delete users, add users, etc.
  • You get Single Sign On (SSO). It’s what makes it possible for you to sign into gmail service and then use google calendars and google docs without having to sign in again. This is very useful if you have a suite of services to offer users across different domains.

What’s the cost?

  • Pricing (at the time of this post, they’re offering 7k free active users and unlimited logins)
  • There is a learning curve to understand how to use this very flexible but complex system. They have lots of examples and offer technical support. Fortunately for you, I’m going to simplify things for you by giving you a starter kit although it’s specific to our application model. You can probably set up a lot of other different authentication models with their service.

So what’s similar between auth0 and what we did here? For nodejs, they both leverage passportjs. They both use jwt to sign the payload to prevent tampering. But there are definitely big enough workflow differences that we need to build a different wrapper around it.

One big difference is that the user is redirected off your site to auth0.com for login and registration. Once complete, they are redirected back to your site. So if you hold any temporary variables/state, you’ll lose it. In the previous implementation, for example, we held the last url route in the $rootScope so we could redirect the user back after login. However, the $rootScope is wiped once you leave the site to auth0.com for login, so we have to leverage the browser’s web store instead.

You still have to build some code around auth0 even though it tries to abstract away most of the hard authentication stuff. For example, once you log in, it hands you an access_token and id_token. It’s up to you to store that for the duration of the user’s session. Fortunately, we build some of this infrastructure the last time we made our home-grown authentication starter kit. We just have to adapt it a bit to auth0.

For my starter kit, I started with auth0’s angular example which can be found here.

To integrate into our application model, I made the following changes and additions.

AuthService

Their AuthService was in auth.service.js and I merged it in with other services and options in a auth0.services.js file.

By default, the authResult.idTokenPayload (in handleAuthentication()) included only a sub field

{sub:”auth0|ea4d8b…”}

I modified the login call to angularAuth0.authorize() to include a scope

    angularAuth0.authorize({
      scope:'openid profile email'
    });

This returns much more info back to your app

{
sub:”auth0|ea4d8b…”,
nickname:”…”,
name:”…”,
email:”…”,
email_verified: true,

}

I also implemented a redirect so that after the user returns from auth0’s login page, they land back on the page they last visited.

function login() {
  $window.localStorage.setItem('nextPath', $location.path());
}

function handleAuthentication() {
  angularAuth0.parseHash(function(err, authResult) {
    var nextPath = $window.localStorage.nextPath;
    if( nextPath ) {
      $location.path(nextPath);
    }
}

UserSession

I added a UserSession service to store auth0’s tokens and user info. This service is the same as before.

authHandler

Just like before, there’s an authHandler service that handles redirecting the user to auth0’s login page by invoking AuthService.login() when it detects a 401 (Unauthorized).

It also attaches the Authorization header to every request once a login is established.

User Registration Hook

If you want to track the users on your app, then you can set up an auth0 Hook. Specifically, you can set up a Post User Registration hook so that when a new user registers on auth0, auth0 will invoke a hook with small piece of code you write to store that info on your app.

There are 2 parts to this. First set up your web hook. In the auth0 website, go to Hooks and then under Post User Registration, click Create New Hook

auth0_hook.png

Then you want to edit the code snippet and add something like this. Make sure to change the URL value

module.exports = function (user, context, cb) {
  var request = require('request');
  
  var url = '##INSERT_YOUR_URL##';
  var data = {
    userid: user.id,
    name: user.username,
    email: user.email
  }
  var options = {
    uri: url,
    method: 'POST',
    json: true,
    headers: {
        "content-type": "application/json",
        },
    body: data
  };
  console.log('logging registration')
  request(options, function(error, response, body) {
    if( error) {
      console.error(error)
    } else {
      console.log('sucessfully logged registration')
    }    
    cb();

  })
};

The second part of this is on your app server’s side. You’ll need to implement the api endpoint called by the hook to receive the user info and store it in your database. I’ve provided a sample in my starter kit but make sure you modify it to store it in your database table as you see fit.

So without further ado, here’s a link to the starter kit with all the pieces of the code you need to start an angular/nodejs project with auth0.
https://github.com/kanesee/ng-node-auth0-kit/tree/master/shared

This blog explains the components of the code but the README hopefully provides enough info for you to start using it.

Advertisements
Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: