LoopBack + AngularJS authentication solution

In this article I’m going to describe the way I use LoopBack’s authentication service in connection with an AngularJS app on client side. While primarily based on the LoopBack getting started intermediate  tutorial, I tried to merge in John Papa’s style guidelines as well as a few other blog posts on the matter.

Server side

LoopBack offers a flexible system to build an authentication system that suits the demands of your application. The documentation on Users, Roles, RoleMappings, ACLs etc. is quite comprehensive , so I don’t feel like there is a lot to add on this side. AngularJS will use the automatically generated services in lbServices.js to communicate via the REST API.

Client side

Of course, everything we are going to do here is providing a nice user experience by hiding routes and endpoints the current user has no access on. Since all code can possibly be altered by the client, essential security measures are to be taken on server side.

Status broadcasts

As LoopBack already offers a solid groundwork, the only real addition is a broadcasting system offering authentication status changes so that all parts of the application can adapt to new situations accordingly. I picked up a lot of ideas from a wonderful article by Gert Hengeveld in which he introduces a broadcasting system based on constants for the respective authentication states. Angular’s broadcast system is a controversy topic and according to the widely recognized Angular Style Guide by John Papa , we should avoid using it at all. However, while I see the risks of event-spamming if we talk about inter-controller communication, an authentication state broadcasting system is probably the only case where I opt for Angular events.

Overview

The basic idea is that whenever a call to authService is made, we make sure to publish all relevant state changes using Angular broadcasts. These are, among others you might find useful in your application, LOGIN_SUCCESS , LOGIN_FAILED and LOGOUT_SUCCESS .
The following diagram is showing dependencies between the components in the discussed authentication-state broadcasting system. The dashed lines are injects.
Diagram that shows dependencies between components in the introduced authentication system.
Next, I tried to model a basic procedure where a user submits the login form and gets redirected to the application’s main page. Since the user is authenticated after that, the menu bar has to show differing items and maybe include the user name in the upper right corner. The diagram below shows all that.Sequence diagram of a basic login procedure.

Implementation

References

[1]
StrongLoop, “Controlling data access - LoopBack - Documentation,” Controlling data access. [Online]. Available: https://docs.strongloop.com/display/public/LB/Controlling+data+access. [Accessed: 29-Sep-2015]
[1]
StrongLoop, “Defining and using roles - LoopBack - Documentation,” Defining and using roles. [Online]. Available: https://docs.strongloop.com/display/public/LB/Defining+and+using+roles. [Accessed: 29-Sep-2015]
[1]
StrongLoop, “Authentication, authorization, and permissions - LoopBack - Documentation,” Authentication, authorization, and permissions. [Online]. Available: https://docs.strongloop.com/display/public/LB/Authentication%2C+authorization%2C+and+permissions. [Accessed: 29-Sep-2015]
[1]
G. Hengeveld, “Techniques for authentication in AngularJS applications: A collection of ideas for authentication & access control, Communicating session changes, The AuthService, Restricting element visibility, Restricting route access, The loginDialog directive, Read my other articles:,” Medium, 13-Mar-2014. [Online]. Available: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec. [Accessed: 27-Sep-2015]
[1]
John Papa, “Angular Style Guide,” GitHub. [Online]. Available: https://github.com/johnpapa/angular-styleguide. [Accessed: 25-Sep-2015]
[1]
StrongLoop, “strongloop/loopback-getting-started-intermediate,” GitHub. [Online]. Available: https://github.com/strongloop/loopback-getting-started-intermediate. [Accessed: 25-Sep-2015]