Tag Archives: angularjs

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 , ,

Angular + Nodejs Authentication with Passport & JWT

The codebase for this lesson can be found at ng-node-passport.kit

This builds off of the earlier work of nodejs-starter-kit. You should have a firm grasp of angular and nodejs from this example before reading on.

The authentication is built from passportjs and jwt. Let’s first talk about these two.

PassportJs

This is an authentication middleware for Node.js. It has many ways to authenticate users (they call these “Strategies”). You can use it to authenticate users via their Facebook, Google, or Twitter account for example.

In this template, we use a basic authentication scheme where the user database is stored in house (specifically in a mysql database). We leverage the passport-http Strategy for this.

There are other strategies we could have employed with various trade-offs. Here is a comparison of a shortlist of them on StackOverflow.

JWT

JWT stands for JSON Web Tokens. It’s an open industry standard to represent claims between parties. For us, this simply means we can log in once and then pass a token to maintain our authentication session.

Authentication Model

Before we dive into the code, let’s understand what we will be doing.

Registration Workflow

The user submits their username and password and it gets submitted in plaintext across the wire (so please use SSL/HTTPS).

In the backend, we salt and encrypt the password before storing it into the database so the original plaintext password can (virtually) never be revealed.

Login Workflow

On the login page, the user submits their username and password and it gets submitted in plaintext across the wire (so please use SSL/HTTPS). In our implementation, this is done by creating an Authorization header and base64-encoding the username+”:”+password so it looks something like this:

Authorization: Basic dXNlcjp0ZXN0

The backend compares the credentials with the ones stored in the database. If there is a match, then we sign a JWT token, store a payload containing the username and send that back.

You should note that while you can put anything in the payload, you should never put anything sensitive here, like a password. The JWT token is signed but not encrypted. This means anyone can read it. The signing only prevents someone from modifying it. If you wish to put sensitive info in the payload, you should look into JWE, an encrypted implementation of JWT. See this article

When the frontend receives this token, it should store it somewhere. On future requests, it should include it as an Authorization header like so

Authorization: Bearer eyJdbGciOiJIU44I1NIsInR5cCI6IkXXVCJ9

When new requests are made, the backend first decodes the JWT token and pulls out the payload with the user info. At this time, you can be sure that no one has modified the token and the user is real since it can verify that it was signed by itself.

Backend Code

server.js

This is the main server file.

app.use(auth.passport.initialize());

This line is needed to initialize passport.

app.post('/auth/register'
        , auth.registerUser);
app.post('/auth/login'
//        , auth.passport.authenticate('basic',{session:false}) // causes challenge pop-up on 401
        , auth.authenticateViaPassport
        , auth.generateJWT
        , auth.returnAuthResponse
        );

These two routes define the two workflows we discussed above. We’ll dive into each of them below in shared/auth.js.

One thing I want to bring your attention to now is the /auth/login route. It has 3 express middlewares addressing the request: authenticateViaPassport, generateJWT, and returnAuthResponse. The way express middlewares work is that each layer handles the request and then the next layer continues the processing. Any layer can reject the request, stopping the processing at any point.

app.get('/stuff/:stuffId'
      , auth.ensureAuthenticatedElseError
      , myroute.getStuff);

To protect an API by requiring authentication, simply add the auth.ensureAuthenticatedElseError middleware. We’ll go into the code in the next section.

shared/auth.js

var jwt = require('jsonwebtoken');
const JWT_EXPIRATION = (60 * 60); // one hour
var uuidv4 = require('uuid/v4');
const SERVER_SECRET = uuidv4();

jsonwebtoken is the node module you’ll need to sign and verify jwt tokens. The expiration is encoded into the token and taken into account when verifying whether it’s still valid.

You need a SERVER_SECRET to sign and verify the tokens. It can be any string you’d like. It’s like a password so don’t give it out. So what I did here was to generate a random one every time the server starts up. (It means tokens are not valid after a restart, but you get a little more security)

exports.passport = require('passport');
var BasicStrategy = require('passport-http').BasicStrategy;

These lines bring in the passport dependencies.

exports.registerUser = function(req, res) {
  var userid = req.body.userid;
  var plaintextPassword = req.body.password;

  bcrypt.hash(plaintextPassword, saltRounds)
    .then(function(hash) {
      var sql = 'INSERT INTO user(userid,passhash) VALUES(?,?)';
      return dbp.pool.query(sql, [userid, hash]);
    })
...

The registration method takes the credentials, encrypts the password and stores it in the DB. Our user table consists of an userid and passhash column.

The next 4 snippets of code implement the login functions.

exports.authenticateViaPassport = function(req, res, next) {
  exports.passport.authenticate('basic',{session:false},
    function(err, user, info) {
      if(!user){
        res.set('WWW-Authenticate', 'x'+info); // change to xBasic
        res.status(401).send('Invalid Authentication');
      } else {
        req.user = user;
        next();
      }
    }
  )(req, res, next);
};

This first middleware is not always necessary. The /auth/login route could have directly called “auth.passport.authenticate(‘basic’,{session:false})” instead of this. But on authentication failure, it sends back a 401 HTTP status along with the header “WWW-Authenticate: Basic …” These two things cause browsers to pop up a username/password dialog. I wanted to handle 401’s in a custom way, so this layer simply changes the WWW-Authenticate header, preventing the dialog. We could also have changed the 401 status code.

The auth.passport.authenticate() method eventually calls this:

exports.passport.use(new BasicStrategy(
  function(userid, plainTextPassword, done) {
    var sql = 'SELECT *'
            +' FROM user'
            +' WHERE userid=?';

    dbp.pool.query(sql, [userid])
      .then(function(rows) {
        if( rows.length ) {
          var hashedPwd = rows[0].passhash;
          return bcrypt.compare(plainTextPassword, hashedPwd);
        } else {
          return false;
        }
      })
...

This takes the login credentials, compares its hashed form with the database entry and returns the user to the next layer.

exports.generateJWT = function(req, res, next) {
  var payload = {
      exp: Math.floor(Date.now() / 1000) + JWT_EXPIRATION
    , user: req.user,
//    , role: role
  };
  req.token = jwt.sign(payload, SERVER_SECRET);
  next();
}

If we get to the generateJWT layer, that means the credentials were valid. So we now sign and generate a JWT token. Notice we put the user into the payload. You can put anything you’d like in it, including permissions and roles.

exports.returnAuthResponse = function(req, res) {
  res.status(200).json({
    user: req.user,
    token: req.token
  });
}

This simply returns the user and JWT token to the login request. This completes the login implementation.

exports.ensureAuthenticatedElseError = function(req, res, next) {
  var token = getToken(req.headers);
  if( token ) {
    var payload = jwt.decode(token, SERVER_SECRET);
    if( payload ) {
//      console.log('payload: ' + JSON.stringify(payload));
      // check if user still exists in database if you'd like
      res.locals.user = payload.user;
      next();
...

This middleware is used whenever you want to protect an API. It parses the Authorization header’s jwt token and decodes it. If successful, you should have the payload that contains the user. I stick this in res.locals so the next request middleware/handler has access to it. If you look inside routes/sampleroute.js, specifically at the getStuff() method, you’ll see the line that accesses it. You may want to return resources specifically relevant to the given user.

With this backend, you can actually test it using Postman or curl. You can send the appropriate json messages and Authorization headers to simulate registration, login, and accessing protected API’s.

For example, you can try the following procedure:

  1. POST /auth/register with {userid:user, password:test}
    This should create an entry in your database with a hashed password
  2. POST /auth/login with an Authorization header “Basic dXNlcjpwYXNz”
    This should give you back a json response like
    {user:{userid: “user”}, token: “[JWT_TOKEN]”}
  3. GET /stuff/1 with Authorization header “Bearer [JWT_TOKEN]” (copy JWT_TOKEN from step 2.
    This should give you back a list of stuff

Frontend Code

We use angular to handle the authentication handshake. There are some angular mechanisms that make this easy to do.

I’ll skip the ng/register/controller.js and ng/login/controller.js. They’re trivial and pretty self-explanatory.

The core of the authentication is in assets/js/auth.js.

assets/js/auth.js

The AuthService factory implements the register, logIn, and logOut functions.

  authService.logIn = function(userid, password) {
    return $http({
      method: 'POST',
      url: '/auth/login',
      headers: {
        'Authorization': 'Basic ' + btoa(userid + ':' + password)
      }
    })
      .then(function(resp) {
        var user = null;
        if( resp.data ) {
          user = resp.data.user;
          UserSession.create(user, resp.data.token);
        }
        return user;
      })
  };

In logIn(), notice we set the Authorization header, passing a base64-encoded userid and password. Remember that on successful authentication, we get back a user and token. We store that in a UserSession service. For now, this is all you need to know. We’ll dive deeper into it later.

Next, I want to direct your attention to the http interceptor:

app.factory('authHandler', [
    '$q'
  , '$window'
  , '$location'
  , 'UserSession'
  , function($q
           , $window
           , $location
           , UserSession
           ) {
    return {
      request: function(config) {
        config.headers = config.headers || {};
        var token = UserSession.getToken();
        if( token
        &&  !config.headers.Authorization
        ) {
            config.headers.Authorization = 'Bearer ' + token;
        }
        return config;
      },
      responseError: function(rejection) {
        if (rejection != null && rejection.status === 401) {
          UserSession.destroy();
          $location.url("/login");
        }

        return $q.reject(rejection);
      }
    };
}]);

This code intercepts all http requests and responses that result in an error.

The request interceptor checks if we have a token from UserSession and attaches it as an Authorization header.

The response error interceptor looks for 401 authentication errors. Remember that our backend throws a 401 when the user is not authenticated when using a protected API. Here, we intercept the 401 and redirect the user to the /login page.

Now let’s jump back to the UserSession. First at the top of the auth.js file, you’ll notice this

const USER_ACTIVE_UNTIL = {
  pageRefresh: 'localvar',
  sessionExpires: 'sessionStorage',
  forever: 'localStorage'
}

const SESSION_PERSISTANCE = USER_ACTIVE_UNTIL.forever;

You can manually set how the login session should be persisted. What does this mean and why does it matter? So we can store the user and token either as local variables, in the session storage, or the local storage.

If you store it in local variables, as soon as you refresh the page, it all goes away. Certainly if you open another tab or close/reopen your browser, you will no longer be logged in because the user and token are gone. If you want this behavior, set SESSION_PERSISTANCE to USER_ACTIVE_UNTIL.pageRefresh

If you set SESSION_PERSISTANCE to USER_ACTIVE_UNTIL.sessionExpires, then as long as you’re in the browser tab, you’re logged in. You can refresh the page and still be logged in. However if you close the tab, or ctrl-click to open a new tab, it won’t carry the authentication data and you’ll have to relogin.

If you set SESSION_PERSISTANCE to USER_ACTIVE_UNTIL.forever, then you’ll always be logged in (until your token expires, currently one hour by default). You can close your browser and you’ll be logged in when you go back. You can ctrl-click to open other tabs and those will share your login session as well. This is the default behavior configured.

One last thing to note about this model, which is less about authentication and more about display. You’ll probably want to display the user and notify widgets on your page when the user is logged in and out.

I followed the technique here for this model. It involves broadcasting logins, logouts, and failures which can be seen in ng/userCtrl/controller.js. This controller also holds the user in its scope. And most importantly, this controller is bound to the top-level node, which is the <body> of the index.html page.

From this model, you can have various components listen for the broadcast messages and do something appropriate. e.g. once user logs in, expose user controls or perform some other action.

Having the controller at the top-level and a $scope.user means you can access the user info from any of your pages. (We could also have used $rootScope but I also try not to use global variables in my apps whenever possible.)

I hope this description has helped you understand and apply authentication to your application. You can use the template and build your app from it, or copy the relevant components over (primarily the backend auth.js and frontend auth.js). Keep in mind also that since the protocol is standard and over HTTP, there’s nothing that stops you from replacing the frontend or backend here. You can swap out the angular frontend with something else that adds in the Authorization headers appropriately. Similarly, you can swap out the nodejs backend with something that signs and verifies jwt tokens.

Tagged , , , ,

AngularJS When processing the DOM takes a long time

You already know that you can add a progress spinner when an asynchronous process takes a long time. For example, say you’re loading data from a REST call.

$http.get(url)
  .then(function(res) {
    $scope.data = res.data;
  });

<div ng-hide="data">
  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>

<div ng-show="data">
  {{data}}
</div>

But let’s say you need to reload that data, like paging. And suppose the data is HUGE and it takes a really long time for the DOM to be updated even if you already have the data in memory. What happens is that when you initiate action, the page seems to stall with the old data still there. This is bad UI because it makes the user feel like nothing is happening and may cause them to click around.

Ideally, you want the old data to be cleared so that the spinner can appear again. But clearing the data before setting it won’t do what you’d expect.

function() {
  $scope.data = null;
  $scope.data = ...
}

What happens here is that $scope.data is set to null, then to the new data, but the page will not change until the new data is painted and ready to show to the user. Why didn’t setting $scope.data to null immediately make the spinner appear?

Angularjs only sees the changes at the end of the function. Form Angular’s view, $scope.data went from the old data to the new. It never saw the update to null.

Here’s how I get around that.

function() {
  $scope.data = null;

  setTimeout(function() {
    $scope.$apply(function() {
      $scope.data = ...
    })
  }, 100)
}

In the main thread of the code, I set $scope.data to null. Then I create a 2nd thread with the setTimeout() which is asynchronous, so the function ends and angularjs updates. It now sees that $scope.data is null so it erases the DOM and shows the spinner.

Eventually, the timer kicks off (set for 100ms in this case), and it applies the function that sets $scope.data to the new data. While this is happening and the DOM is painted in the background, the user sees the spinning icon. Once it’s complete, the spinner goes away and the data is shown.

Tagged

Angular: Controls between parent and directives

If you need the parent controller to call a directive’s scope function, then this is how you need to set everything up. Stackoverflow

If you need a directive to call the parent’s scope function, then this is how you set them up. Stackoverflow

Tagged

Tomcat ContextPath and Angularjs

An interesting obstacle arose when I tried to use Angularjs (NG) in Tomcat, specifically in regards to the path.

Typically, I’ve been using NG assuming everything starts at the root path. So my index.html is at http://domain.com/index.html.

However, in Tomcat, each webapp has its own starting path. So you may have a weather webapp that is at http://domain.com/weather/ and a clock webapp at http://domain.com/clock/.

How do you configure NG within tomcat?

You could hardcode your starting path. But imagine if you wanted to have two clock webapps in tomcat, renaming one to http://domain.com/clock1/ and the other http://domain.com/clock2.

Now you would have to change all the references of “clock” to “clock1” and “clock2” respectively. And there are many references…

In the index.html, you have to change all your <link …css> as well as all <script …js>. You might think that you can outsmart yourself by changing the index.html to a index.jsp and using <%=request.getContextPath()%>.

But then you still have to change references of the hardcoded path in your .js files, such as your app.js that defines your module and routes.

And don’t even get me started on all your templates that reference .js and .css.

Well, let me jump straight to the short answer.

In your index.html, simply add this within your <head> tag

<head>
    <base href="/clock/" />
</head>

That’s it. Now all your relative paths will have that base href prefixed to them automatically.

So <link href=”mystyle.css”> will automatically fetch from http://domain.com/clock/mystyle.css

<script src=”myscripts.js>” will automatically fetch from http://domain.com/clock/myscripts.js

Even app.js will leverage this base when using relative url’s.
e.g. $routeProvider.when(‘/’, {templateurl: ‘home.html’})
will automatically reference http://domain.com/clock/home.html

This html standard can even be used on jsp pages. Anything that is html will take advantage of it

Tagged , , ,