Worklight Authentication done right with AngularJs

Security and authentication are major concerns in enterprise apps! If you don’t do them well you are risking both your and your clients reputation.


In this article I am presenting a few guidelines as well as a flexible implementation of user authentication and user state in AnguarJs.

You can download the code and demo app for this project here.

Update 19/09/2014: Added shorter timeout and check of deferred function.

Username and password are both: worklight.

Objectives

  • Have one “swappable” authentication service that can be easily included or swapped with another.
  • Authentication can be triggered as and when needed, rather than enforced on application start.
  • Allow both protected and un-protected information and methods.
  • Allow offline authentication.

How to use

All the authentication magic is done in one Angularjs service called userState.js.

Add the service:

<script src=”js/services/userState.js”></script>

The service exposes the following general authentication methods: getUser, initUser, checkUser, login and logout.

Inject the service:

app.controller(‘mainCtrl’,function mainCtrl($scope, userState) {
$scope.user = userState.getUser(); //user object
//controller code
});

$scope.user holds information about whether the user is logged in, log in errors, toggle the login form and the user name.

Protect your methods:

function needsAuthFunction(){
userState.checkUser().then(function(success){
//check success and do rest of the functions
});
}

Note: I strongly suggest you wrap up all your methods of which your users need to be logged in with this code. Even your protected adapter procedure calls (WL.Client.invokeProcedure). This will ensure both a proper logged in and online check before attempting to call the adapter.

Dom manipulations

<div ng-if=”user.loggedIn” ng-click=”logout()” class=”logout”>logout</div>

Use ng-if to show/hide secure dom elements based on logged in state!

This is very important as ng-if will remove the elements from the dom, while ng-show or any other type of css conditions will allow hackers to view it and manipulate it with browser extensions.

Login form

<modal-dialog show=’user.dialog’>…..</modal>

Your login form can be a route, pop-up or whatever you want and can be toggled by user.dialog. In the code above I am using a modal popup.

You have the flexibility to watch or change user.dialog and launch the login form at any time you want.

Adapter and configuration files

In the project files you can find the authentication adapter which is called: adapters/realmAuth, make sure you deploy it (right click -> run as -> deploy..).

There are also security tests and realms set up in server/conf/authenticationConfig.xml.

These are both the pretty much the generic “adapter based authentication” settings, which you can learn more about here.

You can also implement your own Worklight Authentication methods and just configure the service file with the new adapter and realm names.

In js/services/userState.js, change the following:

var realm = “AdapterAuthRealm”;
var securityTest = “Master-Password”;

The sample app

The sample app can be downloaded here!

Just import it into an eclipse with worklight SDK installed, or deploy from the command line interface tools.

The app gives a good example of using the authentication service from a controller. You can run it on an emulator as well and turn on/off the airplane mode to see how it works when it’s offline.

Inside the application you can log in with:

Username: worklight | Password: worklight

Show your support

Clapping shows how much you appreciated Gideon Simons’s story.