Authentication with AngularJS

Simplify your user authentication when using ui-router

Managing authentication within your AngularJS application is extremely important, initially I found it quite difficult to find some examples of how to do it the right way for my startup, keeping the logic clean, and as automated as possible.

Initially I just rolled some convoluted solution using the $rootScope to store variables, and then access those variables within my controllers, but it was messy, and created a lot of duplicate code.

So I was pointed to an article on the subject (thanks @gdi2290) that had a better example of how to do this, but it wasn’t setup for ui-router, so I had to adapt it a little to work with it.

First of all I adjusted my routes to the following: (note the addition of the authenticate property)

myApp.config(function($stateProvider, $urlRouterProvider){
.state("forms", {
url: "/forms",
templateUrl: "partials/forms.html",
controller: "FormsListCtrl",
authenticate: true
.state("login", {
url: "/login",
templateUrl: "partials/login.html",
controller: "LoginCtrl",
authenticate: false
// Send to login if the URL was not found

Then, within my run function, I’m listening to the $stateChangeStart event, which fires each time you move within your application. It’s perfect for checking authentication.

You could wrap the following code into a directive to keep it clean, but for the sake of this article I’ve included it in the run event.

.run(function ($rootScope, $state, AuthService) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authenticate && !AuthService.isAuthenticated()){
// User isn’t authenticated

The AuthService is just an example service, because as well as checking if the route requires authentication, you need to also check that they are actually authenticated. In my case I have a function that checks for the existence of their token, and ensures that it’s valid.

That’s it, pretty really simple huh! It’s so much easier to maintain compared to how I was handling this before, it keeps the authentication logic much cleaner, and I don’t have to include any authentication logic in my controllers, as this handles everything.